Sketch 2026-03-10 06:53

This sketch creates a light blue circle that follows your mouse cursor across the canvas in real time. The circle tracks the mouse position every frame, creating a simple but satisfying interactive effect. The canvas automatically resizes when the window changes size.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

Make the circle giant — Change the circle's size parameters from 50, 50 to much larger numbers—watch it grow instantly
Turn the circle red — Change the RGB color values in fill() to make the circle red instead of light blue
Create a motion trail — Remove the background clearing to let circles accumulate on screen, creating a beautiful ghosting effect as you move the mouse
Make the circle outline-only — Add stroke() and noFill() to draw just the circle's border instead of a solid fill

Prefer the full editor? Open it there →

📖 About This Sketch

This sketch creates a light blue circle that smoothly tracks your mouse cursor wherever it moves on the canvas. It is one of the best first interactive sketches to study because it combines three foundational p5.js ideas: the continuous draw loop that updates sixty times per second, built-in mouse position variables (mouseX and mouseY), and responsive canvas sizing using windowWidth and windowHeight. Move your mouse and watch the circle follow—that instant feedback teaches you how p5.js connects user input to animation.

The code is organized into three functions: setup() prepares the canvas and sets the circle's color once, draw() clears the background and redraws the circle at the mouse position every frame, and windowResized() keeps the canvas fullscreen whenever the window changes. By reading this you will understand how to make shapes respond to the mouse, how the draw loop creates interactivity, and how p5.js lets you build sketches that adapt to any screen size.

⚙️ How It Works

When the sketch loads, setup() creates a fullscreen canvas that matches the window size and sets the circle's fill color to light blue
Every frame, draw() first clears the canvas with background(220) so the previous circle disappears
Then draw() uses ellipse(mouseX, mouseY, 50, 50) to draw a new circle at the current mouse coordinates—mouseX and mouseY are built-in variables that p5.js updates automatically
As your mouse moves, the circle updates its position 60 times per second, creating the illusion of the circle following your cursor
If you resize the window, windowResized() automatically calls resizeCanvas() to stretch the canvas to fit the new size

🎓 Concepts You'll Learn

Mouse interaction (mouseX, mouseY)The draw loop and continuous updatesShape positioning and parametersColor with RGB valuesResponsive canvas sizingBackground clearing for animation

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. Use it to initialize your canvas, set colors, and prepare any variables you need. Everything in setup() happens before the draw loop begins.

🔬 These lines set up the circle's appearance. What happens if you add stroke(0); before noStroke() to give the circle a black border? Or what if you remove the noStroke() line entirely?

  fill(100, 150, 255);
  // Remove the border stroke for a cleaner look
  noStroke();

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas
  
  // Set the fill color for the circle (e.g., light blue)
  fill(100, 150, 255);
  // Remove the border stroke for a cleaner look
  noStroke();
}

Line-by-line explanation (3 lines)

🔧 Subcomponents:

calculation Responsive Canvas Setup createCanvas(windowWidth, windowHeight);

Creates a fullscreen canvas that fills the entire browser window

function-call Circle Color Definition fill(100, 150, 255);

Sets the fill color to light blue using RGB values (red=100, green=150, blue=255)

createCanvas(windowWidth, windowHeight);: Creates a canvas as wide and tall as the browser window. windowWidth and windowHeight are built-in p5.js variables that contain the current window dimensions
fill(100, 150, 255);: Sets the fill color for all shapes drawn after this line. The three numbers are RGB values: red (0-255), green (0-255), blue (0-255). This creates light blue
noStroke();: Removes the border (stroke) around shapes. Without this, the circle would have a black outline

`draw()`

draw() is the heartbeat of p5.js—it runs 60 times per second (by default). Every frame, it clears the canvas and redraws everything. This constant update creates animation and makes the sketch respond to mouse movement instantly.

🔬 What happens if you comment out or delete the background(220) line? The circle will create a trail instead of disappearing. Try it—do you like the trail effect or the clean tracking better?

  background(220);
  
  // Draw an ellipse at the current mouse position (mouseX, mouseY)
  // The numbers 50, 50 define its width and height (making it a circle)
  ellipse(mouseX, mouseY, 50, 50);

🔬 This draws one circle at your mouse. What if you draw a second circle offset slightly? Try copying this line and changing mouseX to mouseX + 30 to create a shadow effect behind the main circle

  ellipse(mouseX, mouseY, 50, 50);

function draw() {
  // Draw a background each frame to clear the previous circle
  background(220);
  
  // Draw an ellipse at the current mouse position (mouseX, mouseY)
  // The numbers 50, 50 define its width and height (making it a circle)
  ellipse(mouseX, mouseY, 50, 50);
}

Line-by-line explanation (2 lines)

🔧 Subcomponents:

function-call Frame Clearing background(220);

