[Tutorial Processing] setup() y draw()

[singlepic id=725 w=320 h=240 float=center]

Hasta ahora solo habíamos trabajado con programas estáticos, pero ha llegado la hora de dar un poco mas de dinamismo en nuestros programas, para esto haremos uso de dos funciones clave que son setup() y draw() que nos permitirán darle un toque interactividad a nuestro código; estas funciones están integradas en processing y se pueden considerar como las funciones principales. Empezaremos definiendo el comportamiento de cada función:

setup(): Esta función es la primera en ejecutarse, lo primero que incluiremos en ella es la función size() para definir el tamaño de nuestra ventana y frameRate(int) para definir el numero de veces que se ejecutara nuestro programa por segundo, ademas de la creación de objetos y propiedades iniciales.

draw(): Se ejecuta después de setup() y es cíclica, es decir, se repite indefinidamente, en esta función es donde crearemos nuestros código del programa.

Veamos mejor su funcionamiento con un ejemplo muy sencillo:

[code language=”java”]
color col;
int radio;

void setup() {
size(400, 400);
frameRate(10);

background(128);
}

void draw() {
col=color(random(255), random(255), random(255));
radio=(int) random(20, 50);
fill(col);
ellipse(random(width), random(height), radio, radio);
}
[/code]

Empezamos declarando nuestras variables a usar, posteriormente definimos nuestra funcion principial setup() notese que se antepone la palabra void que indica que esta función no regresara ningún valor (esto lo veremos mas detallado cuando veamos funciones), dentro desetup() tenemos la funcion size() para el tamaño de la ventana y frameRate(10) que nos indica que la función draw() se repetirá 10 veces por segundo, continuamos con la función draw(), dentro de ella creamos un color aleatorio y un numero aleatorio que asignamos en radio, aplicamos el color a nuestros trazos y dibujamos una ellipse en un punto aleatorio, ejecuta el codigo y observa lo que sucede.

[singlepic id=726 w=320 h=240 float=center]

No te parece bastante interactividad?? ahora involucremos un poco al usuario, utilizando algunas variables propias del sistema (también habrá un tutorial solo para este tema), usaremos las variables mouseXmouseY y mousePressed, veamos lo que contienen:

mouseX: variable de tipo entero que guarda la posición X del mouse, con referencia a nuestra ventana.
mouseY: variable de tipo entero que guarda la posición Y del mouse, con referencia a nuestra ventana.
mousePressed: variable de tipo booleana que regresa verdadero (true) si es presionado un botón del mouse y falso (false) de lo contrario.

Ahora hagamos unas ligeras modificaciones al ejemplo anterior, teniendo como resultado lo siguiente:

[code language=”java”]
color col;
int radio;

void setup() {
size(400, 400);
frameRate(30);

background(128);
}

void draw() {
if (mousePressed) {
col=color(random(255), random(255), random(255));
radio=(int) random(20, 50);
fill(col);
ellipse(mouseX, mouseY, radio, radio);
}
}
[/code]

Ejecuta el código y da clic sobre la ventana, ya va mejorando esto no?? pero es todo para este tutorial, en el siguiente continuaremos con las variables de sistema.

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...