Nuestro primer condicional, y un par de cosas más

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.

Documentación:

Leave a Comment.