Vamos a usar algunos conceptos aprendidos en las notas anteriores para crear una animación un poco más interesante. También introduciremos las funciones if() y noise().
Dividiremos el código en varias secciones para facilitar su comentario. Empezamos definiendo el entorno en setup()
void setup() { size(640, 400); background(0); //mejoramos el aspecto de los gráficos smooth(); }
smooth() sirve para mejorar la calidad del renderizado.
Ahora declaramos las variables necesarias:
//usaremos las variables n y nn para establecer valores que se irán incrementando //todas las variaciones dependen de estas dos float n=0; float nn=0; //diámetro de las circunferencias float diametro = 0; //valores x e y de las dos circunferencias que usaremos float xelipse1 = 0; float yelipse1 = 0; float xelipse2 = 0; float yelipse2 = 0; //las tres últimas definen los porcentajes de rojo, verde y azul del fondo float r = 0; float g = 0; float b = 0;
De momento simplemente estamos indicando a Processing que vamos a usar esas variables. Todas tienen valor «0» al iniciar el programa, pero irán cambiando luego.
void draw() {
Comienza el bucle. Todo el resto del programa estará contenido en esta función
//el diámetro irá cambiando lentamente; diametro = noise(n/100)*50; //los porcentajes de rojo, verde y azul irán variando también r = n/100; g = noise(n/100)*125; b = n/100;
Acabamos de definir cómo irán cambiando los valores de las variables diámetro, r, g y b.
noise() es una función que devuelve valores más o menos aleatorios entre 0 y 1. La veremos pronto con más detalle.
Ahora vamos a usar los valores que acabamos de definir para dibujar un rectángulo del mismo tamaño que la ventana del programa que irá cambiando de color y será semitransparente
//el relleno toma los valores de la variables r, g y b //y una opacidad del 5% fill(r, g, b, 5); //borramos la línea de contorno noStroke(); //y definimos su posición y tamaño rect(0, 0, width, height);
Ese rectángulo se irá dibujando constantemente para ocultar poco a poco el rastro de las circunferencias
//color de relleno fill(r, g, sin(b/100)*100); //valores de las coordenadas x e y de cada elipse xelipse1 = 200+(sin(n/50)*sin(nn/100)*sin((nn+n)/70)*width/2); yelipse1 = 150+sin(nn/50)*sin(n/30)*height/2; xelipse2 = width/2+(sin(n/60)*sin(nn/10)*400); yelipse2 = height/2+sin(nn/25)*sin(n/30)*200; //color de la línea (blanco) stroke(255); //dibujamos la primera circunferencia ellipse(xelipse1, yelipse1, diametro, diametro); //y la segunda ellipse(xelipse2, yelipse2, diametro, diametro);
Casi todo lo anterior lo hemos visto antes.
fill() mantiene los valores de rojo y verde definidos más arriba, pero cambia el azul. Así conseguimos un color no demasiado diferente del fondo.
La multiplicación de senos y cosenos la vimos aquí.
Y ahora usamos por primera vez una función condicional:
if (dist(xelipse1, yelipse1, xelipse2, yelipse2)<125) { strokeWeight(10); line(xelipse1, yelipse1, xelipse2, yelipse2); } else { strokeWeight(1); }
El condicional if() tiene aquí la siguiente estructura:
if (evalúa si se cumple una condición) { si se cumple, se ejecuta una función } else { si no, se ejecuta otra }
En este caso, traducida a lenguaje natural: SI (la distancia entre los centros de las elipses es menor que 125) {el grosor del contorno cambia a 10 y dibujamos una línea entre ambos} SI NO {el grosor de la línea baja a 1}
Por último vamos a variar los valores de n y nn a cada paso. Esto es lo que hace que todo cambie, si las eliminamos nada se movería.
n=n+1; nn=nn+0.1;
…y cerramos la función draw()
}Y ya está: hora de ver el resultado.