Processing/JS

Animación

para controlar la animación, se usan las funciones:

draw(), frameRate(), frameCount, setup(), noLoop()

Los programas que necesitan controlar la información continuamente, y deben incluir una función draw(). El código dentro de un bloque draw funciona en bucle hasta que se ejecuta un stop, el draw se ejecuta en cada frame.

Los frame se miden en frames por segundo (fps). La función frameRate() cambia y controla el número de frames por segundo, si el programa es muy ambicioso, el ordenador no puede ejecutarlo a esa velocidad, la velocidad en tal caso depende de las limitaciones del equipo.

La variable frameCount siempre contiene el número de frames recorridos.

Ejemplos:

// imprime en la consola del programa el número de frame
void draw() {
frameRate(4);
println(frameCount);
}

Si cambiamos los elementos visuales en cada frame, creamos una animación, en el siguiente ejemplo coloreamos dibujando línea a línea, creando una animación:

float y = 0.0;
void draw() {
frameRate(30);
line(0, y, 100, y);
y = y + 0.5;
}

La variable debe ser declarada fuera del draw, si la declaramos en el draw se crea cada frame con el mismo valor y la línea se dibujaría siempre en el mismo lugar.

El background de la ventana no se refresca automáticamente por eso vemos como las líneas se acumulan. Para limpiar el fondo en cada frame debemos incluir la función background()
Al comenzar la función draw().

float y = 0.0;
void draw() {
frameRate(30);
background(204);
y = y + 0.5;
line(0, y, 100, y);
}

En el siguiente ejemplo incluimos un condicional para reiniciar la variable, y que la línea vuelva a 0:

float y = 0.0;
void draw() {
frameRate(30);
background(204);
y = y + 0.5;
line(0, y, 100, y);
if (y > 100) {
y = 0;
}
}

Anatomia de un programa

Estructura

Cada programa tiene solo un setup() y un draw(). Cuando el programa comienza el código fuera de setup y del draw se ejecuta.

Después el código dentro del bloque setup() se ejecuta una vez y por último el código dentro de bloquel draw() se ejecuta repetidamente cada frame hasta que el programa se pare.

Si la variable se declara fuera del setup() y del draw(), es una variable global y puede ser accedida desde cualquier lugar del programa.

Controlando el flujo

Algunas funciones deben ejecutarse una sóla vez. La function setup() se ejecuta antes que draw() en ella funciones como: size() o loadImage() no deben ejecutarse en cada frame.

Ejemplo, en el que se dibuja una elipse en cada frame:

float y = 0.0;
void setup() {
size(100, 100);
smooth();
fill(0);
}

void draw() {
background(204);
ellipse(50, y, 70, 70);
y += 0.5;
if (y > 150) {
y = -50.0;
}
}

Cuando se ejecuta el código se ejecuta en este orden:

float y = 0.0
size(100, 100)

Se ejecuta setup()
smooth()
fill(0)
background(204)

Se ejecuta draw()
ellipse(50, 0.0, 70, 70)
y = 0.5
background(204)

Se ejecuta draw() por segunda vez
ellipse(50, 0.5, 70, 70)
y = 1.0
background(204)

Se ejecuta draw() por tercera vez
ellipse(50, 1.0, 70, 70)
y = 1.5

y así sucesivamente

Cuando el valor es mayor que 150,  Se resetea el valor de la variable a -50

Si en un programa solo queremos ejecutar un frame puede escribirse el código dentro del setup().

Las variables declaradas dentro de un bloque se llaman variables locales solo son accesibles dentro de ese bloque. Las variables declaradas en la base del programa, al mismo nivel que setup() y draw() pueden ser accesibles desde cualquier bloque del programa, las variables declaradas en el bloque setup() solo se accede a ellas en ese bloque y por último las variables declaradas en draw() sólo se acede a ellas en ese bloque.