Sketch 2025-12-24 00:08

This sketch creates an animated orbital system with a morphing planet at the center and a smaller moon orbiting around it. Both shapes continuously transform between a triangle and a dodecagon while rotating, with dynamic rainbow colors that shift throughout the animation.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopPolygon generationTrigonometric functionsColor animation with HSBCoordinate transformationsPush/pop state managementOrbital mechanicsMorphing shapesWindow responsiveness

🔄 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[Canvas Setup] setup --> color-mode-setup[HSB Color Mode] setup --> planet-position-init[Planet Center Position] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-creation href "#sub-canvas-creation" click color-mode-setup href "#sub-color-mode-setup" click planet-position-init href "#sub-planet-position-init" draw --> background-clear[Background Clearing] draw --> planet-morphing-calc[Planet Morphing Animation] draw --> moon-morphing-calc[Moon Morphing Animation (Reversed)] draw --> color-animation[Dynamic Color Updates] draw --> planet-drawing[Planet Polygon Vertex Loop] draw --> moon-orbit-calc[Moon Orbital Position] draw --> moon-drawing[Moon Polygon Vertex Loop] click draw href "#fn-draw" click background-clear href "#sub-background-clear" click planet-morphing-calc href "#sub-planet-morphing-calc" click moon-morphing-calc href "#sub-moon-morphing-calc" click color-animation href "#sub-color-animation" click planet-drawing href "#sub-planet-drawing" click moon-orbit-calc href "#sub-moon-orbit-calc" click moon-drawing href "#sub-moon-drawing" windowresized --> canvas-resize[Canvas Resize] windowresized --> planet-reposition[Planet Recentering] click windowresized href "#fn-windowresized" click canvas-resize href "#sub-canvas-resize" click planet-reposition href "#sub-planet-reposition"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize your canvas, set up colors, and establish starting values for variables. Using windowWidth and windowHeight makes your sketch responsive to window resizing.

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  planetX = width / 2;
  planetY = height / 2;
}

🔧 Subcomponents:

function-call Canvas Setup createCanvas(windowWidth, windowHeight)

Creates a canvas that fills the entire browser window, using dynamic window dimensions

function-call HSB Color Mode colorMode(HSB, 360, 100, 100)

Switches from RGB to HSB color mode for more intuitive color animation, with hue 0-360, saturation 0-100, brightness 0-100

calculation Planet Center Position planetX = width / 2; planetY = height / 2

Places the planet at the center of the canvas by calculating the midpoint

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a drawing canvas that matches the full size of the browser window. windowWidth and windowHeight are built-in p5.js variables that automatically get the current window dimensions.
colorMode(HSB, 360, 100, 100): Switches the color system from RGB to HSB (Hue, Saturation, Brightness). This makes it easier to create color animations because hue values cycle smoothly from 0-360 like a color wheel.
noStroke(): Removes the outline/border from all shapes. All polygons will be filled with solid colors only, no visible edges.
planetX = width / 2: Sets the planet's horizontal position to the center of the canvas by dividing the canvas width by 2.
planetY = height / 2: Sets the planet's vertical position to the center of the canvas by dividing the canvas height by 2.

`draw()`

draw() is the animation engine - it runs 60 times per second. Each frame, we clear the canvas, update all animation values based on frameCount, and redraw everything. The key to smooth morphing is using trigonometric functions (sin, cos) to create continuous, smooth transitions between values.

