Create

the modiful

By Mamadou Bah · 12 views · 0 likes · Jul 6, 2026

This sketch is meant to draw a mesmerizing rainbow spiral that grows outward from the center of the screen, with each dot colored by cycling through the HSB hue wheel and old dots fading into a soft black trail. As written, the file actually contains two corrupted lines (a mangled variable name and stray text after the last function) that will stop it from running at all, which makes it a great real-world exercise in reading error messages and debugging.

🔀 Remix This ✨ Try This Prompt 📖 View Docs ⛶ Full Screen ← Back to Gallery

💬 Comments

Loading comments...

🎨 More by Mamadou Bah

Simple Game

Simple Game

by Mamadou Bah

✨ Similar sketches

sigmaskibidi

sigmaskibidi

Anonymous
Snake

Snake

by hpesoj
hit the blocks

hit the blocks

Anonymous
Ball catcher

Ball catcher

Anonymous
Volleyball where the different sections of the

Volleyball where the different sections of the

Anonymous
I think Anonymous is the goat and I hate with all my mind body and soul Stella dev (the temu one)

I think Anonymous is the goat and I hate with all my mind body and soul Stella dev (the temu one)

Anonymous
📋 Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/4d0881f9-5125-4e5c-af73-b363e3e437b2" width="400" height="400" frameborder="0" allow="autoplay" title="the modiful"></iframe>

Adjust width and height as needed. Preview embed →

❓ About This Sketch 4 questions

What does the modiful sketch create visually?

The modiful sketch creates a visually captivating spiral of colorful dots that radiate outward from the center of the canvas. The colors cycle through the HSB color spectrum, and a semi-transparent background allows for a trailing effect as the dots fade out.

How can users interact with the modiful sketch?

This sketch is not interactive in the traditional sense; instead, it continuously generates an animated spiral of dots based on mathematical calculations. The animation drives itself through a loop that updates the position and color of the dots over time.

What creative coding technique does the modiful sketch demonstrate?

The modiful sketch demonstrates the technique of polar coordinates, where points are drawn in a spiral formation using angle and radius calculations. It effectively combines this with a color cycling effect based on the angle to create a dynamic visual experience.

How could someone recreate a similar effect in p5.js?

To recreate a similar effect in p5.js, one can use a while loop to draw points in a spiral by converting polar coordinates to Cartesian coordinates with sine and cosine functions. Adjusting the angle and radius incrementally while cycling through color values in the HSB color mode will produce a vibrant spiral animation.

💬 AI Chat History 2 messages
👤 You
Draw a rainbow spiral pattern
🤖 AI
Here's a p5.js sketch that draws a rainbow spiral pattern. I've also updated your `index.html` and `style.css` to ensure the canvas fills the entire window without any extra elements interfering. The `mam.js` file was empty, so I've removed it to keep your project clean.

This sketch uses the HSB color mode to easily generate a rainbow effect, where the hue changes as the spiral expands.

---

### `index.html`
This HTML file loads the p5.js library and links to your `sketch.js` and `style.css` files. I've removed the `h1` heading to allow the canvas to take up the full screen.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Spiral</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
```

---

### `style.css`
This CSS sets the body and canvas to take up the full window, preventing any scrollbars and ensuring the canvas is displayed correctly.

```css
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevents scrollbars */
background-color: black; /* Ensures body background is black if canvas doesn't cover fully */
}

canvas {
display: block; /* Removes extra space below the canvas */
}
```

---

### `sketch.js`
This code draws the rainbow spiral. It uses `colorMode(HSB)` to easily cycle through hues for the rainbow effect. The `translate()` function moves the drawing origin to the center of the canvas, and a `while` loop calculates the positions of dots along a spiral path. A semi-transparent black background creates a subtle trailing effect.

```js
function setup() {
// Create a canvas that fills the entire browser window
createCanvas(windowWidth, windowHeight);
// Set the color mode to HSB (Hue, Saturation, Brightness)
// Hue ranges from 0 to 360, Saturation and Brightness from 0 to 100, Alpha from 0 to 100
colorMode(HSB, 360, 100, 100, 100); // https://p5js.org/reference/p5/colorMode/
// Do not draw outlines around shapes
noStroke(); // https://p5js.org/reference/p5/noStroke/
// Set the background color to black
background(0); // https://p5js.org/reference/p5/background/
}

function draw() {
// Draw a semi-transparent black background.
// This creates a subtle trailing effect as old circles fade out.
background(0, 10); // https://p5js.org/reference/p5/background/

// Move the drawing origin to the center of the canvas
translate(width / 2, height / 2); // https://p5js.org/reference/p5/translate/

let angle = 0; // Starting angle for the spiral
let radius = 0; // Starting radius for the spiral
let angleIncrement = 0.1; // How quickly the spiral turns (smaller value = more turns)
let radiusIncrement = 1.5; // How quickly the spiral expands
let dotSize = 5; // Size of each dot in the spiral

// Continue drawing dots as long as the radius is within the canvas bounds
while (radius < min(width, height) / 2) { // https://p5js.org/reference/p5/min/
// Calculate the x and y coordinates using polar to Cartesian conversion
let x = radius * cos(angle); // https://p5js.org/reference/p5/cos/
let y = radius * sin(angle); // https://p5js.org/reference/p5/sin/

// Set the fill color using HSB, cycling hue from 0 to 360
fill(angle % 360, 100, 100); // https://p5js.org/reference/p5/fill/

// Draw a circle at the calculated position
ellipse(x, y, dotSize, dotSize); // https://p5js.org/reference/p5/ellipse/

// Increment the angle and radius for the next dot, creating the spiral effect
angle += angleIncrement;
radius += radiusIncrement;
}
}

function windowResized() {
// This function is called automatically when the browser window is resized.
// We resize the canvas to match the new window dimensions, keeping the sketch responsive.
resizeCanvas(windowWidth, windowHeight); // https://p5js.org/reference/p5/resizeCanvas/
// Clear the background when the window is resized to prevent artifacts
background(0);
}
```
🎬 Video Preview