Spinning Rainbow Color Wheel - xelsed.ai

This sketch creates a mesmerizing rotating color wheel with six vibrant wedges (red, orange, yellow, green, blue, purple) that continuously spin against a black background. The wheel is drawn using p5.js arc shapes in PIE mode, with the rotation angle incrementing each frame to create smooth, hypnotic animation.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopCanvas transforms (translate/rotate)Arc shapes and PIE modeColor arraysLoops and iterationResponsive canvas sizingAngle modes (RADIANS)

🔄 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 --> canvas-setup[Canvas Centering and Rotation] draw --> wheel-sizing[Responsive Wheel Diameter] draw --> color-array[Color Array Definition] draw --> wedge-calculation[Wedge Angle Calculation] draw --> rotation-increment[Rotation Animation] draw --> wedge-loop[Wedge Drawing Loop] wedge-loop --> wedge-loop click setup href "#fn-setup" click draw href "#fn-draw" click canvas-setup href "#sub-canvas-setup" click wheel-sizing href "#sub-wheel-sizing" click color-array href "#sub-color-array" click wedge-calculation href "#sub-wedge-calculation" click rotation-increment href "#sub-rotation-increment" click wedge-loop href "#sub-wedge-loop"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's the perfect place to initialize your canvas size, set drawing modes, and configure global settings that won't change during animation.

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(RADIANS); // default, but set explicitly for clarity
  noStroke();
}

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window, using windowWidth and windowHeight to make it responsive
angleMode(RADIANS): Sets angle measurements to use radians (0 to TWO_PI) instead of degrees. This is the p5.js default, but explicitly setting it makes the code clearer
noStroke(): Removes the outline/border from all shapes drawn. This prevents black lines from appearing between the colored wedges

`draw()`

draw() runs continuously at 60 frames per second (by default). Each frame, it clears the canvas, applies transformations (translate and rotate), and redraws all six wedges at their new rotated positions. The translate() and rotate() functions work together: translate moves the origin to the center, and rotate spins around that center point. The loop efficiently draws all wedges using the same arc() function with different starting and ending angles.

function draw() {
  background(0); // black background

  // Center of canvas
  translate(width / 2, height / 2);

  // Slow continuous rotation
  rotate(rotationAngle);

  // Wheel size: 60% of the smaller canvas dimension
  const wheelDiameter = min(width, height) * 0.6;

  // 6 wedges: red, orange, yellow, green, blue, purple
  const colors = [
    color(255, 0, 0),      // red
    color(255, 127, 0),    // orange
    color(255, 255, 0),    // yellow
    color(0, 255, 0),      // green
    color(0, 0, 255),      // blue
    color(153, 0, 255)     // purple
  ];

  const wedgeCount = colors.length;
  const step = TWO_PI / wedgeCount;

  for (let i = 0; i < wedgeCount; i++) {
    fill(colors[i]);
    // Draw each wedge as a pie slice from center
    arc(
      0, 0,                  // centered at origin (already translated)
      wheelDiameter, wheelDiameter,
      i * step, (i + 1) * step,
      PIE                    // use PIE mode for wedge
    );
  }

  // Increment rotation angle for next frame
  rotationAngle += 0.01; // smaller = slower
}

🔧 Subcomponents:

calculation Canvas Centering and Rotation

translate(width / 2, height / 2);
  rotate(rotationAngle);

Moves the origin to the center of the canvas and rotates the entire coordinate system by the current rotation angle, making the wheel spin around its center

calculation Responsive Wheel Diameter const wheelDiameter = min(width, height) * 0.6;

Calculates the wheel diameter as 60% of the smaller canvas dimension, ensuring the wheel scales properly on different screen sizes

calculation Color Array Definition

const colors = [
    color(255, 0, 0),
    color(255, 127, 0),
    color(255, 255, 0),
    color(0, 255, 0),
    color(0, 0, 255),
    color(153, 0, 255)
  ];

Stores the six rainbow colors as an array, making it easy to loop through them and assign each to a wedge

calculation Wedge Angle Calculation const step = TWO_PI / wedgeCount;

Divides the full circle (TWO_PI radians = 360 degrees) by the number of wedges to get the angle for each wedge

for-loop Wedge Drawing Loop

for (let i = 0; i < wedgeCount; i++) {
    fill(colors[i]);
    arc(0, 0, wheelDiameter, wheelDiameter, i * step, (i + 1) * step, PIE);
  }

Loops through each color and draws a wedge-shaped arc at the correct angle, creating the six-segment color wheel

calculation Rotation Animation rotationAngle += 0.01;

Increases the rotation angle by a small amount each frame, creating the continuous spinning effect

Line by Line:

