The circle() function in p5.js provides a straightforward way to render circular shapes. It requires three arguments: the horizontal coordinate of the center, the vertical coordinate of the center, and the diameter of the circle.

Coordinate System

In p5.js, the origin (0,0) lies at the top-left corner of the canvas. Increasing the x-value moves rightward; increasing the y-value moves downward. For example, circle(100, 80, 50) draws a circle with diameter 50 whose center is located 100 pixels from the left edge and 80 pixels from the top edge.

Syntax

circle(centerX, centerY, diameter)

• centerX: x-coordinate of the circle's center
• centerY: y-coordinate of the circle's center
• diameter: full width of the circle passing through its center

Basic Static Circle

To display a single centered circle on a gray canvas:

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  circle(width / 2, height / 2, 100);
}

The circle appears with a default black outline and white interior.

Multiple Styled Circles

Circles can be combined into simple illustrations by varying position, size, and color.

Colored Bubbles Example

function setup() {
  createCanvas(400, 400);
  background(135, 206, 235);
}

function draw() {
  noLoop();

  // Red bubble
  fill(255, 99, 71);
  noStroke();
  circle(100, 150, 80);

  // Yellow bubble
  fill(255, 215, 0);
  circle(200, 200, 120);

  // Purple bubble
  fill(138, 43, 226);
  circle(300, 100, 60);
}

• fill(r, g, b) sets the interior color using RGB values between 0 and 255.
• noStroke() removes the perimeter outline.
• noLoop() ensures drawing occurs once only.

Concentric Ring Pattern

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
  noLoop();
  const midX = width / 2;
  const midY = height / 2;

  stroke(200);
  strokeWeight(3);
  noFill();
  circle(midX, midY, 200);
  circle(midX, midY, 150);
  circle(midX, midY, 100);

  fill(0);
  noStroke();
  circle(midX, midY, 20);
}

This renders three hollow rings sharing a common center, with a solid black disk at the core.

Simple Motion Effects

Because draw() executes repeatedly (typically 60 times per second), properties can be updated each frame to animate circles.

Horizontal Ping-Pong Movement

let posX = 50;
let velocity = 3;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220);

  fill(70, 130, 180);
  noStroke();
  circle(posX, 100, 60);

  posX += velocity;

  if (posX < 30 || posX > width - 30) {
    velocity = -velocity;
  }
}

The circle travels horizontally and reverses direction upon reaching either canvas edge. background(220) clears prior frames to avoid trails.

Pulsing Size Animation

let curDiameter = 50;
let growRate = 2;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);

  fill(255, 165, 0);
  noStroke();
  circle(width / 2, height / 2, curDiameter);

  curDiameter += growRate;

  if (curDiameter > 300 || curDiameter < 20) {
    growRate = -growRate;
  }
}

The circle rhythmically expands and contracts around its center.

Practical Notes

• The third argument specifies diameter, not radius; convert radius to diameter by multiplying by two.
• The y-axis increases downward, opposite to typical mathematical oreintation.
• Animations require a background() call each frame to clear previous drawings.
• RGB inputs to fill() and stroke() must be within 0–255; out-of-range values are ignored.