Más condicionales (y curvas Bezier)

curvas
Hemos aprendido que en Processing podemos ejecutar una función repetidas veces si la escribimos dentro de draw(). Sin embargo, también podemos crear un bucle dentro de setup() usando el condicional while().

float n = 0;
 
void setup(){
  size(300, 300);
  smooth();
  noFill();
  //mientras n sea menos que 50
  while(n < 50){
    //ejecutar esta función
    stroke(noise(n/10)*255);
    bezier(10, height/2, random(width), random(height), random(width), random(height), width-10, height/2);
    //...y sumar 1 a n
    n++;
  }
}

De este modo obtenemos, en el ejemplo, 50 curvas Bezier aleatorias. Luego explicamos qué son. Si en lugar de usar while() para crear un loop usásemos draw() como hasta ahora:

float n = 0;
 
void setup(){
  size(300, 300);
  background(200);
  smooth();
  noFill();
}
 
void draw(){
    stroke(noise(n/10)*255);
    bezier(10, height/2, random(width), random(height), random(width), random(height), width-10, height/2);
    n++;
    if(n > 50){
      //reiniciamos
      background(200);
      n = 0;
      //si prefieres parar el bucle en lugar de reiniciar, usa noLoop();
    }
}

Como se ve, en el segundo caso el programa ejecuta cada ciclo ‘en vivo’, mientras que en el primero se calculan las 50 líneas previamente y se muestran a la vez.

Las curvas Bezier se definen mediante cuatro puntos: sus dos extremos y otros dos puntos de control coonectados a ellos, que modifican el trazado de la curva. Por tanto hay que pasar 8 datos a esa función:

      Coordenada x del primer extremo de la curva
      Coordenada y del primer extremo
      Coordenada x del primer punto de control
      Coordenada y del primer punto de control
      Coordenada x del segundo punto de control
      Coordenada y del segundo punto de control
      Coordenada x del segundo extremo de la curva
      Coordenada y del segundo extremo

En los ejemplos anteriores usamos la función random() para asignar coordenadas aleatorias a los putos de control, pero usamos coordenadas fijas para los extremos.

Documentación:

Leave a Comment.