function draw() {
  background(0, 0, 10);
  let sinVal = abs(sin(frameCount * 0.02));
  currentPlanetSides = minSidesPlanet + sinVal * (maxSidesPlanet - minSidesPlanet);
  currentPlanetSides = round(currentPlanetSides);
  currentMoonSides = minSidesMoon + (1 - sinVal) * (maxSidesMoon - minSidesMoon);
  currentMoonSides = round(currentMoonSides);
  hue = (hue + 0.5) % 360;
  saturation = 70 + abs(sin(frameCount * 0.015)) * 30;
  brightness = 80 + abs(cos(frameCount * 0.01)) * 20;
  fill(hue, saturation, brightness);
  push();
  translate(planetX, planetY);
  rotate(frameCount * 0.01);
  beginShape();
  for (let i = 0; i < currentPlanetSides; i++) {
    let angle = map(i, 0, currentPlanetSides, 0, TWO_PI);
    let x = (planetSize / 2) * cos(angle);
    let y = (planetSize / 2) * sin(angle);
    vertex(x, y);
  }
  endShape(CLOSE);
  pop();
  let moonAngle = -frameCount * 0.03;
  let moonX = planetX + orbitalRadius * cos(moonAngle);
  let moonY = planetY + orbitalRadius * sin(moonAngle);
  fill((hue + 180) % 360, saturation * 0.8, brightness * 1.2);
  push();
  translate(moonX, moonY);
  rotate(frameCount * 0.05);
  beginShape();
  for (let i = 0; i < currentMoonSides; i++) {
    let angle = map(i, 0, currentMoonSides, 0, TWO_PI);
    let x = (moonSize / 2) * cos(angle);
    let y = (moonSize / 2) * sin(angle);
    vertex(x, y);
  }
  endShape(CLOSE);
  pop();
}

🔧 Subcomponents:

function-call Background Clearing background(0, 0, 10)

Clears the canvas each frame with a very dark gray color, preventing trails and creating smooth animation

calculation Planet Morphing Animation

let sinVal = abs(sin(frameCount * 0.02)); currentPlanetSides = minSidesPlanet + sinVal * (maxSidesPlanet - minSidesPlanet); currentPlanetSides = round(currentPlanetSides)

Calculates how many sides the planet should have this frame, morphing smoothly between 3 and 12 sides

calculation Moon Morphing Animation (Reversed)

currentMoonSides = minSidesMoon + (1 - sinVal) * (maxSidesMoon - minSidesMoon); currentMoonSides = round(currentMoonSides)

Calculates the moon's sides in reverse of the planet - when planet has few sides, moon has many

calculation Dynamic Color Updates

hue = (hue + 0.5) % 360; saturation = 70 + abs(sin(frameCount * 0.015)) * 30; brightness = 80 + abs(cos(frameCount * 0.01)) * 20

Animates the HSB color values to create rainbow effects and pulsing brightness

for-loop Planet Polygon Vertex Loop for (let i = 0; i < currentPlanetSides; i++) { ... vertex(x, y); }

Loops through each vertex position and draws the planet polygon based on the current number of sides

calculation Moon Orbital Position

let moonAngle = -frameCount * 0.03; let moonX = planetX + orbitalRadius * cos(moonAngle); let moonY = planetY + orbitalRadius * sin(moonAngle)

Calculates the moon's position as it orbits around the planet using trigonometry

for-loop Moon Polygon Vertex Loop for (let i = 0; i < currentMoonSides; i++) { ... vertex(x, y); }

Loops through each vertex position and draws the moon polygon based on the current number of sides

Line by Line:

