Processing/JS

Bucles For

Syntasis for:

for (valor inicial; valor final; incremento) {
acciones
}

Las estructuras iterativas se usan para repetir líneas de código. La programación es más rápida y ayuda a reducir errores. Veamos los dos ejemplos con y sin for.

FOR

Código original

size(200, 200);
line(20, 20, 20, 180);
line(30, 20, 30, 180);
line(40, 20, 40, 180);
line(50, 20, 50, 180);
line(60, 20, 60, 180);
line(70, 20, 70, 180);
line(80, 20, 80, 180);
line(90, 20, 90, 180);
line(100, 20, 100, 180);
line(110, 20, 110, 180);
line(120, 20, 120, 180);
line(130, 20, 130, 180);
line(140, 20, 140, 180);

Código usando estructura for

size(200, 200);
for (int i = 20; i < 150; i += 10) {
line(i, 20, i, 180);
}

Dentro del paréntesis del for hay tres estados: inicio, test, y crecimiento.
Elinicio asigna el valor inicial a la variable usada en el test. El Test evalúa si es true o false y es el que decide que se ejecute el código o no saliendo del bucle. El crecimiento se usa para modificar la variable después de cada iteración.

Un bucle y un condiconal

For

for (int x = 20; x <= 80; x += 5) {
if ((x % 10) == 0) {
line(20, x, 50, x);
} else {
line(50, x, 80, x);
}
}

Iteraciones anidadas

Se pueden anidar iteraciones para crear iteraciones en dos dimensiones.
Nested iteration
Con la siguiente iteración dibujaremos 9 puntos:

for (int y = 10; y < 100; y += 10) {
point(10, y);
}

Si la combinamos con esta:

for (int x = 10; x < 100; x += 10) {
point(x, 10);
}

FOR

Generaremos 9x9= 81 puntos.

for (int y = 10; y < 100; y += 10) {
for (int x = 10; x < 100; x += 10) {
point(x, y);
}
}

Usando iteraciones se pueden conseguir texturas y efectos gracias al uso de iteraciones combinadas.

FOR

fill(0, 76);
noStroke();
smooth();
for (int y = -10; y <= 100; y += 10) {
for (int x = -10; x <= 100; x += 10) {
ellipse(x + y/8.0, y + x/8.0, 15 + x/2, 10);
}
}

FOR

size(200, 200);
noStroke();
for (int y = 0; y < 500; y += 20) {
for (int x = 0; x < 500; x += 20) {
fill((x+y) * 0.7);
rect(x, y, 20, 20);
}
}

Es importante que escribamos y formateemos el código para poder ver fácilmente su jerarquía y facilite su comprensión.

Processing tiene una herramienta que posibilita el formateo automático.

Auto format

Pueden utilizarse los valores generados por funciones matemáticas para dibujar. En este ejemplo se dibujan líneas coloreadas con un tono de gris que depende de la función, norm() o pow().

La funcción  pow() calcula un exponente, tiene dos parámetros.

pow(num, exponent)

Ejemplos:

float a = pow(1, 3); // Assign 1.0 to a: Equivalent to 1*1*1
float b = pow(3, 4); // Assign 81.0 to b: Equivalent to 3*3*3*3
float c = pow(3, -2); // Assign 0.11 to c: Equivalent to 1 / 3*3
float d = pow(-3, 3); // Assign -27.0 to d: Equivalent to -3*-3*-3

Normalizing

Para convertir los valores en un rango entre 0.0 y 1.0

para ejecutar la function norm() se deben dar tres valores:

norm(valor, bajo, alto)

El valor escrito en value se convierte a un valor entre 0.0 y 1.0

Y tomamos los parámetros bajo y alto como los valores maximo y mínimo.

float x = norm(0.0, 0.0, 255.0); // Assign 0.0 to x
float y = norm(102.0, 0.0, 255.0); // Assign 0.4 to y
float z = norm(255.0, 0.0, 255.0); // Assign 1.0 to z

Ejemplo:

FOR

size(200, 200);
for (int x = 0; x < 200; x++) {
float n = norm(x, 0.0, 200.0); // Rango de 0.0 a 1.0
float val = n * 255.0;
stroke(val);
line(x, 0, x, 100); // dibuja líneas degradadas lineal
float valSquare = pow(n, 4) * 255.0;
stroke(valSquare);
line(x, 100, x, 200); // dibuja líneas degradadas
}