En el post anterior vimos algunos elementos de la sintaxis de Processing:
- Esto es una función: point(50,50);
- Esto, una variable float y = height/2;
Una función puede contener una variable: point(50,y); (y es una variable). Una variable puede contener a otra: y = height/2 (tanto y como height son variables).
Ahora vamos a ver un par de funciones especiales que normalmente contienen a otras funciones: setup() y draw().
setup()
Esta función es llamada una sola vez cuando el programa inicia. Se usa para definir las propiedades iniciales del entorno. Un programa sólo puede contener una función setup().
void setup(){ // funciones, variables, medios }
Algunas funciones que suelen incluirse en setup():
- size(). Define las dimensiones de ancho y alto de la ventana donde se ejecutará el programa (en píxeles).
- background(). Color o imagen de fondo de la ventana
- fill(). Color de relleno de las formas dibujadas por el programa
- stroke(). Color del contorno de las formas
- strokeWeight(). Grosor de ese contorno
Ya las comentaremos. Ahora veamos algunas en acción. Por ejemplo:
void setup(){ size(650, 200); background(#339966); }
produce ->
De momento no es más que un fondo verde de 650 x 100 píxeles. Vamos a dibujar algo encima:
void setup(){ //dimensiones size(650, 100); //color del fondo background(#339966); //color del trazo en hexadecimal stroke(#ffffff); //grosor del trazo en píxeles strokeWeight(5); //declaramos la variable que contiene las coordenadas y float y = height/2; //y dibujamos tres puntos point(width*0.25, y); point(width*0.5, y); point(width*0.75, y); }
Como veis hemos escrito todas las funciones y la variable y dentro de la función setup().
Si queremos añadir un poco de movimiento necesitamos usar draw()
draw()
Ya sabemos que nuestro programa ejecutará una sola vez la función setup() con todo lo que contenga. Para crear una animación necesitamos que al menos una parte de ese código se ejecute muchas veces, y que se produzca alguna variación en los datos cada vez que se ejecute.
Para esto tenemos draw(), una función que se ejecuta constantemente (60 veces por segundo, por si quieres saberlo).
Si queremos que nuestros puntos se muevan sobre el fondo, necesitamos además que al menos una de las coordenadas varíe a lo largo deltiempo. Por ejemplo, si conseguimos que las coordenadas y tengan un valor cada vez mayor, veremos los puntos moverse hacia abajo.
void setup(){ //dimensiones size(650, 100); //color del fondo background(#339966); //color del trazo en hexadecimal stroke(#ffffff); //grosor del trazo en píxeles strokeWeight(5); } //declaramos la variable y float y = height/2; void draw(){ //actualizamos el fondo background(#339966); //dibujamos tres puntos point(width*0.25, y); point(width*0.5, y); point(width*0.75, y); //y ahora viene la magia: añadimos 1 a la variable <strong>y</strong> y=y+1; //por último vamos a reiniciar la animación cuando los puntos alcancen el borde inferior if (y > height){ y=height/2; } }
Vamos a fijarnos en tres detalles:
- Ya habíamos establecido el color de fondo (background(#339966);) en setup(). ¿Por qué debemos hacerlo otra vez en draw()?. Fácil: para borrar el estado anterior de cada punto. De lo contrario se vería su rastro en la ventana. Compruébalo en tu editor de Processing.
- Hemos declarado el valor de y fuera de las funciones setup() y draw(). La razón es que si lo hacemos dentro de setup(), no podríamos usarla en draw(). Las variables no pueden usarse fuera de la función en la que han sido declaradas. Por otra parte, si la declaramos en setup(), su valor se reiniciaría en cada ciclo, quedando sin valor la suma y = y + 1 que realizamos al final
- El condicional if() sirve para hacer que el código escrito entre llaves ‘{}’ se ejecute sólo si se da la condición expresada entre paréntesis. Lo veremos con detalle más adelante
Documentación
- http://www.funprogramming.org/3-Create-an-animation-use-random.html
- http://processing.org/tutorials/overview/
- http://processing.org/reference/setup_.html
- http://processing.org/reference/draw_.html
- http://processing.org/reference/size_.html
- http://processing.org/reference/size_.html
- http://processing.org/reference/fill_.html
- http://processing.org/reference/stroke_.html
- http://processing.org/reference/strokeWeight_.html
- http://processing.org/reference/if.html
DISCULPAME
void setup(){
size (500,500);
background (#000090);
stroke(#900000);
strokeWeight(20);
point (250,250);
point (125,250);
point (375,250);
}
float y = 250
void draw(){
background(#000090);
point (250, y);
point (125, y);
point (375, y);
y=y+1;
if (y> height) {
y=height/2
}
}
ME SALTA «UNEXPECTED TOKEN:VOID»
POR QUÉ?
Disculpa la tardanza, no vi tu comentario. Imagino que ya lo has resuelto. Falta un punto y coma después de ‘float y = 250’
Hola, hice un programa en processing para android el cual tiene una GUI con botones diseñados por mi mismo, el programa responde a eventos(taps en la pantalla) por lo cual la función draw() está vacia, el problema es que cuando me paso a otra aplicación y vuelvo a mi programa, los botones han desaparecido, tengo que dar tap en cada botón para que se haga visible (ya que tengo programado esto en void mousePressed() y void mouseReleased(), cómo hago para que la GUI no desaparezca cuando se pierde el foco o la visibilidad de mi aplicación? Agradezco cualquier ayuda.
le falta un ;
Hola, quiero saber la estructura de setup,pero no encuentro una respuesta, alguien me puede ayudar?
ME PODRIAS AYUDAR PORFAVOR
NECESITO CREAR UN JUEGO , EL FAMOSOS JUEGO ZELDA OF LENGEND EN PROCESSING CANVAS HTML5