background(0, 0, 10): Fills the entire canvas with a very dark gray (HSB: hue=0, saturation=0, brightness=10). This clears previous frames and creates the animation effect.
let sinVal = abs(sin(frameCount * 0.02)): Creates a smooth oscillating value between 0 and 1. sin() produces values from -1 to 1, abs() converts it to 0 to 1, and frameCount * 0.02 controls the speed.
currentPlanetSides = minSidesPlanet + sinVal * (maxSidesPlanet - minSidesPlanet): Calculates the planet's current number of sides by interpolating between 3 and 12 based on sinVal. When sinVal is 0, sides = 3; when sinVal is 1, sides = 12.
currentPlanetSides = round(currentPlanetSides): Rounds the calculated sides to a whole number (3, 4, 5, etc.) since you can't have fractional sides.
currentMoonSides = minSidesMoon + (1 - sinVal) * (maxSidesMoon - minSidesMoon): Reverses the morphing for the moon: when sinVal is 0 (planet=3 sides), moon gets 12 sides; when sinVal is 1 (planet=12 sides), moon gets 3 sides.
hue = (hue + 0.5) % 360: Increments hue by 0.5 each frame, creating a rainbow color cycle. The % 360 wraps it back to 0 after reaching 360, making it loop continuously.
saturation = 70 + abs(sin(frameCount * 0.015)) * 30: Makes saturation oscillate between 70 and 100, creating a pulsing color intensity effect.
brightness = 80 + abs(cos(frameCount * 0.01)) * 20: Makes brightness oscillate between 80 and 100, creating a subtle pulsing light effect that's slightly out of sync with saturation.
fill(hue, saturation, brightness): Sets the fill color for the planet using the dynamically calculated HSB values.
push(): Saves the current drawing state (position, rotation, color, scale, etc.) so transformations don't affect other shapes.
translate(planetX, planetY): Moves the origin (0,0) point to the planet's center, so all subsequent drawing is relative to this position.
rotate(frameCount * 0.01): Rotates the planet around its center. frameCount * 0.01 controls the rotation speed.
beginShape(): Starts defining a custom polygon shape. All vertex() calls after this are collected to form the shape.
let angle = map(i, 0, currentPlanetSides, 0, TWO_PI): Converts the loop counter i (0 to currentPlanetSides-1) into an angle in radians (0 to 2π). This spaces vertices evenly around a circle.
let x = (planetSize / 2) * cos(angle): Calculates the x-coordinate of a vertex using cosine. The radius is planetSize/2, so the polygon fits within the planetSize diameter.
let y = (planetSize / 2) * sin(angle): Calculates the y-coordinate of a vertex using sine. Combined with x, this places a point on a circle at the given angle.
vertex(x, y): Adds this calculated point as a corner of the polygon.
endShape(CLOSE): Finishes the polygon definition and closes it by connecting the last vertex back to the first.
pop(): Restores the drawing state saved by push(), undoing the translate and rotate transformations.
let moonAngle = -frameCount * 0.03: Calculates the moon's orbital angle. The negative sign makes it orbit counterclockwise. frameCount * 0.03 controls the orbital speed.
let moonX = planetX + orbitalRadius * cos(moonAngle): Calculates the moon's x-position by starting at the planet's center and moving outward by orbitalRadius in the direction of moonAngle.
let moonY = planetY + orbitalRadius * sin(moonAngle): Calculates the moon's y-position using the same orbital mechanics as moonX.
fill((hue + 180) % 360, saturation * 0.8, brightness * 1.2): Sets the moon's color to be complementary to the planet's color. Adding 180 to hue shifts it to the opposite side of the color wheel. Adjusting saturation and brightness creates visual contrast.
rotate(frameCount * 0.05): Rotates the moon around its own center. The speed (0.05) is faster than the planet's rotation (0.01).

`windowResized()`

windowResized() is a special p5.js function that automatically triggers whenever the browser window is resized. Without it, the canvas would stay its original size. By updating planetX and planetY here, we ensure the planet stays centered even when the window changes size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  planetX = width / 2;
  planetY = height / 2;
}

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight)

Adjusts the canvas dimensions to match the new browser window size

calculation Planet Recentering planetX = width / 2; planetY = height / 2

Recalculates the planet's center position based on the new canvas dimensions

Line by Line:

resizeCanvas(windowWidth, windowHeight): Automatically called by p5.js when the browser window is resized. This adjusts the canvas to fill the new window dimensions.
planetX = width / 2: Recalculates the planet's horizontal center position based on the new canvas width.
planetY = height / 2: Recalculates the planet's vertical center position based on the new canvas height.

📦 Key Variables

planetX number

Stores the horizontal position of the planet's center on the canvas. Updated in setup() and windowResized().

let planetX = 400;

planetY number

Stores the vertical position of the planet's center on the canvas. Updated in setup() and windowResized().

let planetY = 300;

planetSize number

The diameter/size of the main planet polygon. Used to calculate vertex positions and orbital radius.

let planetSize = 200;

moonSize number