background(0): Clears the entire canvas with black color (RGB: 0,0,0) at the start of each frame, erasing the previous frame's drawing
translate(width / 2, height / 2): Moves the origin (0,0) point from the top-left corner to the center of the canvas, so all subsequent drawing is relative to the center
rotate(rotationAngle): Rotates the entire coordinate system by the current rotation angle in radians, making everything drawn after this line appear rotated
const wheelDiameter = min(width, height) * 0.6: Calculates the wheel size as 60% of whichever dimension is smaller (width or height), ensuring the wheel fits on any screen size
const colors = [color(255, 0, 0), ...]: Creates an array containing six color objects: red, orange, yellow, green, blue, and purple in RGB format
const wedgeCount = colors.length: Stores the number of wedges (6) by getting the length of the colors array
const step = TWO_PI / wedgeCount: Calculates the angle for each wedge by dividing a full circle (TWO_PI ≈ 6.28 radians) by 6, resulting in approximately 1.047 radians per wedge
for (let i = 0; i < wedgeCount; i++): Loops 6 times (once for each color), with i counting from 0 to 5
fill(colors[i]): Sets the fill color for the next shape to the current color in the array (colors[0] on first iteration, colors[1] on second, etc.)
arc(0, 0, wheelDiameter, wheelDiameter, i * step, (i + 1) * step, PIE): Draws a pie-slice arc at the center (0, 0) with the calculated diameter, starting at angle i*step and ending at (i+1)*step, creating one wedge of the wheel
rotationAngle += 0.01: Increases the rotation angle by 0.01 radians each frame, causing the wheel to spin continuously (smaller values = slower rotation)

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By calling resizeCanvas() inside it, we ensure the sketch always fills the entire window, no matter how the user resizes their browser. This is essential for responsive, full-screen sketches.

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

Line by Line:

resizeCanvas(windowWidth, windowHeight): Automatically resizes the canvas to match the new window dimensions whenever the browser window is resized, keeping the sketch responsive

📦 Key Variables

rotationAngle number

Stores the current rotation angle in radians. It starts at 0 and increases by 0.01 each frame, controlling how much the entire wheel is rotated

let rotationAngle = 0;

wheelDiameter number

Calculated inside draw(), this stores the diameter of the color wheel as 60% of the smaller canvas dimension, ensuring responsive sizing

const wheelDiameter = min(width, height) * 0.6;

colors array

An array of six color objects representing the rainbow spectrum (red, orange, yellow, green, blue, purple). Each color is created using the color() function with RGB values

const colors = [color(255, 0, 0), color(255, 127, 0), ...];

wedgeCount number

Stores the number of wedges in the wheel (6), calculated by getting the length of the colors array. Used to determine how many times to loop

const wedgeCount = colors.length;

step number

Stores the angle in radians for each wedge, calculated by dividing a full circle (TWO_PI) by the number of wedges. Used to position each arc correctly

const step = TWO_PI / wedgeCount;

i number

Loop counter that iterates from 0 to 5, used to access each color in the colors array and calculate the start/end angles for each wedge

for (let i = 0; i < wedgeCount; i++)

🧪 Try This!

Experiment with the code by making these changes:

Change rotationAngle += 0.01 to rotationAngle += 0.05 (line in draw function) to make the wheel spin faster. Try negative values like -0.01 to make it spin backwards
Modify the colors array to create different color combinations. For example, change color(255, 0, 0) to color(255, 0, 255) to replace red with magenta, or add more colors to the array and increase wedgeCount
Change const wheelDiameter = min(width, height) * 0.6 to min(width, height) * 0.3 or * 0.9 to make the wheel smaller or larger
Add a stroke to the wedges by changing noStroke() to stroke(0) in setup(), then add strokeWeight(2) before the arc() call to see the wedge divisions more clearly
Experiment with angleMode(DEGREES) in setup() instead of RADIANS, then change rotationAngle += 0.01 to rotationAngle += 0.5 to see how degrees work differently

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() - color array

The colors array is recreated every single frame (60 times per second), even though it never changes

💡 Move the colors array outside draw() as a global variable, so it's created only once at startup instead of 60 times per second. This is more efficient and cleaner code.

STYLE draw() - variable declarations

wheelDiameter, colors, wedgeCount, and step are declared as const inside draw(), making the code harder to modify or reuse

💡 Consider moving frequently-adjusted values like wheelDiameter to the top of the sketch as a global variable or constant, making it easier to experiment and tweak

FEATURE draw() - rotation speed

The rotation speed (0.01) is hardcoded and cannot be easily adjusted without editing the code

💡 Create a global variable like let rotationSpeed = 0.01 at the top, then use rotationAngle += rotationSpeed in draw(). This lets you easily change speed or even make it interactive with mouse input

BUG draw() - arc angles

If you add more colors to the colors array, the wedges will still divide the circle correctly, but the code doesn't validate that wedgeCount matches colors.length

💡 Add a comment or assertion to clarify that wedgeCount should always equal colors.length, or calculate it directly from colors.length to avoid accidental mismatches

Preview

Code flow diagram showing the structure of Spinning Rainbow Color Wheel - 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