Article 5

Drawing Shapes

Master Processing's complete drawing toolkit: rectangles, ellipses, lines, arcs, triangles, and custom polygons with beginShape() and vertex().

⏱ 14 min processing shapes drawing primitives vertex

The Basic Building Blocks

Processing provides a concise set of functions for drawing primitive shapes. Once you know these, combined with color and transformation, you can construct almost any visual.

All shape functions draw relative to the current coordinate origin, affected by any active transformations. Shapes are drawn with the current fill() color for their interior and stroke() color for their outline — we’ll cover color in the next tutorial, but the defaults are a white fill with a thin black stroke.

Rectangles

rect(x, y, width, height);

By default, rect() positions from the top-left corner of the rectangle:

void setup() {
  size(400, 400);
}

void draw() {
  background(240);
  rect(50, 50, 200, 100);  // top-left at (50, 50), 200 wide, 100 tall
}

Rounded Corners

Add a fifth argument for corner radius:

rect(50, 50, 200, 100, 15);  // 15-pixel rounded corners

All four corners can be set independently with four extra arguments:

rect(50, 50, 200, 100, 0, 30, 30, 0);  // top-left, top-right, bottom-right, bottom-left

rectMode()

Change how the x and y arguments are interpreted:

Mode	Behavior
`CORNER` (default)	x, y is the top-left corner
`CORNERS`	x, y is top-left; w, h become the bottom-right corner coordinates
`CENTER`	x, y is the center of the rectangle
`RADIUS`	x, y is center; w, h are half-widths

rectMode(CENTER);
rect(200, 200, 100, 60);  // centered at (200, 200)

rectMode() stays in effect until you call it again. A common pattern is to set it to CENTER once in setup() if you prefer center-based positioning throughout your sketch.

Ellipses and Circles

ellipse(x, y, width, height);

ellipse() is always positioned by its center point by default. Equal width and height gives you a circle:

ellipse(200, 200, 80, 80);   // circle, diameter 80
ellipse(200, 200, 120, 60);  // wide ellipse

ellipseMode()

Works identically to rectMode():

ellipseMode(CORNER);    // x, y becomes top-left corner of bounding box
ellipseMode(RADIUS);    // width and height are radii, not diameters
ellipseMode(CENTER);    // default: x, y is center

circle() and square()

Processing 3.5+ added convenience functions:

circle(x, y, diameter);   // equivalent to ellipse(x, y, d, d)
square(x, y, size);        // equivalent to rect(x, y, s, s)

Lines and Points

line(x1, y1, x2, y2);
point(x, y);

Lines connect two points. The strokeWeight() function controls thickness. Points draw a single pixel (or strokeWeight sized dot):

void draw() {
  background(40);

  strokeWeight(1);
  stroke(200);
  line(0, 0, width, height);         // diagonal from corner to corner

  strokeWeight(4);
  stroke(255, 100, 0);
  line(mouseX, 0, mouseX, height);   // vertical line at mouse x
  line(0, mouseY, width, mouseY);    // horizontal line at mouse y

  strokeWeight(8);
  stroke(255, 255, 0);
  point(mouseX, mouseY);             // large dot at mouse
}

Triangle and Quad

triangle(x1, y1, x2, y2, x3, y3);
quad(x1, y1, x2, y2, x3, y3, x4, y4);

triangle() takes three x,y pairs — the three vertices of the triangle. quad() takes four, drawn in order. Unlike custom polygons, these do not auto-close you — but Processing does close them automatically.

// An upward-pointing triangle
triangle(200, 50, 350, 300, 50, 300);

// A parallelogram
quad(100, 300, 250, 300, 300, 400, 150, 400);

Arcs

arc(x, y, width, height, start, stop);
arc(x, y, width, height, start, stop, mode);

arc() draws a portion of an ellipse. The start and stop arguments are angles in radians, measured clockwise from the 3 o’clock position (the positive x-axis).

// Half circle on the top
arc(200, 200, 150, 150, PI, TWO_PI);

// Quarter circle, bottom-right
arc(200, 200, 150, 150, 0, HALF_PI);

Processing provides constants for common angles: PI (≈3.14), TWO_PI (≈6.28), HALF_PI (≈1.57), QUARTER_PI (≈0.785).

The optional mode argument controls how the arc is closed:

Mode	Behavior
`OPEN` (default)	No closing lines — just the arc stroke
`CHORD`	Straight line connecting start and end
`PIE`	Lines from both ends to center — like a pie slice

fill(100, 180, 255);
arc(200, 200, 160, 160, 0, HALF_PI + PI, PIE);

Custom Polygons: beginShape() and vertex()

For shapes more complex than the primitives above, use beginShape() and endShape() with vertex() calls to define each corner:

beginShape();
  vertex(100, 50);   // top
  vertex(180, 180);  // bottom-right
  vertex(20, 180);   // bottom-left
endShape(CLOSE);     // CLOSE connects the last vertex back to the first

Without CLOSE, the last point and first point aren’t connected — useful for open paths like waveforms.

A Star Shape

A star is constructed by alternating between outer radius and inner radius points:

void setup() {
  size(400, 400);
}

void draw() {
  background(30);
  translate(width / 2, height / 2);
  rotate(frameCount * 0.01);  // slowly rotate

  fill(255, 220, 50);
  noStroke();
  drawStar(0, 0, 50, 120, 5);
}

void drawStar(float x, float y, float r1, float r2, int points) {
  float angle = TWO_PI / points;
  float halfAngle = angle / 2.0;

  beginShape();
  for (float a = -HALF_PI; a < TWO_PI - HALF_PI; a += angle) {
    float sx = x + cos(a) * r2;
    float sy = y + sin(a) * r2;
    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * r1;
    sy = y + sin(a + halfAngle) * r1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

This drawStar() function takes a center position, inner radius, outer radius, and number of points. The loop alternates between outer and inner radius vertices around the full circle. This pattern — calculating positions on a circle using cos() and sin() — comes up constantly in creative coding.

noFill() and noStroke()

These two functions remove fill or outline completely:

noFill();         // shape is transparent — only the outline is drawn
noStroke();       // no outline — only the fill is drawn

Both stay in effect until you call fill() or stroke() again. They’re often used together to create different visual layers:

void draw() {
  background(20);

  // Outlined only — no fill
  stroke(255);
  strokeWeight(2);
  noFill();
  ellipse(100, 200, 120, 120);

  // Filled only — no outline
  noStroke();
  fill(255, 100, 50);
  ellipse(300, 200, 120, 120);

  // Both — default behavior
  stroke(0);
  fill(100, 200, 100);
  ellipse(200, 300, 120, 120);
}

Quick Reference

Function	Arguments	Notes
`rect()`	x, y, w, h	Top-left corner by default
`ellipse()`	x, y, w, h	Centered by default
`line()`	x1, y1, x2, y2	Width set by strokeWeight
`point()`	x, y	Single pixel dot
`triangle()`	x1, y1, x2, y2, x3, y3	Three vertices
`quad()`	x1-y4 (4 pairs)	Four vertices in order
`arc()`	x, y, w, h, start, stop	Angles in radians
`beginShape()`	—	Start custom polygon
`vertex()`	x, y	Add a point
`endShape(CLOSE)`	—	Finish and close polygon

In the next tutorial you’ll learn to control the color and style of every shape: fill colors, transparency, stroke weights, and how to cycle through hues using HSB color mode.