THATSSSSSS CRAZYYY

This sketch displays an animated, glowing URL that ripples and shimmers across a shifting radial gradient background. Each letter cycles through rainbow hues with a soft glow effect, and clicking anywhere copies the link to your clipboard with a playful confirmation message.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

Change the displayed URL — Replace the urlText string with any text you want; the sketch automatically resizes and centers it to fit the screen
Speed up the rainbow color cycling — Increase the 40 to make the hue change faster; decrease it to slow down the color shifts
Make the text wave higher — Increase the 0.18 multiplier to create more dramatic up-and-down motion for each letter
Spread letters farther apart — Change the letter spacing multiplier from 0.6 to a higher value like 1.2 to create wider gaps between characters
Make the background darker — Increase the overlay's alpha value from 35 to 70; higher values darken the gradient more
Keep the 'Copied!' message longer — Increase 1.6 to 3 so the confirmation message stays visible for 3 seconds instead of 1.6

Prefer the full editor? Open it there →

📖 About This Sketch

This sketch creates a visually striking full-screen experience that combines several advanced p5.js techniques: a smoothly animated radial gradient background, individual character animation with wave motion and rainbow hue cycling, and soft glow effects layered behind each letter. The result feels alive and playful, inviting interaction through a simple click-to-copy mechanic that rewards exploration.

The code is organized into three main drawing functions that work together every frame: drawBackground() creates the pulsing gradient, drawTitleAndURL() animates each character individually with position and color changes, and drawCopyHintOrMessage() displays feedback. By studying it, you will learn how to animate text character-by-character, layer glow effects, use HSB color mode for rainbow effects, and handle both desktop and mobile interaction events.

⚙️ How It Works

When the sketch loads, setup() prepares a full-window canvas, centers all text, and switches to HSB color mode so hues cycle naturally from 0–360 degrees
Every frame, draw() calls three functions in order: first, drawBackground() creates concentric circles with hues that shift over time, creating a pulsing radial gradient effect
drawTitleAndURL() then loops through each character of the URL string individually, calculating its position using sine waves so the text undulates up and down, its hue so it cycles through the rainbow, and its glow by drawing the same character multiple times with low opacity at slightly offset positions
The main bright character is drawn on top of the glow layers, and a subtitle appears below
drawCopyHintOrMessage() shows either a default 'Click to copy' hint or a 'Copied!' confirmation that fades out over 1.6 seconds if the user recently clicked
When the user clicks or taps, copyUrlToClipboard() attempts to write the full URL to the clipboard using the modern navigator.clipboard API, or falls back to a temporary textarea method on older browsers, and sets lastCopyTime to trigger the confirmation message

🎓 Concepts You'll Learn

Text animation and character loopsHSB color mode and rainbow cyclingTrigonometric motion (sine waves)Layer rendering and glow effectsInteractive click and touch eventsClipboard API and browser fallbacksResponsive canvas sizingTime-based animation with millis()

📝 Code Breakdown

`setup()`

setup() runs once when the sketch loads. This is where you configure the canvas, set drawing modes, and initialize defaults that apply to the whole sketch.

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  colorMode(HSB, 360, 100, 100, 100); // Hue/Sat/Bright/Alpha
  noStroke();
}

Line-by-line explanation (4 lines)

createCanvas(windowWidth, windowHeight);: Creates a canvas as wide and tall as the entire browser window, so the sketch fills the whole screen
textAlign(CENTER, CENTER);: Sets all text to be centered both horizontally and vertically at the x,y coordinates you pass to text()
colorMode(HSB, 360, 100, 100, 100);: Switches from RGB to HSB color mode where 360 is hue (0–360°), 100 is saturation (0–100), brightness (0–100), and alpha (0–100). This makes rainbow cycling easier because you just increment the first number
noStroke();: Disables all outlines around shapes so only filled areas appear—cleaner look for the glowing text

`draw()`

draw() runs 60 times per second. This sketch delegates work to three helper functions so draw() stays clean and readable. Each frame, the three functions execute in order to layer the background, text, and UI messages.

function draw() {
  drawBackground();
  drawTitleAndURL();
  drawCopyHintOrMessage();
}

Line-by-line explanation (3 lines)

