Create
shape|p5_color|p5_math|p5_transform 🌱 Beginner

circle()

The `circle()` function in p5.js allows you to draw a perfect circle on the canvas at specified coordinates with a defined diameter. Creative coders use this function to explore shapes, patterns, and interactions, making it essential for projects involving graphics and design. For instance, a visual artist might use `circle()` to create dynamic art pieces that respond to user input, forming an engaging experience.

📖 p5.js Reference →

🧠 See The Whole Picture

Imagine the canvas as graph paper. The `circle()` function plants a dot at coordinates (`x`,`y`), then draws outward in all directions until the circle is `d` pixels wide. Everything inside gets filled with whatever fill() color is active.

📖 Visual Learner's Guide

The Big Picture:

When you run this code, you see a circle in the center of the canvas. It’s 100 pixels wide.

Visual Analogy:

Think of using a compass to draw a circle - you place the point down at (`x`,`y`) and the pencil draws around it, creating a circle of size `d`.

The Numbers Decoded:

`x=200` means 200 pixels from the LEFT edge. `y=200` means 200 pixels from the TOP. `d=100` means the circle is 100 pixels WIDE.

Connection Map:

`fill()` sets the inside color BEFORE you draw. `stroke()` sets the outline. Then `circle()` uses both to create the final shape.

Common Gotcha:

Remember that the position is the CENTER of the circle, not the corner like rectangles!

🔄 How It Works

This diagram illustrates how your code flows into the `circle()` function, which then outputs the shape directly onto the canvas.

📝 Syntax

📖 How to Read This

Read `circle(x, y, d)` as: 'Draw a circle AT position x,y WITH diameter d.' The parentheses are like a delivery box - you hand the function the information it needs.

circle(param1, param2, param3)

Example: circle(200, 150, 80)

🔀 Different Ways to Call It

circle(value)

Use this form to create a circle with a diameter equal to the value given. This is a quick way to visualize a single size without specifying position.

circle(128) → A circle with a diameter of 128 pixels is drawn at the default position (center of the canvas).
circle(v1, v2, v3)

This form allows you to specify the x and y coordinates for the center of the circle, along with the diameter. It's useful for placing circles at specific locations.

circle(255, 100, 50) → A circle is drawn at (255, 100) with a diameter of 50 pixels.

↩️ What It Returns

Type: void

The `circle()` function does not return anything; it directly paints on your canvas, akin to asking an artist to draw a circle on a canvas.

🎛️ Mode-Dependent Behavior

The `circle()` function behaves consistently regardless of colorMode(), but the fill() and stroke() colors will affect how the circle appears based on the active color settings.

📥 What Goes In

You give `circle()` three numbers. The first two are like GPS coordinates - they tell WHERE to plant the center. The third is like setting zoom - how BIG the circle grows from that center.

📤 What Happens

The `circle()` function takes your instructions and immediately paints a circle on the canvas. It uses whatever fill() color is active (like dipping a brush in paint) and whatever stroke() color for the outline.

Parameters

x Number required

A Number represents any digit like 100, 3.14, or -50. Picture it as a measurement on a ruler.

The x-coordinate of the circle's center. Typical values range from 0 to the width of the canvas. At 0, it's all the way to the left.

Range: 0 to canvas width

Examples: 0 → A circle drawn at the leftmost edge of the canvas. 200 → A circle placed halfway across a 400-pixel wide canvas. 400 → A circle drawn at the rightmost edge of the canvas.
y Number required

A Number represents any digit like 100, 3.14, or -50. Think of it as a vertical measurement.

The y-coordinate of the circle's center. Typical values range from 0 to the height of the canvas. At 0, it's at the top.

Range: 0 to canvas height

Examples: 0 → A circle drawn at the top edge of the canvas. 200 → A circle placed halfway down a 400-pixel tall canvas. 400 → A circle drawn at the bottom edge of the canvas.
d Number required

A Number representing the diameter, like 50 or 100. Visualize this as how wide the circle expands from the center.

The diameter of the circle. Typical values range from 1 to a large number, depending on canvas size. At 0, no circle is drawn.

Range: positive numbers

Examples: 0 → No circle is drawn. 50 → A small circle with a diameter of 50 pixels. 200 → A large circle with a diameter of 200 pixels.

💡 How Parameters Work Together

Think of it like placing a stamp - `x,y` is WHERE you press down, and `d` is how BIG the stamp is. The center of the stamp lands exactly at (`x`,`y`). With `fill()` and `stroke()`, you control the colors of the stamp and its outline.

💻 Working Example

// Complete working example with comments
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // Draw a circle at (200, 200) with a diameter of 100 pixels
  circle(200, 200, 100);
}
Try This Code →

⚙️ How It Works

When you call `circle()`, p5.js reads the provided x, y, and d values. It calculates where to place the center of the circle on the canvas and then uses the current fill and stroke colors to render the circle. The rendering pipeline involves setting pixel values in the canvas buffer for the specified area, creating a visual representation of a circle.

🎓 Learn Prompt Patterns

These patterns help you write better prompts for ANY function:

🎭 Persona Pattern

Tell the AI to act as a specific type of creator

"Act as a creative coder making generative art. Use circle() to create overlapping circles forming abstract patterns."

Why it works: Giving the AI a persona helps it understand the CONTEXT and style you want.

📋 Recipe Pattern

Ask for step-by-step instructions

"Give me step-by-step code to use circle() to create a visual representation of sound waves."

Why it works: Breaking down into steps helps you understand each part and learn incrementally.

📝 Template Pattern

Provide a structure for the AI to fill in

"Use this template: setup creates canvas, draw uses circle() with specific parameters to make a visual effect of bubbles."

Why it works: Templates give the AI clear constraints, resulting in more predictable output.

🔄 Refinement Pattern

Start simple and iterate

"Start with a basic circle() example. Then I'll ask you to add color, animation, interaction."

Why it works: Building up gradually helps you understand each addition and not get overwhelmed.

🎯 Direct Prompts - Name the Function

Tell the AI exactly which function to use:

Direct

"Create a colorful pattern using circle() with varying sizes and positions."

💡 Why this is good: This prompt guides the AI to generate a creative output with clear visual goals.

📚 What you learn: Learn how to manipulate shape sizes and positions dynamically.

📝 Sample Output: 
// 10-15 lines of COMPLETE working code
Direct

"Use circle() to create a dynamic clock with changing colors."

💡 Why this is good: This prompt gives the AI a creative role, encouraging generative design.

📚 What you learn: Concept of using shapes for real-time data representation.

📝 Sample Output: 
// complete code

🔮 Indirect Prompts - Describe What You Want

Don't name the function - see if the AI figures out to use circle():

Indirect

"Describe a visual of overlapping circles creating a vibrant scene."

💡 Why this is good: This teaches you to communicate visual intent without naming the function.

� What you learn: You learn to express visual ideas clearly.

📝 Sample Output: 
// Code showing AI chose circle()

🖼️ See It In Real Sketches

How circle() is used in actual gallery sketches:

AI Color Mixer Lab - RGB Additive Blending Tool

Multiple translucent circles are drawn to visualize color blending in real-time, illustrating color theory through interactive design.

// Example of overlapping circles for color mixing
function draw() {
  fill(255, 0, 0, 100);
  circle(100, 100, 100);
  fill(0, 255, 0, 100);
  circle...
View Sketch →

AI Binary Clock - LED Time Display

LED-like circles represent time in binary format, using colors for active and inactive states.

// Example of circles representing binary clock
function draw() {
  let hour = (hour() % 12).toString(2).padStart(4, '0');
  for (let i = 0; i < hour....
View Sketch →

🔀 Fun Function Combinations

Try asking the AI to combine circle() with these:

circle() + random()

→ Creates circles at random positions on the canvas.

Try: "Create a sketch that randomly places circles across the canvas."

// Random circle placement
function draw() {
  let x = random(width);
  let y = random(height);
  circle(x, y, 50);
}

⚠️ Common Mistakes & Fixes

❌ Mistake: Forgetting that the position refers to the circle's center.

🤔 Why it's wrong: Beginners often think the position is one of the edges.

✅ Fix: Correctly use `circle(x, y, d)` where (x,y) is the center.

🗺️ Learning Path

💡 Project Ideas

  • Create a dynamic visualizer that responds to audio inputs using circles.

🤖 Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what circle() does in p5.js"

Try this prompt in p5js.AI to see how the AI explains it!

Try in p5js.AI →

💡 Prompt AI to Write Code Using circle()

Example prompt:

"Create something using circle()"

🔧 Ask AI to Help Debug

When stuck, try:

"My circle() isn't working, help me debug"

✨ Creative Combinations with AI

Ask AI to combine functions:

"Combine circle() with other functions for interesting effects"

Ready to Try circle()?

Open p5js.AI and ask the AI to help you use circle() in your own creative project.

Start Coding with AI →