En esta sesión vamos a programar dibujos con movimiento y para eso necesitamos conocer la función “draw” y la función "setup".
Las declaraciones contenidas en la función setup se ejecutan una sola vez cuando el programa inicia.
La función draw ejecuta continuamente el código que se encuentra dentro de sus corchetes. Debe ir colocada después de la función setup.
IIIIIIIIIIIIII Copien el siguiente programa, péguenlo en un archivo nuevo y den clic en run:
void setup(){
size(200, 200);
stroke(0);
smooth();
}
float x = -20;
void draw(){
background(227, 255, 252);
x = x + 1;
if(x > 230){
x = -20;
}
line(x, 30, x, 170);
ellipse(x, 100, 20, 20);
} |
|
.
void setup(){
size(200, 200);
stroke(0);
smooth();
} |
En este ejemplo tenemos dentro de la función setup la función size que determina el tamaño de la ventana, stroke que determina el color del contorno y smooth que suaviza la línea.
Terminando la función setup esta declarada una variable de nombre x y tipo float. Las variables tipo float utilizan números decimales.
void draw(){
background(227, 255, 252);
x = x + 1;
if(x > 230){
x = -20;
}
line(x, 30, x, 170);
ellipse(x, 100, 20, 20);
} |
La primera línea dentro de draw es la función background que determina el color del fondo. En la siguiente se suma 1 a la variable x.
Después tenemos una estructura if cuya condición es “si x es mayor a 230 entonces x debe tener el valor de 0”.
Por ultimo tenemos la función line que utiliza la variable x para determinar sus dos coordenadas en el eje x y la funcion ellipse que utiliza la misma variable para determinar la coordenada de su centro en el eje x.
Recuerda que las declaraciones dentro de draw se ejecutan continuamente.
Por lo tanto lo que sucede es que se pinta todo el fondo del color determinado por background, se suma 1 al valor de x, se dibuja una línea de la coordenada x, 30, a la x, 170 y un círculo con su centro en x, 100. Después el fondo se pinta de nuevo por lo que se borra el círculo y la línea anteriores y se pintan nuevos una coordenada más hacia la derecha que antes. Cada vez que draw se ejecuta la línea y el círculo se dibujan una coordenada más adelante en el eje de x. Por eso vemos que la línea y el círculo avanzan hacia la derecha. Cuando x llega a 230 el círculo y la línea están ya fuera de la ventana, es por eso que x debe volver a tener el valor de -20 para que la línea y el círculo aparezcan nuevamente desde el lado izquierdo de la ventana.
Ahora realicen un dibujo con movimiento utilizando las funciones setup y draw, sálvenlo con el nombre "movimiento" y coloquen su programa en la sección de tareas.
Recuerden que pueden enviar todas sus dudas al foro.
Gracias y nos vemos la próxima sesión.