The diameter/size of the orbiting moon polygon. Controls how large the moon appears.

let moonSize = 40;

orbitalRadius number

The distance from the planet's center where the moon orbits. Set to 75% of the planet's radius.

let orbitalRadius = planetSize * 0.75;

minSidesPlanet number

The minimum number of sides the planet polygon can have (triangle). Used as the lower bound for morphing.

let minSidesPlanet = 3;

maxSidesPlanet number

The maximum number of sides the planet polygon can have (dodecagon). Used as the upper bound for morphing.

let maxSidesPlanet = 12;

currentPlanetSides number

The actual number of sides the planet has in the current frame. Updates every frame based on the sine wave animation.

let currentPlanetSides = 6;

minSidesMoon number

The minimum number of sides the moon polygon can have. Used as the lower bound for the reversed morphing.

let minSidesMoon = 3;

maxSidesMoon number

The maximum number of sides the moon polygon can have. Used as the upper bound for the reversed morphing.

let maxSidesMoon = 12;

currentMoonSides number

The actual number of sides the moon has in the current frame. Updates every frame in reverse of the planet.

let currentMoonSides = 9;

hue number

The current hue value (0-360) for the planet's color. Increments each frame to create a rainbow cycling effect.

let hue = 0;

saturation number

The current saturation value (0-100) for the planet's color. Oscillates to create pulsing color intensity.

let saturation = 80;

brightness number

The current brightness value (0-100) for the planet's color. Oscillates slightly out of phase with saturation.

let brightness = 90;

🧪 Try This!

Experiment with the code by making these changes:

Change planetSize from 200 to 300 or 100 to make the planet larger or smaller. This will also affect the orbital radius since it's calculated as planetSize * 0.75.
Modify the hue increment from 0.5 to 2.0 on the line 'hue = (hue + 0.5) % 360' to make the colors cycle through the rainbow much faster.
Change the planet rotation speed from 'frameCount * 0.01' to 'frameCount * 0.05' to make it spin faster, or try 'frameCount * 0.005' for slower rotation.
Modify the moon's orbital speed from '-frameCount * 0.03' to '-frameCount * 0.06' to make it orbit twice as fast around the planet.
Change the moon's color offset from 180 to 90 or 270 in the line 'fill((hue + 180) % 360, ...)' to use different complementary colors.
Adjust minSidesPlanet and maxSidesPlanet to 4 and 8 respectively to morph between a square and an octagon instead of triangle to dodecagon.
Change the morphing speed from 'frameCount * 0.02' to 'frameCount * 0.01' to make the shape transitions slower and more gradual.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() - polygon vertex loops

The polygon vertices are recalculated every frame even though the calculation is the same for a given number of sides. This is inefficient.

💡 Cache the vertex calculations or use a lookup table when the number of sides hasn't changed from the previous frame. Only recalculate when currentPlanetSides or currentMoonSides actually changes.

STYLE Global variables

Many related variables (minSidesPlanet, maxSidesPlanet, currentPlanetSides) could be organized better for readability.

💡 Consider grouping related variables into objects: let planet = {minSides: 3, maxSides: 12, currentSides: 3, size: 200, x: 0, y: 0} and let moon = {...} to make the code more organized and easier to modify.

FEATURE draw() - moon color calculation

The moon's color is always 180 degrees opposite the planet's hue, which is predictable and limits color variety.

💡 Add a variable like moonHueOffset that can be animated independently or set to different values. For example: 'let moonHueOffset = 180 + sin(frameCount * 0.01) * 60' would make the offset oscillate between 120 and 240 degrees.

BUG windowResized()

If the sketch is running in a fixed-size container (not full window), windowWidth and windowHeight won't reflect the actual container size, causing the planet to be off-center.

💡 For better compatibility, consider using a fixed canvas size or detecting the parent container size instead of relying on windowWidth/windowHeight. Alternatively, add comments explaining that this sketch requires full-window display.

Preview

Code flow diagram showing the structure of Sketch 2025-12-24 00:08 - Code flow showing setup, draw, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview