SKIP - xelsed.ai

This sketch creates a simple animated circle that orbits around the center of the canvas in a circular path. The circle moves continuously using trigonometric functions (cosine and sine) to calculate its position, creating a smooth circular motion. The sketch also responds to window resizing to keep the animation centered.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopTrigonometric functionsCanvas coordinate systemWindow resizingframeCountCircular motion

🔄 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 --> draw[draw loop] draw --> orbitcalculation[orbit-calculation] orbitcalculation --> draw draw --> framecount[frameCount Increment] framecount --> draw draw --> cos[cos() Calculation] cos --> orbitcalculation draw --> sin[sin() Calculation] sin --> orbitcalculation setup --> windowresized[windowresized] windowresized --> resizecanvas[resizeCanvas()] resizecanvas --> windowresized click setup href "#fn-setup" click draw href "#fn-draw" click windowresized href "#fn-windowresized" click orbitcalculation href "#sub-orbit-calculation"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's the perfect place to initialize your canvas and set up any starting values. Using windowWidth and windowHeight instead of fixed numbers makes your sketch adapt to any screen size.

function setup() {
  createCanvas(windowWidth, windowHeight);
}

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window by using windowWidth and windowHeight variables. This makes the sketch responsive to different screen sizes.

`draw()`

draw() runs 60 times per second by default, creating smooth animation. frameCount is a built-in variable that increments each frame, allowing you to create time-based animations. Using cos() and sin() together is a classic technique for circular motion - they're periodic functions that naturally loop, perfect for orbiting objects.

function draw() {
  background(220);
  fill(255, 0, 100);
  let x = width / 2 + width / 4 * cos(frameCount * 0.05);
  let y = height / 2 + height / 4 * sin(frameCount * 0.05);
  circle(x, y, 50);
}

🔧 Subcomponents:

calculation Circular Orbit Position

let x = width / 2 + width / 4 * cos(frameCount * 0.05);
let y = height / 2 + height / 4 * sin(frameCount * 0.05);

Calculates the x and y coordinates for a circle orbiting around the canvas center using trigonometric functions

Line by Line:

background(220): Fills the entire canvas with light gray (220 on the 0-255 scale) each frame. This clears the previous frame and prevents motion trails.
fill(255, 0, 100): Sets the fill color to a bright pink/magenta (full red, no green, medium blue). All shapes drawn after this will use this color until fill() is called again.
let x = width / 2 + width / 4 * cos(frameCount * 0.05): Calculates the x position: starts at the center (width / 2), then adds a horizontal offset that changes based on the cosine of frameCount. The 0.05 slows down the animation, and width / 4 controls the orbit radius.
let y = height / 2 + height / 4 * sin(frameCount * 0.05): Calculates the y position: starts at the center (height / 2), then adds a vertical offset using sine. Sine and cosine together create circular motion - one handles horizontal movement, the other vertical.
circle(x, y, 50): Draws a circle with diameter 50 at the calculated position (x, y). The circle will be filled with the pink color set earlier.

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By calling resizeCanvas() inside it, you ensure your sketch adapts gracefully to different screen sizes. This is essential for creating responsive web-based art.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Line by Line:

resizeCanvas(windowWidth, windowHeight): Automatically resizes the canvas to match the new window dimensions whenever the user resizes their browser window. This keeps the sketch responsive and prevents parts of the animation from being cut off.

📦 Key Variables

x number

Stores the horizontal position of the orbiting circle. It's calculated each frame based on the canvas width and trigonometric functions to create smooth circular motion.

let x = width / 2 + width / 4 * cos(frameCount * 0.05);

y number

Stores the vertical position of the orbiting circle. It's calculated each frame based on the canvas height and trigonometric functions to create smooth circular motion.

let y = height / 2 + height / 4 * sin(frameCount * 0.05);

frameCount number

Built-in p5.js variable that automatically increments by 1 each frame. Used here to create time-based animation - as frameCount increases, the angle changes, moving the circle around its orbit.

frameCount * 0.05 creates the animation speed

🧪 Try This!

Experiment with the code by making these changes:

Change the 0.05 multiplier to 0.1 or 0.02 to see how it affects animation speed. Larger numbers make the circle orbit faster, smaller numbers make it slower.
Modify width / 4 and height / 4 to different fractions like width / 2 or width / 8 to change the size of the orbit. This controls how far from the center the circle travels.
Change the circle diameter from 50 to 100 or 20 to see different sizes. Try: circle(x, y, 100);
Modify the fill color from fill(255, 0, 100) to fill(0, 255, 100) to make the circle cyan instead of pink, or try fill(255, 255, 0) for yellow.
Add multiple circles by duplicating the circle() line with different offsets, like circle(x + 50, y, 30), to create a more complex orbital pattern.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

FEATURE sketch description vs actual code

The sketch description mentions 'Microphone Visualizer' and 'p5.AudioIn', but the actual code doesn't use any audio input. The sketch only shows a basic circular animation.

💡 Either implement the audio visualizer using p5.sound library (loadSound, FFT, getEnergy) or update the description to match the actual code functionality.

STYLE draw() function

The variables x and y are declared with 'let' inside draw(), making them local variables that are recreated every frame. While this works, it's inefficient for simple calculations.

💡 Consider declaring x and y as global variables if they'll be used across multiple functions, or keep them local if they're only used in draw() - just be consistent with your coding style.

FEATURE entire sketch

The animation is static - the circle always orbits in the same way. There's no interactivity or visual feedback.

💡 Add mousePressed() or keyPressed() functions to allow users to interact with the animation, or use p5.AudioIn to make it respond to sound as originally described.

PERFORMANCE draw() function

The background is redrawn every frame with background(220), which is necessary for animation but could be optimized if you wanted motion trails.

💡 If you want motion trails, use background(220, 50) instead to add transparency, or remove background() entirely to see the complete orbit path drawn over time.

Preview

Code flow diagram showing the structure of SKIP - xelsed.ai - Code flow showing setup, draw, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview