`ellipse()`

The `ellipse()` function in p5.js draws an oval shape, specified by its center coordinates and size. Creative coders use this function to create visually engaging graphics, from simple shapes to complex designs. For instance, in an 'AI Wave Function Simulator', `ellipse()` can represent wave sources, visualizing physics concepts like interference patterns.

📖 p5.js Reference →

🧠 See The Whole Picture

Think of your canvas as a blank page. When you call `ellipse()`, you're placing a dot at coordinates (x, y), then expanding outward until you reach the specified width and height. Everything inside gets filled with the active fill color, creating a beautiful shape on your canvas.

📖 Visual Learner's Guide

The Big Picture:

Running this code shows an oval on the canvas.

Visual Analogy:

Like using a compass to draw an oval - you set one point (the center) and then stretch in two directions (width and height).

The Numbers Decoded:

x=200 means 200 pixels from the LEFT edge. y=200 means 200 pixels from the TOP. Width=100 means the ellipse is 100 pixels WIDE, and height=150 means it’s 150 pixels TALL.

Connection Map:

The `fill()` function sets the inside color BEFORE you draw the ellipse. The `stroke()` function sets the outline. Then `ellipse()` uses both when it draws.

Common Gotcha:

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

🔄 How It Works

graph TD A[Your Code] --> B[ellipse] B --> C[Canvas] style B fill:#ff6b6b

This diagram illustrates how your code flows into the `ellipse()` function and results in a visual output on the canvas.

📝 Syntax

📖 How to Read This

Read `ellipse(x, y, width, height)` as: Draw an ellipse AT position x,y WITH a WIDTH and HEIGHT. The parentheses are like a delivery box - you provide the function with the details it needs to draw the shape.

ellipse(param1, param2, ...)

Example: ellipse(200, 150, 80)

🔀 Different Ways to Call It

ellipse(value)

This form is used when you want to draw a circle with the same x and y coordinates, where the value defines both the width and height.

ellipse(128) → This produces a circle with a diameter of 128 pixels, centered at (128, 128).

ellipse(v1, v2, v3)

Use this form when you want to specify the center's x and y coordinates along with a single size value, creating a circle.

ellipse(255, 100, 50) → This creates a circle at (255, 100) with a diameter of 50 pixels.

↩️ What It Returns

Type: void

`ellipse()` does not return anything; it directly DRAWS on your canvas, similar to asking someone to paint a shape on a wall.

📥 What Goes In

You give `ellipse()` four numbers. The first two are like GPS coordinates - they tell WHERE to plant the center of the ellipse. The last two numbers are like setting zoom - they define how BIG the ellipse grows from that center.

📤 What Happens

`ellipse()` takes your instructions and immediately paints an ellipse 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 a pixel value, like a coordinate on a grid.

This parameter controls the horizontal position of the ellipse's center. Typical values might be anywhere from 0 to the width of the canvas.

Range: 0 to canvas width

Examples: 0 → Ellipse positioned at the far LEFT of the canvas. 200 → Ellipse positioned in the middle of a 400px wide canvas. 400 → Ellipse positioned at the far RIGHT of the canvas.

y Number required

A number representing a vertical coordinate on the canvas.

This parameter controls the vertical position of the ellipse's center. Typical values range from 0 to the height of the canvas.

Range: 0 to canvas height

Examples: 0 → Ellipse positioned at the TOP of the canvas. 200 → Ellipse positioned in the middle of a 400px tall canvas. 400 → Ellipse positioned at the BOTTOM of the canvas.

width Number required

A number that determines how wide the ellipse will be.

This controls the horizontal size of the ellipse. Typically, you choose a positive number; the larger the number, the wider the ellipse.

Range: Any positive number

Examples: 10 → A very small ellipse. 100 → A medium-sized ellipse. 300 → A wide ellipse.

height Number optional

A number that determines the height of the ellipse.

This controls the vertical size of the ellipse. Similar to width, a positive number defines how tall the ellipse will be.

Range: Any positive number

Examples: 10 → A very short ellipse. 100 → A medium height ellipse. 300 → A tall ellipse.

💡 How Parameters Work Together

Imagine planting a seed in a garden. The x and y parameters tell you WHERE to plant it, while width and height determine how BIG the flower will grow. The center of the flower represents the location, while the petals represent the size.

💻 Working Example

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

function draw() {
  background(220);
  // Draw an ellipse at (200, 200) with a width of 100 and height of 150
  ellipse(200, 200, 100, 150);
}

Try This Code →

⚙️ How It Works