drawBackground();: Calls the function that clears the canvas and draws the animated radial gradient background with pulsing colors
drawTitleAndURL();: Calls the function that draws the title text and animates each letter of the URL with wave motion, rainbow hues, and glow effects
drawCopyHintOrMessage();: Calls the function that displays either the default 'click to copy' hint at the bottom, or the 'Copied!' message that fades after a click

`drawBackground()`

This function demonstrates radial gradients by layering concentric circles of different colors. By animating the hue over time, each circle cycles through the color spectrum, creating a pulsing rainbow effect. The overlay darkens the background so foreground text remains readable.

🔬 This pair of lines controls the gradient's color. The 't * 20' makes it cycle over time. What happens if you change 20 to 100? To 2? How does the animation speed change?

    let h = (t * 20 + inter * 180) % 360;
    fill(h, 80, 30 + inter * 70, 100);

function drawBackground() {
  let t = millis() / 1000;
  let maxR = max(width, height) * 1.4;

  // Animated radial gradient
  for (let r = maxR; r > 0; r -= 40) {
    let inter = r / maxR; // 1 → outer, 0 → inner
    let h = (t * 20 + inter * 180) % 360;
    fill(h, 80, 30 + inter * 70, 100);
    ellipse(width / 2, height / 2, r, r);
  }

  // Slight dark overlay for contrast
  fill(0, 0, 0, 35);
  rect(0, 0, width, height);
}

Line-by-line explanation (9 lines)

🔧 Subcomponents:

for-loop Radial Gradient Loop for (let r = maxR; r > 0; r -= 40)

Draws concentric circles from the largest radius down to the center, each with a slightly different color, creating the pulsing gradient effect

calculation Dark Overlay rect(0, 0, width, height);

Draws a semi-transparent dark rectangle over the entire background to increase contrast and make the text stand out more clearly

