Processing incorpora funciones que facilitan el trazado de circunferencias, rectángulos y otras formas geométricas simples.
Veamos las dos primeras:
size(300,300); rect(100, 100, 100, 100); ellipse(100, 100, 100, 100);
Como se ve, ambas figuras tienen los mismos datos… pero Processing no las dibuja en el mismo sitio. Esto se debe a que los datos que toma rect() y los que toma ellipse() son diferentes:
- rect() toma:
- coordenada x de la esquina superior izquierda
- coord. y de la misma esquina
- anchura del rectángulo
- altura del rectángulo
- si se añade un quinto dato, P5 lo interpreta como radio de las esquinas, redondeándolas
- si añadimos más datos, hasta un total de 8, se interpretan los 4 últimos como radios de cada esquina del rectángulo
- ellipse() toma:
- coord. x del centro
- coord. y del centro
- ancho de la elipse
- alto de la elipse (si es igual que el ancho, resulta una circunferencia)
Así pues, en el ejemplo anterior si quisiéramos dibujar la circunferencia dentro del cuadrado deberíamos asignar a las dos primeras coordenadas de ellipse() los valores x e y del centro de la misma
size(300,300); rect(100, 100, 100, 100); ellipse(width/2, height/2, 100, 100);
Otra posibilidad es modificar cómo queremos que P5 interprete los datos de rect()
size(300,300); // Ahora indicamos que las dos primeros datos de rect() serán las coordenadas de su centro rectMode(CENTER); rect(width/2,height/2, 100, 100); ellipse(width/2, height/2, 100, 100);
Otras funciones que afectan a las figuras definidas con rect() y ellipse() son fill() y stroke()
size(300,300); rectMode(CENTER); strokeWeight(4); fill(#336699); rect(width/2,height/2, 100, 100, 10); fill(#669933); stroke(#ffffff); ellipse(width/2, height/2, 100, 100);