Algunas diferencias entre P5 y HYPE

No es mi propósito documentar a fondo las clases incluidas en HYPE, sino comentar algunos ejemplos a lo largo de algunos de los siguientes artículos. Aquí veremos algunas diferencias sobre cómo escribir en cada uno de los entornos:

Esto es Processing

void setup() {
    size(250,250);
    background(#242424);
    smooth();
 
    pushMatrix();//almacena datos sobre el actual sistema de coordenadas
        fill(#FF3300);
        stroke(#000000, 150);
        strokeWeight(6);
        translate(width/2, (height / 2)-70.5);//hay que corregir la posición 
        rotate( radians(45) );
        rect(0, 0, 100, 100, 10, 10, 10, 10);
    popMatrix();//restaura el sistema de coordenadas después del giro
 
    noLoop();
}

Hay un par de cosas poco intuitivas: la primera que rotate() no gira elementos individuales, sino todo el lienzo, teniendo luego que restaurar el sistema de coordenadas mediante pushMatrix() y popMatrix(); la segunda que tenemos que corregir la posición del rectángulo restándole a la altura la mitad de su diagonal para centrarlo.

Esto otro es Processing + HYPE

void setup() {
	size(250,250);
	H.init(this).background(#242424);//iniciamos HYPE y establecemos un fondo
	smooth();
 
	HRect rect = new HRect(100);//Nuevo objeto HRect
	rect
		.rounding(10) //esto es method chaining
		.fill(#FF3300)
		.stroke(#000000, 150)
		.strokeWeight(6)
		.anchorAt(H.CENTER)
		.rotation(45)
		.loc(width/2,height / 2)
	;
	H.add(rect); // añade el rectángulo
 
	H.drawStage(); // y lo dibuja en pantalla
 
	noLoop();
}

Lo llamativo en esta forma de programar es que las funciones pushMatrix() y popMatrix() no son necesarias, y la forma de encadenar métodos al objeto ‘rect’, que es una instancia de la clase HRect. Tampoco es necesario recalcular la posición del rectángulo.

Las clases y métodos de HYPE se identifican fácilmente ya que todos comienzan con ‘H’

Documentación

Leave a Comment.