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:
1. coordenada x de la esquina superior izquierda
2. coord. y de la misma esquina
3. anchura del rectángulo
4. altura del rectángulo
5. si se añade un quinto dato, P5 lo interpreta como radio de las esquinas, redondeándolas
6. 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:
1. coord. x del centro
2. coord. y del centro
3. ancho de la elipse
4. 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);

Documentación

• Draw circles and rectangles, change fill color
• Processing/Tutorials/Drawing
• Conceptos básicos Processing: rect, rectmode, ellipse y ellipsemode