Los programas que hemos realizado hasta ahora son los llamados programas estáticos. Esto significa que nunca cambian. Se ejecutan una vez y cuando llegan a la última línea de código, se paran. Si queremos que un programa sea interactivo, tenemos que habilitar la entrada de datos continuamente mientras el programa se ejecuta. Esto sólo es posible si la ejecución es continua.
Con Processing, puedes crear programas que se ejecuten continuamente utilizando la función draw(). Esta función repetirá el bloque de código una y otra vez hasta que el programa se pare. Sin embargo, no todo el código escrito necesita ser repetido continuamente. Para el código que sólo necesita ser ejecutado una única vez, debes usar, como has hecho hasta ahora, la función setup(). Cuando se utiliza la función draw(), se dice que Processing está funcionando en modo dinámico; cuando no se utiliza, se dice que está funcionando en modo estático.
Vamos a escribir de nuevo un programa que dibuje una línea, pero esta vez utilizando la función draw():
1 void setup(){
2 size(300,300);
3 }
4
5 void draw() {
6 line(0,0, width, height);
7 }
Este programa establece el tamaño de ventana a 300x300 píxeles y luego dibuja una línea sobre toda la ventana una y otra vez. En este momento, todavía no se puede apreciar que esto está pasando una y otra vez (pues las líneas se dibujan una encima de otra continuamente), así que vamos a escribir otro programa para hacerlo más visible:
1 void setup(){
2 size(300,300);
3 }
4
5 void draw() {
6 line(0,0, mouseX, mouseY);
7 }
El comando mouseX hace referencia a la coordenada X del puntero del ratón, así como el comando mouseY hace referencia a la coordenada Y del mismo.
Este programa permite interactuar con la pantalla mientras se mueve el ratón. Esto sucede porque cada vez que el código dentro de draw() se ejecuta, una nueva línea se dibuja; el segundo punto de la línea cambia dependiendo de la posición del puntero del ratón.
Como puede verse en el vídeo, se deja un rastro de líneas por donde se mueve el ratón. Esto es porque cada línea dibujada no es eliminada ni se dibuja nada más por encima. Puede añadirse una nueva línea de código al principio del draw() para establecer el color de fondo a blanco, por lo que parecerá que existe siempre una sola línea... Esto se debe a que el código dentro de esta función se ejecuta una y otra vez, línea por línea, de arriba a abajo. Por tanto, lo primero que sucede cada vez que el draw() se ejecuta es que se crea el fondo blanco sobre todo lo anterior; después una nueva línea es dibujada y luego el fondo se vuelve a poner blanco,... así una y otra vez.
1 void setup(){
2 size(300,300);
3 }
4
5 void draw() {
6 background(255);
7 line(0,0, mouseX, mouseY);
8 }
TAREA
Práctica 6. Realiza un programa similar al siguiente:
Datos:
Lienzo de 400x400 px.
Relleno del círculo de color rojo (255,0,0).
Círculo sin borde.