let t = millis() / 1000;: Gets the elapsed time in seconds since the sketch started; used to animate the gradient colors over time
let maxR = max(width, height) * 1.4;: Calculates the radius of the outermost circle—1.4 times the larger of width or height ensures it covers the whole screen even at corners
for (let r = maxR; r > 0; r -= 40) {: Loops from the largest radius down to 0, stepping down by 40 pixels each iteration; this creates concentric circles
let inter = r / maxR;: Calculates a ratio from 0 to 1 where 1 is the outer edge and 0 is the center; used to vary color and brightness by distance
let h = (t * 20 + inter * 180) % 360;: Calculates the hue by combining time (t * 20 makes it cycle fast) and position (inter * 180 varies by radius), then uses % 360 to keep it in the valid 0–360 hue range
fill(h, 80, 30 + inter * 70, 100);: Sets the fill color: hue cycles over time, saturation stays high at 80, brightness increases from 30 at center to 100 at edges, alpha is fully opaque (100)
ellipse(width / 2, height / 2, r, r);: Draws a circle centered on the canvas with radius r; smaller circles draw on top of larger ones, layering colors
fill(0, 0, 0, 35);: Sets fill to semi-transparent black (HSB: hue 0, sat 0, bright 0, alpha 35) for the overlay
rect(0, 0, width, height);: Draws a rectangle covering the entire canvas with the semi-transparent black fill, darkening the gradient for better text contrast

`drawTitleAndURL()`

This is the heart of the visual effect. It demonstrates character-by-character text animation: looping through a string, calculating per-character positions and colors based on time and index, and layering multiple draws (the glow effect) to build complexity. The math—sine waves for motion, hue shifts with modulo for rainbow cycling, phase shifts for variety—is the foundation of modern creative coding animation.

function drawTitleAndURL() {
  let t = millis() / 1000;
  let minSide = min(width, height);

  // Title
  let titleSize = minSide / 20;
  textSize(titleSize);
  fill(0, 0, 100, 90);
  text("I KNOW WHERE THE BEST WEBSITE ON EARTH IS", width / 2, height * 0.18);

  // ----- Animated URL (auto-resized to fit width) -----
  // Base size based on screen
  let baseSize = minSide / 14;

  // Compute max size so it fits horizontally:
  // totalWidth ≈ letterSpacing * (len - 1) = urlSize * 0.6 * (len - 1)
  let maxWidthSize = (width * 0.9) / (0.6 * (urlText.length - 1));

  let urlSize = min(baseSize, maxWidthSize);
  textSize(urlSize);

  let letterSpacing = urlSize * 0.6;
  let totalWidth = letterSpacing * (urlText.length - 1);
  let startX = width / 2 - totalWidth / 2;
  let baseY = height * 0.48;

  for (let i = 0; i < urlText.length; i++) {
    let ch = urlText[i];
    let x = startX + i * letterSpacing;

    // Wave motion for each character
    let y = baseY + sin(t * 3 + i * 0.3) * urlSize * 0.18;

    // Hue cycles across characters + time
    let h = (t * 40 + i * 12) % 360;

    // Soft glow behind each character
    for (let g = 5; g >= 1; g--) {
      let glowOffsetX = sin(t * 4 + i) * g * 0.4;
      let glowOffsetY = cos(t * 3.5 + i * 0.7) * g * 0.4;
      fill(h, 90, 65, 10); // low alpha
      text(ch, x + glowOffsetX, y + glowOffsetY);
    }

    // Main bright character
    fill(h, 100, 95, 100);
    text(ch, x, y);
  }

  // Subtitle
  textSize(titleSize * 0.8);
  fill(0, 0, 95, 80);
  text("decoded from Morse", width / 2, height * 0.76);
}

Line-by-line explanation (22 lines)

🔧 Subcomponents:

for-loop Character Animation Loop for (let i = 0; i < urlText.length; i++) {

Iterates through each character in the URL string, calculating its position, hue, and drawing it with glow effects

for-loop Glow Layer Loop for (let g = 5; g >= 1; g--) {

Draws the same character multiple times at slightly different positions and low opacity to create a soft glowing halo effect

calculation Auto-sizing for Width let maxWidthSize = (width * 0.9) / (0.6 * (urlText.length - 1));

Ensures the URL text fits horizontally on the screen by calculating the largest font size that won't exceed 90% of the canvas width

let t = millis() / 1000;: Gets elapsed time in seconds to drive all animations
let minSide = min(width, height);: Gets the smaller of width or height; used as a base for calculating font sizes that scale responsively
let titleSize = minSide / 20;: Calculates title font size as 1/20th of the screen's smaller dimension, so it scales on any device
fill(0, 0, 100, 90);: Sets the title text color to near-white (hue 0, sat 0, bright 100) with slight transparency
let baseSize = minSide / 14;: Calculates a base URL font size as 1/14th of the smaller dimension
let maxWidthSize = (width * 0.9) / (0.6 * (urlText.length - 1));: Calculates the maximum font size that keeps the URL within 90% of the screen width by dividing available width by the spacing needed for all characters
let urlSize = min(baseSize, maxWidthSize);: Chooses whichever is smaller—the base size or the max width size—to ensure the URL fits
let letterSpacing = urlSize * 0.6;: Sets spacing between characters to 60% of the font size; adjust this ratio to spread or compress letters
let totalWidth = letterSpacing * (urlText.length - 1);: Calculates the total width needed to display all characters with the chosen spacing
let startX = width / 2 - totalWidth / 2;: Calculates the leftmost x position to center the entire URL horizontally
let baseY = height * 0.48;: Sets the base vertical center of the URL at 48% down the screen
let ch = urlText[i];: Gets the current character from the URL string
let x = startX + i * letterSpacing;: Calculates the x position for this character by starting at startX and adding the spacing multiplied by its index
let y = baseY + sin(t * 3 + i * 0.3) * urlSize * 0.18;: Calculates a wavy y position: sine wave oscillates over time (t * 3), each character is phase-shifted (i * 0.3), amplitude is proportional to text size (urlSize * 0.18)
let h = (t * 40 + i * 12) % 360;: Calculates hue by combining time (t * 40 for fast cycling) and character position (i * 12 so nearby letters have different hues), keeping it 0–360
for (let g = 5; g >= 1; g--) {: Loops 5 times to draw 5 glow layers, starting with the faintest (highest index) and ending with the strongest
let glowOffsetX = sin(t * 4 + i) * g * 0.4;: Calculates a horizontal glow offset that animates over time; larger g values (outer glow layers) get larger offsets
let glowOffsetY = cos(t * 3.5 + i * 0.7) * g * 0.4;: Calculates a vertical glow offset using cosine (different frequency than glowOffsetX for variety); it creates a moving halo around each character
fill(h, 90, 65, 10);: Sets glow color to match the character's hue with high saturation, medium brightness, and very low alpha (10) so it's barely visible—building up the glow layers
text(ch, x + glowOffsetX, y + glowOffsetY);: Draws the character at the offset position; repeated 5 times with increasing offsets, creating a soft halo
fill(h, 100, 95, 100);: Sets the main character color to full saturation, bright, and fully opaque
text(ch, x, y);: Draws the main bright character on top of its glow layers at the correct x,y position

`drawCopyHintOrMessage()`

This function demonstrates conditional UI feedback: it checks elapsed time to decide what to display, uses p5.js's map() function to smoothly interpolate values (alpha from 100 to 0), and shows how to provide visual feedback to user interactions. The fade-out effect is a subtle but important part of good UX.

🔬 This conditional shows the 'Copied!' message for 1.6 seconds, then switches to the default hint. What happens if you change 1.6 to 0.5? To 5? How does the message timing change?

  if (elapsed >= 0 && elapsed < 1.6) {
    // "Copied!" message that fades out
    let alpha = map(elapsed, 0, 1.6, 100, 0);

function drawCopyHintOrMessage() {
  let t = millis() / 1000;
  let minSide = min(width, height);

  let elapsed = t - lastCopyTime;
  textAlign(CENTER, CENTER);
  textSize(minSide / 35);

  if (elapsed >= 0 && elapsed < 1.6) {
    // "Copied!" message that fades out
    let alpha = map(elapsed, 0, 1.6, 100, 0);
    fill(120, 40, 100, alpha); // greenish
    text("Copied URL to clipboard!", width / 2, height * 0.9);
  } else {
    // Default hint
    fill(0, 0, 100, 70);
    text("Click or tap anywhere to copy the URL", width / 2, height * 0.9);
  }
}

Line-by-line explanation (4 lines)

🔧 Subcomponents:

conditional Fade-out Logic if (elapsed >= 0 && elapsed < 1.6) {

Shows the 'Copied!' message for 1.6 seconds after a click, then switches back to the default hint

calculation Alpha Fade Calculation let alpha = map(elapsed, 0, 1.6, 100, 0);

Maps the elapsed time (0 to 1.6 seconds) to an alpha value that goes from 100 (fully visible) to 0 (invisible), creating a smooth fade-out

let elapsed = t - lastCopyTime;: Calculates how many seconds have passed since the last copy event by subtracting lastCopyTime from the current time t
let alpha = map(elapsed, 0, 1.6, 100, 0);: Uses p5.js's map() function to scale the elapsed time: 0 seconds → alpha 100 (fully visible), 1.6 seconds → alpha 0 (invisible). At 0.8 seconds, alpha would be 50 (half visible)
fill(120, 40, 100, alpha);: Sets text color to a greenish hue (120°), desaturated (40%), bright (100%), with an alpha that fades from 100 to 0 over 1.6 seconds
text("Copied URL to clipboard!", width / 2, height * 0.9);: Draws the confirmation message centered horizontally, 90% down the screen

`mousePressed()`

mousePressed() is a p5.js event handler that runs whenever the user clicks the mouse on the canvas. This sketch uses it for desktop interaction. The function simply delegates to copyUrlToClipboard() for clarity.

function mousePressed() {
  copyUrlToClipboard();
}

Line-by-line explanation (1 lines)

copyUrlToClipboard();: Calls the function that attempts to copy the URL to the clipboard when the user clicks on the canvas

`touchStarted()`

touchStarted() is the p5.js event handler for touch input on mobile devices. By returning false, we prevent the touch from also triggering a mouse event, avoiding duplicate function calls. This ensures the interaction feels responsive on both desktop and mobile.

function touchStarted() {
  copyUrlToClipboard();
  return false; // prevent double-firing with mousePressed
}

Line-by-line explanation (2 lines)

copyUrlToClipboard();: Calls the same clipboard copy function when the user touches the canvas on a mobile or touch device
return false;: Returns false to prevent the browser from also firing mousePressed() on top of touchStarted(), which would cause the copy function to run twice

`copyUrlToClipboard()`

This function demonstrates robust JavaScript interoperability: it uses the modern Clipboard API when available, but gracefully falls back to an older method for older browsers. This is a real-world pattern—always check for feature support before assuming an API exists. The Promise chain (.then/.catch) handles asynchronous operations, which is essential for web interactions.

function copyUrlToClipboard() {
  let fullUrl = "https://" + urlText;

  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(fullUrl)
      .then(() => {
        lastCopyTime = millis() / 1000;
      })
      .catch(() => {
        fallbackCopy(fullUrl);
      });
  } else {
    fallbackCopy(fullUrl);
  }
}

Line-by-line explanation (8 lines)

🔧 Subcomponents:

conditional Modern Clipboard API Check if (navigator.clipboard && navigator.clipboard.writeText) {

Checks if the browser supports the modern Clipboard API before attempting to use it

calculation Promise Success/Failure Handling

navigator.clipboard.writeText(fullUrl)
      .then(() => {
        lastCopyTime = millis() / 1000;
      })
      .catch(() => {
        fallbackCopy(fullUrl);
      });

Handles asynchronous clipboard operations: if successful, updates lastCopyTime to trigger the fade-out message; if it fails, falls back to the older method

let fullUrl = "https://" + urlText;: Prepends 'https://' to the URL text to create a complete, clickable web address
if (navigator.clipboard && navigator.clipboard.writeText) {: Checks if the browser's Clipboard API is available; modern browsers support this, but older ones don't
navigator.clipboard.writeText(fullUrl): Attempts to write the full URL to the system clipboard using the modern Clipboard API; this returns a Promise (async operation)
.then(() => {: If the copy succeeds, this callback runs
lastCopyTime = millis() / 1000;: Records the current time so drawCopyHintOrMessage() will show the 'Copied!' confirmation and fade it out
.catch(() => {: If the copy fails, this callback catches the error and tries the fallback method instead
fallbackCopy(fullUrl);: Calls the older, less reliable clipboard method for browsers that don't support the modern API
} else {: If the browser doesn't have Clipboard API support, skip straight to the fallback

`fallbackCopy(text)`

This is a workaround for older browsers that don't support the modern Clipboard API. It tricks the browser by creating a temporary textarea, selecting its text, and running the deprecated execCommand('copy'). While crude, it works on many older systems. The try/catch block ensures the whole page doesn't crash if the command fails. This function shows defensive programming in action.

function fallbackCopy(text) {
  // Basic fallback using a temporary textarea
  const temp = document.createElement("textarea");
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  try {
    document.execCommand("copy");
  } catch (e) {
    // ignore errors, just don't crash
  }
  document.body.removeChild(temp);
  lastCopyTime = millis() / 1000;
}

Line-by-line explanation (8 lines)

const temp = document.createElement("textarea");: Creates an invisible HTML textarea element (a text input box) in memory; this is not drawn on the page
temp.value = text;: Puts the URL into the textarea's value
document.body.appendChild(temp);: Adds the textarea to the page's HTML body so it becomes a real element (still invisible to the user)
temp.select();: Selects all the text inside the textarea, as if the user had manually highlighted it
document.execCommand("copy");: Issues an old browser command to copy the selected text to the clipboard
} catch (e) {: If the copy command fails, this catch block prevents an error from crashing the page
document.body.removeChild(temp);: Removes the temporary textarea from the page to clean up and leave no trace
lastCopyTime = millis() / 1000;: Records the time so the 'Copied!' message will appear, even if the fallback method was used

`windowResized()`

windowResized() is a p5.js event handler that fires automatically whenever the browser window is resized. This sketch uses it to keep the canvas full-screen and recompute text sizes based on the new dimensions. Without this, the sketch would look broken on a resized window.

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

Line-by-line explanation (1 lines)

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

📦 Key Variables

urlText string

Stores the URL text that is displayed and copied; change this to display a different link

let urlText = "corbun-does-weird-webs.my.canva.site";

lastCopyTime number

Records the timestamp (in seconds) of the last successful copy, used to show and fade the 'Copied!' confirmation message

let lastCopyTime = -1000;

🔧 Potential Improvements (5)

Here are some ways this code could be enhanced:

BUG drawTitleAndURL loop

If urlText.length is 1, the calculation (urlText.length - 1) becomes 0, causing division by zero in maxWidthSize

💡 Add a guard: let maxWidthSize = (width * 0.9) / Math.max(0.6 * (urlText.length - 1), 0.6);

PERFORMANCE drawBackground loop

The radial gradient is redrawn every frame by looping through all circles; with large windows, this creates many ellipse draw calls

💡 Consider caching the gradient to a p5.Graphics object using createGraphics() and only redraw when needed, then display the cached image each frame

STYLE fallbackCopy function

The error catch block silently ignores all errors without feedback to the user

💡 Log the error to console for debugging: console.warn('Clipboard fallback failed:', e);—helps diagnose why copy didn't work on certain devices

FEATURE copyUrlToClipboard

The 'Copied!' message doesn't provide explicit feedback if the copy fails in either the modern or fallback method

💡 Add a separate error message state: set lastCopyTime to a special marker like -999 and show a different message ('Copy failed, try again') in drawCopyHintOrMessage()

STYLE General

No comments explaining the HSB color mode choice or the reasoning behind specific multipliers like 0.18 for wave amplitude

💡 Add block comments at the top of drawTitleAndURL() explaining the tuning constants: 'Wave amplitude (0.18) controls how high letters bob without overlapping'

🔄 Code Flow

Code flow showing setup, draw, drawbackground, drawtitleandurl, drawcopyhintormessage, mousepressed, touchstarted, copytoclipboard, fallbackcopy, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> drawbackground[drawbackground] draw --> drawtitleandurl[drawtitleandurl] draw --> drawcopyhintormessage[drawcopyhintormessage] drawbackground --> radial-loop[Radial Loop] radial-loop --> overlay[Overlay] drawtitleandurl --> url-loop[URL Loop] url-loop --> glow-loop[Glow Layer Loop] glow-loop --> drawtitleandurl drawcopyhintormessage --> fade-logic[Fade-out Logic] fade-logic --> alpha-mapping[Alpha Fade Calculation] mousepressed --> copytoclipboard[copytoclipboard] touchstarted --> copytoclipboard copytoclipboard --> modern-clipboard[Modern Clipboard API Check] modern-clipboard --> promise-chain[Promise Chain] promise-chain --> fallbackcopy[fallbackcopy] windowresized --> setup click setup href "#fn-setup" click draw href "#fn-draw" click drawbackground href "#fn-drawbackground" click drawtitleandurl href "#fn-drawtitleandurl" click drawcopyhintormessage href "#fn-drawcopyhintormessage" click radial-loop href "#sub-radial-loop" click overlay href "#sub-overlay" click url-loop href "#sub-url-loop" click glow-loop href "#sub-glow-loop" click fade-logic href "#sub-fade-logic" click alpha-mapping href "#sub-alpha-mapping" click modern-clipboard href "#sub-modern-clipboard" click promise-chain href "#sub-promise-chain" click fallbackcopy href "#sub-fallbackcopy"

❓ Frequently Asked Questions

What visual effects can I expect from the THATSSSSSS CRAZYYY sketch?

The sketch features a glowing, animated URL that ripples across a vibrant, shifting radial gradient, with each letter shimmering in rainbow hues against a pulsing background.

How can I interact with the THATSSSSSS CRAZYYY sketch?

Users can click on the sketch to copy the displayed URL, which triggers a playful confirmation message to appear.

What creative coding concepts does the THATSSSSSS CRAZYYY sketch demonstrate?

This sketch showcases techniques like animated radial gradients, text wave motion, and interactive user feedback through clicks.

Preview

Code flow diagram showing the structure of THATSSSSSS CRAZYYY - Code flow showing setup, draw, drawbackground, drawtitleandurl, drawcopyhintormessage, mousepressed, touchstarted, copytoclipboard, fallbackcopy, windowresized — Code Flow Diagram

🧪 Try This!

📖 About This Sketch

⚙️ How It Works

🎓 Concepts You'll Learn

📝 Code Breakdown

🔧 Subcomponents:

🔧 Subcomponents:

🔧 Subcomponents:

🔧 Subcomponents:

📦 Key Variables

🔧 Potential Improvements (5)

🔄 Code Flow

❓ Frequently Asked Questions

Explore More

p5js.ai

Gallery

User Guide

Preview