Drawing Shapes

Learn to draw circles, rectangles, lines, and more.

The Canvas

Every sketch has a canvas - a rectangular area where you draw. The top-left corner is position (0, 0).

x increases going right
y increases going down

Basic Shapes

Circle

circle(x, y, radius) - Draw a circle at position (x, y).

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(blue)
  circle(150, 100, 50)
}

Rectangle

rect(x, y, width, height) - Draw from the top-left corner.

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(coral)
  rect(50, 50, 120, 80)
}

Line

line(x1, y1, x2, y2) - Draw from point 1 to point 2.

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  stroke(black)
  strokeWeight(3)
  line(50, 50, 250, 150)
}

Triangle

triangle(x1, y1, x2, y2, x3, y3) - Three corner points.

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(purple)
  triangle(150, 30, 50, 170, 250, 170)
}

Ellipse

ellipse(x, y, width, height) - Stretched circle.

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(green)
  ellipse(150, 100, 180, 80)
}

Colors

Named Colors

Use built-in color names:

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(coral)
  circle(75, 100, 40)
  fill(cyan)
  circle(150, 100, 40)
  fill(purple)
  circle(225, 100, 40)
}

Available colors: red, orange, yellow, green, blue, purple, pink, coral, cyan, white, black, and more.

RGB Colors

rgb(red, green, blue) - Mix your own colors (0-255 each).

fn setup() {
  size(300, 200)
}

fn draw() {
  background(rgb(30, 30, 50))
  fill(rgb(255, 100, 50))  // Orange
  circle(100, 100, 50)
  fill(rgb(50, 200, 100))  // Green
  circle(200, 100, 50)
}

HSL Colors

hsl(hue, saturation, lightness) - Great for rainbows!

hue: 0-360 (red -> yellow -> green -> cyan -> blue -> purple -> red)
saturation: 0-100 (0 = gray, 100 = vivid)
lightness: 0-100 (0 = black, 50 = normal, 100 = white)

fn setup() {
  size(300, 200)
}

fn draw() {
  background(rgb(20, 20, 30))
  for i in 0..6 {
    fill(hsl(i * 60, 80, 60))
    circle(50 + i * 45, 100, 35)
  }
}

Transparency

rgba(r, g, b, alpha) - Add transparency (0.0 = invisible, 1.0 = solid).

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)
  fill(rgba(255, 0, 0, 0.5))
  circle(100, 100, 60)
  fill(rgba(0, 0, 255, 0.5))
  circle(150, 100, 60)
}

Styling

Fill and Stroke

fill(color) - Set fill color
stroke(color) - Set outline color
noFill() - No fill (outline only)
noStroke() - No outline
strokeWeight(thickness) - Line thickness

fn setup() {
  size(300, 200)
}

fn draw() {
  background(white)

  // Filled with outline
  fill(coral)
  stroke(black)
  strokeWeight(3)
  circle(75, 100, 50)

  // Outline only
  noFill()
  stroke(blue)
  strokeWeight(4)
  circle(175, 100, 50)

  // Fill only
  fill(green)
  noStroke()
  circle(260, 100, 40)
}

Previous: First Sketch Next: Animation