Single Tech Games

Processing 1.0

Despues de muchos(demasiados) dias actualizo mi blog, despues de mi super viaje a argentina(todo lo que hace radiohead :P), por donde estuve mes y medio – fotito con mi primo ricardo antes de que comienze el concierto ^_^:
imagen002
(io soy el de lentes)
Y obviamente sin chances de escribir nada, regreso con un nuevo lenguaje desarrollado a partir de java que esta desarrollado para ser usado en vez de flash, processing 1.0.3 (su version mas actual hasta hoy) la verdad es que tiene muy buenas criticas y ya esta siendo utilizado en varias universidades, ya que java t permite hacer mas cosas que flash, o eso dicen…
Primero se lo bajan de la pagina de progressive donde dice download.
Ahora voy a comenzar mostrandoles primero como se dibuja, el codigo explica para que sirve cada funcion

size(300,300); //tamaño de la ventana
background(255); //pinta el fondo (blanco)
//punto
set(75,75,0); //pixel(punto) negro (x,y,color)
strokeWeight(4);//ancho de linea
//linea
line(10,20,130,140);//(x,y(de un lado),x,y(del otro))
//triangulo
triangle(10,110,80,20,130,130);//(x1,y1,x2,y2,x3,y3) de cada punto
//elipse
ellipseMode(CENTER); //(valor por defecto)
ellipse(70,80,130,80); //(x1,y1(del centro),x2,y2(ancho y alto))
ellipseMode(CORNER);
ellipse(70,80,130,80); //(x1,y1(del punto superior izquierdo del rectángulo),x2,y2(ancho y alto))
ellipseMode(CORNERS);
ellipse(70,80,130,80); //(x1,y1(un punto),x2,y2(el otro punto al extremo))
//cuadrado-rectangulo
rectMode(CORNER); //modo en que se interpretarán los parámetros en rect()-por defecto
rect(10,10,120,80); //(x1,y1(punto superior izquierdo),x2,y2(ancho y alto))
rectMode(CENTER);
rect(10,10,120,80); //(x1,y1(punto central),x2,y2(ancho y alto))
rectMode(CORNERS);
rect(10,10,120,80); //(x1,y1(punto central),x2,y2(ancho y alto))
//cuadrado-sin forma
quad(20,10,130,30,110,115,40,140); //(x1,y1(primer punto),x2,y2(segundo punto),x3,y3(tercer punto),x4,y4(cuarto punto))
//curva
bezier(20,10,40,140,120,30,110,115); //(x1,y1(un extremo),x2,y2(punto de salida),x3,y3(punto de llegada),x4,y4(otro extremo))
//arco
ellipseMode(CENTER); //los parametros de ellipse funcionan para arc;
arc(80,70,120,80,PI/2,0); //(x1,y1(centro),x2,y2(ancho y alto),rad1,rad2(punto de inicio y final))


Hasta aca hemos hecho algunos dibujos que quedara asi :
dibujo
Recuerden que para ejecutar deben hacer click en el boton con forma de play
Al igual que java, tiene una serie de variables y operaciones disponibles para nosotros, el codigo que sigue les mostrara un poco de esto

int Var; //entero
Var = 26;
println(Var); //imprime en la pantalla negra
float reales;//flotante para decimales(reales)
reales = 26.99;
println(reales);//
//las operaciones son las mismas que podemos hacer en java con estos tipos de variables
//division de enteros devuelve enteros aun si la respuesta es en real
char letra;//almacena un dato alfanumerico
letra = 'j';
println(letra);// imprime una j
String oracion;//cadena de caracteres
oracion="julio c";
println(oracion);
boolean verdad;//datos booleanos
verdad = true;
println(verdad);
color fondo;//colores que se definen
fondo = 0;
background(fondo); //pinta la ventana de negro


Hasta ahora solo hemos probado lo basico de progressive, y ahora veremos la gracia de esto, empezaremos a utilizar las funciones setup() y draw(), la funcion setup() se ejecuta una sola vez en el programa, mientras que todas las instrucciones bajo la funcion draw() se ejecutan 30 veces en 1 segundo indefinidamente, veamos un ejemplo.

int c;
void setup(){
 c = 10;
 size(100,100);
}
void draw(){
 background(200);
 c = (c+1) % 100;
 rect(c,30,15,15);
}


Veran en su pantalla un cuadrado que se mueve como estedibujo1
Existe tambien unas funciones que se llaman mouseX y mouseY estas representan las coordenadas x y del mouse, un ejemplo:

int x = 50;
int y = 50;
void setup(){
 size(300,300);
}
void draw(){
 background(100); //si borran esta linea los cuadrados no se borran
 x=mouseX-20;
 y=mouseY-20;
 rect(x,y,60,60);
}


Quedaria de la sgte forma:
dibujo2
y si borramos los //
dibujo21
A partir de aca todo lo que necesitan es imaginacion, les voy a dar algunas funciones mas que pueden necesitar a lo largo del desarrollo de aplicaciones en este lenguaje:

size(200,100);
stroke(255,0,0);//te permite cambiar el color del dibujo actual
point(50,50);//función de punto(x,y), fijará el pixel en 50,50 al color del lienzo actual (rojo)
fill(#CC6600);//es lo que hace que el sgte triangulo sea verde, stroke hace que lo rodee una linea roja
triangle(12,50, 120,15, 125,60);
noFill( );//no hace ningun llenado
ellipse(160,30,60,60);
curve(84, 91, 68, 19, 21, 17, 32, 100);//otra forma de hacer curvas, igual a bezier pero los parámetros de en medio establecen los puntos para definir la forma de la curva
bezier(84, 91, 68, 19, 21, 17, 32, 100);//Los parámetros de en medio otorgan el contexto para definir la forma de la curva
noStroke();//deshabilita los bordes y no son dibujados


Hasta aqui todo lo basico de progressive, despues veremos un poco mas, como figuras, framerate, condicionales, bucles, etc
c’ ya

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

[…] un poco a programación, como muchos son nuevos por acá hace muchos años atrás hice mi primer tutorial de Processing 1.0 – ¡Dios! me estoy haciendo viejo – Bueno les cuento que ya está en la versión 2.0 y […]