Rectángulos y circunferencias con HRect() y HEllipse()

Continuando con HYPE, vamos a dibujar una serie de rectángulos y circunferencias y les aplicaremos algunas propiedades

Los dibujaremos agrupados en tres filas y tres columnas.



Comenzamos preparando el entorno

void setup() {
	size(550,550);
	H.init(this) .background(#242424);
	smooth();

Ahora un simple rectángulo de 100×100 con bordes redondeados, para el que definiremos propiedades: ‘.propiedad(parámetro)’

    HRect rectSI = new HRect(100);
    rectSI 
        .rounding(10) //redondear
        .noStroke() //sin línea
        .loc(width*0.25,height*0.25) //posición
        .anchorAt(H.CENTER) // anclaje
    ;

Añadimos otros dos rectángulos, uno de ellos más pequeño y transparente

	HRect rectSC = new HRect(100);
	rectSC 
		.rounding(10)	
		.fill(#cc0000) 
		.noStroke() 
		.loc(width*0.5,height*0.25) 
		.rotate(5) 
		.anchorAt(H.CENTER)
	;
	HRect rectSC2 = new HRect(50);
	rectSC2 
		.rounding(10) 
		.fill(#242424,75) //el segundo parámetro es la transparencia
		.noStroke() 
		.loc(width*0.5,height*0.25) 
		.rotate(5) 
		.anchorAt(H.CENTER)
	;

El rectángulo rojo no tiene relleno. El grosor de la línea provoca que se pierda el redondeado en el interior.

	HRect rectSD = new HRect(80);
	rectSD 
		.rounding(10) 
		.noFill() //sin relleno
		.stroke(#cc0000) 
		.strokeWeight(25) //grosor de línea
		.loc(width*0.75,height*0.25)
		.rotate(-5) 
		.anchorAt(H.CENTER)
	;
	HRect rectSD2 = new HRect(45);
	rectSD2 
		.fill(255) 
		.noStroke() 
		.loc(width*0.75,height*0.25) 
		.rotate(-5)
		.anchorAt(H.CENTER)
	;

Hasta ahora hemos definido el ancho y el alto del rectángulo con una sola cifra: HRect(100). Así obtenemos cuadrados. HRect(100,50) establece un ancho y un alto diferentes

	HRect rectMI = new HRect(100,60);
	rectMI 
		.rounding(10) 
		.noStroke() 
		.fill(#cc0000)	
		.loc(width*0.25,height*0.5) 
		.anchorAt(H.CENTER)
	;
	HEllipse circMI = new HEllipse(25);
	circMI 
		.fill(#242424) 
		.noStroke()	
		.loc(width*0.25,height*0.5) 
		.anchorAt(H.CENTER)
	;

También podemos establecer un redondeo diferente para cada esquina

	HEllipse circMC = new HEllipse(60);
	circMC 
		.fill(#f7f7f7) 
		.noStroke() 
		.loc(width*0.5,height*0.5) 
		.rotate(5) 
		.anchorAt(H.CENTER)
	;
	HRect rectMC = new HRect(50);
	rectMC 
		.rounding(20,0,0,0) //aquí
		.fill(#242424) 
		.noStroke() 
		.loc(width*0.5,height*0.5) 
		.rotate(45) 
		.anchorAt(H.CENTER)
	;

Sexto grupo de elementos

	HRect rectMD = new HRect(80);
	rectMD 
		.rounding(10) 
		.noFill() 
		.stroke(#cc0000) 
		.strokeWeight(25) 
		.loc(width*0.75,height*0.5)
		.rotate(-5) 
		.anchorAt(H.CENTER)
	;
	HRect rectMD2 = new HRect(45);
	rectMD2 
		.rounding(25,0,25,0) 
		.fill(255) 
		.noStroke() 
		.loc(width*0.75,height*0.5) 
		.rotate(5)
		.anchorAt(H.CENTER)
	;

Y la última fila del tirón

	//fila inferior
	//inferior izquierdo
	HRect rectII = new HRect(100);
	rectII 
		.rounding(10) 
		.noStroke() 
		.fill(#cc0000)	
		.loc(width*0.25,height*0.75) 
		.anchorAt(H.CENTER)
	;
	HEllipse circII = new HEllipse(25);
	circII 
		.fill(#FFFFFF) 
		.stroke(#000000,90) //línea negra transparente
		.strokeWeight(10)	
		.loc(width*0.25,height*0.75) 
		.anchorAt(H.CENTER)
	;
	//inferior centro
	HEllipse circIC = new HEllipse(60);
	circIC 
		.fill(#CC0000) 
		.noStroke() 
		.loc(width*0.5,height*0.75) 
		.rotate(5) 
		.anchorAt(H.CENTER)
	;
	HRect rectIC = new HRect(50);
	rectIC 
		.rounding(10) 
		.fill(#242424) 
		.noStroke() 
		.loc(width*0.5,height*0.75) 
		.rotate(45) 
		.anchorAt(H.CENTER)
	;
	HEllipse circIC2 = new HEllipse(15,20);
	circIC2 
		.fill(#FFFFFF) 
		.noStroke() 
		.rotate(-45)
		.loc(width*0.5,height*0.75) 
		.anchorAt(H.CENTER)
	;
	//inferior derecho
	HRect rectID = new HRect(80);
	rectID 
		.rounding(10) 
		.noFill() 
		.stroke(#FFFFFF) 
		.strokeWeight(25) 
		.loc(width*0.75,height*0.75) 
		.anchorAt(H.CENTER)
	;
	HRect rectID2 = new HRect(40);
	rectID2 
		.rounding(10) 
		.fill(#CC0000) 
		.noStroke() 
		.loc(width*0.75,height*0.75) 
		.rotate(45)
		.anchorAt(H.CENTER)
	;

Ahora tenemos que añadir al lienzo todos los objetos que hemos estado definiendo

	H.add(rectSI);
	H.add(rectSC);
	H.add(rectSC2);
	H.add(rectSD);
	H.add(rectSD2);
	H.add(rectMI);
	H.add(circMI);
	H.add(circMC);
	H.add(rectMC);
	H.add(rectMD);
	H.add(rectMD2);
	H.add(rectII);
	H.add(circII);
	H.add(circIC);
	H.add(rectIC);
	H.add(circIC2);
	H.add(rectID);
	H.add(rectID2);

Y por último, dibujar el lienzo en pantalla:

	H.drawStage();

Leave a Comment.