Clears the entire canvas with a light gray color every frame, erasing the previous circle

function-call Circle Drawing at Mouse ellipse(mouseX, mouseY, 50, 50);

Draws a circle (ellipse with equal width and height) at the mouse cursor position

background(220);: Fills the entire canvas with a light gray color (brightness value 220 out of 255). This erases everything drawn in the previous frame, preventing trails
ellipse(mouseX, mouseY, 50, 50);: Draws an ellipse (circle) at the mouse position. mouseX is the horizontal position of your cursor, mouseY is the vertical position, and the 50, 50 make it a 50-pixel diameter circle

`windowResized()`

windowResized() is a special p5.js function that p5.js calls automatically whenever the browser window is resized. By calling resizeCanvas() inside it, you make your sketch responsive and fullscreen-friendly. Leave this function as-is for this sketch.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}

Line-by-line explanation (1 lines)

🔧 Subcomponents:

function-call Canvas Responsive Resize resizeCanvas(windowWidth, windowHeight);

Updates the canvas size to match the new window dimensions whenever the browser is resized

resizeCanvas(windowWidth, windowHeight);: Resizes the p5.js canvas to match the current window width and height. This makes the sketch responsive—it adapts when you resize your browser window

📦 Key Variables

mouseX number

Built-in p5.js variable that stores the horizontal position of the mouse cursor on the canvas (0 at left, increases to the right)

ellipse(mouseX, mouseY, 50, 50);

mouseY number

Built-in p5.js variable that stores the vertical position of the mouse cursor on the canvas (0 at top, increases downward)

ellipse(mouseX, mouseY, 50, 50);

windowWidth number

Built-in p5.js variable that stores the width of the browser window in pixels, used to make the canvas responsive

createCanvas(windowWidth, windowHeight);

windowHeight number

Built-in p5.js variable that stores the height of the browser window in pixels, used to make the canvas responsive

createCanvas(windowWidth, windowHeight);

🔧 Potential Improvements (4)

Here are some ways this code could be enhanced:

STYLE setup() color definition

Magic numbers (100, 150, 255) are hard to understand at a glance—comments help but named constants are clearer

💡 Consider extracting the color to a named constant: const circleColor = [100, 150, 255]; then use fill(...circleColor); in setup()

PERFORMANCE draw() background clearing

Drawing a full-screen background every frame is computationally expensive for very large displays

💡 For most uses this is fine, but on very large screens you could optimize by using clear() instead of background() if you don't need a colored background

FEATURE draw()

The circle is always opaque and solid—interactivity could be enhanced

💡 Add transparency or size-change based on mouse movement: try ellipse(mouseX, mouseY, 50 + mouseY/10, 50 + mouseY/10); to make the circle grow/shrink as you move vertically

STYLE windowResized()

No comment explaining why this function matters for responsive design

💡 Add a comment explaining that without this function, the sketch would not adapt when the window resizes

🔄 Code Flow

Code flow showing setup, draw, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> canvas-creation[Responsive Canvas Setup] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-creation href "#sub-canvas-creation" click draw href "#fn-draw" draw --> background-clear[Frame Clearing] draw --> circle-color[Circle Color Definition] draw --> circle-draw[Circle Drawing at Mouse] click background-clear href "#sub-background-clear" click circle-color href "#sub-circle-color" click circle-draw href "#sub-circle-draw" background-clear --> draw circle-color --> draw circle-draw --> draw windowresized[windowResized] --> canvas-resize[Canvas Responsive Resize] click windowresized href "#fn-windowresized" click canvas-resize href "#sub-canvas-resize"

❓ Frequently Asked Questions

What visual effect does the p5.js sketch create?

The sketch creates a light blue circle that follows the mouse cursor across the canvas, continuously redrawing itself with each frame.

How can users interact with the sketch?

Users can interact with the sketch by moving their mouse around the canvas, which causes the circle to follow their cursor's position.

What creative coding concepts are demonstrated in this p5.js sketch?

This sketch demonstrates responsive canvas resizing, real-time drawing based on mouse movement, and the use of color and shapes in creative coding.

Preview

Code flow diagram showing the structure of Sketch 2026-03-10 06:53 - Code flow showing setup, draw, windowresized — Code Flow Diagram

🧪 Try This!

📖 About This Sketch

⚙️ How It Works

🎓 Concepts You'll Learn

📝 Code Breakdown

🔧 Subcomponents:

🔧 Subcomponents:

🔧 Subcomponents:

📦 Key Variables

🔧 Potential Improvements (4)

🔄 Code Flow

❓ Frequently Asked Questions

Explore More

Sketch 2026-03-04 21:03

Sketch 2026-03-16 15:35

P5.js sketch inspired by: "Vinyl scratch"

P5.js sketch inspired by: "Xylophone"

p5js.ai

Gallery

User Guide

Preview