Pintando con HFollow() y HPixelColorist()

Vamos a tomar como base una imagen fotográfica. Luego moveremos con el ratón algunos elementos (vamos a llamarlos pinceles) que pintarán esa imagen en pantalla. Usaremos HFollow() para controlar el movimiento de los pinceles de manera que sigan la posición del cursor de forma más o menos irregular.

Captura

Primero declaramos varios objetos: tres HCanvas, de manera que cada pincel pinte e una capa diferente (así nos aseguramos de que los más pequeños quedan arriba y no los ocultan los más grandes); tres HFollow, para que cada pincel tenga un movimiento diferente siguiendo al cursor; tres HRect (los pinceles); y por último un HPixelColorist que comará los colores de la imagen y los asignará dinámicamente a cada pincel dependiendo de su posición en la ventana del programa.

 HCanvas c1,c2,c3;
 HFollow mf,mf2,mf3;
 HRect r1,r2,r3;
 HPixelColorist colors;

Luego preparamos el setup(). Las dimensiones de la ventana deben coincidir con las de la imagen. Iniciamos HYPE y suavizamos el renderizado.

void setup() {
  size(853,480);
  H.init(this).background(#ffffff);
  smooth();  
}

Dentro de setup() iniciamos y añadimos a HYPE las tres capas sobre las que pintaremos

    c1 = new HCanvas().autoClear(false);
    c2 = new HCanvas().autoClear(false);
    c3 = new HCanvas().autoClear(false);
    H.add(c1);
    H.add(c2);
    H.add(c3);

Iniciamos HPixelColorist indicándole qué imagen usaremos como referencia. La imagen debe estar en la carpeta data en el mismo nivel que el programa. En este caso aplicaremos el color sólo al relleno. Añadimos esto a setup():

    colors = new HPixelColorist("ann.jpg").fillOnly();

Ahora definimos los pinceles: tres rectángulos, y añadimos cada uno a una capa, el grande abajo y el pequeño arriba del todo. También en setup().

    r1 = new HRect(40);
    r1 .rounding(2) .stroke(255) .loc(random(width),random(height));
 
    r2 = new HRect(20);
    r2 .rounding(2) .noStroke() .loc(random(width),random(height));
 
    r3 = new HRect(5);
    r3 .rounding(2) .noStroke() .loc(random(width),random(height));
 
    c1.add(r1);
    c2.add(r2);
    c3.add(r3);

Definimos los parámetros de los objetos HFollow. target() se refiere al objeto al que se aplicará el movimiento (cada rectángulo); ease() es la velocidad con la que sigue al cursor y spring() la inercia. En setup().

    mf = new HFollow() .target(r1) .ease(0.05) .spring(0.95);
    mf2 = new HFollow() .target(r2) .ease(0.04) .spring(0.85);
    mf3 = new HFollow() .target(r3) .ease(0.03) .spring(0.75);

Ya sólo queda añadir a draw() el modo como HPixelColorist aplicará el color de la imagen a cada rectángulo, y añadir todo a HYPE

void draw() {
    colors.applyColor(r1).alpha(25);
    colors.applyColor(r2).alpha(50);
    colors.applyColor(r3).alpha(75);
 
    H.drawStage();
}

Eso es todo. Una vez abierto el programa tenemos que mover el cursor por la ventana. Los tres rectángulos seguirán al cursor cambiando su color por el de la imagen de referencia, como si pintáramos con ellos. La diferencia entre las trayectorias aporta irregularidad al resultado.

Haz clic en la imagen (arriba) para abrir el programa, descargar o replicar el código, etc.

Leave a Comment.