When `ellipse()` is called, p5.js first reads the provided x and y coordinates for the center of the ellipse. It then takes the width and height parameters to determine how wide and tall to draw the shape. After gathering this information, it renders the shape onto the canvas using the current fill and stroke settings, effectively painting the ellipse at the specified location.

🎓 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 `ellipse()` to create a swirling pattern."

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 `ellipse()` to create a sunset effect with overlapping circles."

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 `ellipse()` with specified parameters to make a starry night sky."

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

🔄 Refinement Pattern

Start simple and iterate

"Start with a basic `ellipse()` example. Then I'll ask you to add color, animation, and 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 visual effect using `ellipse()` to represent waves in a water simulation."

💡 Why this is good: This prompt clearly defines a visual goal, guiding the AI to focus on creating a specific output.

📚 What you learn: You learn to structure your visuals using basic shapes.

📝 Sample Output:

// 10-15 lines of COMPLETE working code

Direct

"Design a colorful abstract art piece using `ellipse()` with varying sizes and colors."

💡 Why this is good: This provides a clear structure while allowing flexibility in creativity.

📚 What you learn: You learn how to manipulate shapes and colors together.

📝 Sample Output:

// complete code

🔮 Indirect Prompts - Describe What You Want

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

Indirect

"Describe a visual of overlapping circles with varying sizes and colors."

💡 Why this is good: This teaches you to express visual goals without relying on specific function names.

� What you learn: You learn to communicate visual intent effectively.

📝 Sample Output:

// Code showing AI chose `ellipse()`

🖼️ See It In Real Sketches

How ellipse() is used in actual gallery sketches:

AI Wave Function Simulator

The function is used to represent wave sources as circles, visually demonstrating wave interference.

function drawSources() {
  ellipse(source1.x, source1.y, d, d);
  ellipse(source2.x, source2.y, d, d);
}...

View Sketch →

AI Gravity Painter

Ellipses are drawn to represent particles and crystals influenced by gravity.

function drawCrystals() {
  for (let lineSeg of crystalLines) {
    ellipse(lineSeg.x, lineSeg.y, size, size);
  }
}...

View Sketch →

🔀 Fun Function Combinations

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

ellipse() + noise()

→ Creates organic, flowing shapes that mimic nature.

Try: "Create a flowing landscape using `ellipse()` and `noise()`."

// 5-10 lines showing the combination
function draw() {
  for (let i = 0; i < 100; i++) {
    let x = noise(i * 0.1) * width;
    let y = noise(i * 0.1 + 100) * height;
    ellipse(x, y, 20, 20);
  }
}

⚠️ Common Mistakes & Fixes

❌ Mistake: Using `ellipse()` but forgetting to call `fill()` or `stroke()` first.

🤔 Why it's wrong: Shapes might not appear as expected if colors are not set.

✅ Fix: // Ensure to set colors first fill(255, 0, 0); ellipse(200, 200, 100, 100);

🗺️ Learning Path

💡 Project Ideas

Create a dynamic starfield using `ellipse()`.
Design a simple game where ellipses represent moving objects.

🤖 Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what ellipse() 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 ellipse()

Example prompt:

"Create something using ellipse()"

🔧 Ask AI to Help Debug

When stuck, try:

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

✨ Creative Combinations with AI

Ask AI to combine functions:

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

Ready to Try ellipse()?

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

Start Coding with AI →

ellipse()

🧠 See The Whole Picture

📖 Visual Learner's Guide

The Big Picture:

Visual Analogy:

The Numbers Decoded:

Connection Map:

Common Gotcha:

🔄 How It Works

📝 Syntax

📖 How to Read This

🔀 Different Ways to Call It

↩️ What It Returns

🎛️ Mode-Dependent Behavior

📥 What Goes In

📤 What Happens

Parameters

💡 How Parameters Work Together

💻 Working Example

⚙️ How It Works

🎓 Learn Prompt Patterns

🎭 Persona Pattern

📋 Recipe Pattern

📝 Template Pattern

🔄 Refinement Pattern

🎯 Direct Prompts - Name the Function

🔮 Indirect Prompts - Describe What You Want

🖼️ See It In Real Sketches

AI Wave Function Simulator

AI Gravity Painter

🔀 Fun Function Combinations

⚠️ Common Mistakes & Fixes

🗺️ Learning Path

💡 Project Ideas

🤖 Ask xelsed-alpha6 to Explain

💡 Prompt AI to Write Code Using ellipse()

🔧 Ask AI to Help Debug

✨ Creative Combinations with AI

Ready to Try ellipse()?

`ellipse()`