SpaceTeather

Abyssal Anchor is a deep-sea defense game where players control a glowing lure on a tether to defend a central core from attacking jellyfish and sharks. The game features physics-based movement, a stamina-based snap attack mechanic, retro 8-bit chiptune music, and progressive difficulty as the score increases.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Game State ManagementPhysics SimulationCollision DetectionAudio SynthesisParticle EffectsInput HandlingCanvas AnimationScore/Health SystemsProcedural Enemy SpawningMobile Responsiveness

🔄 Code Flow

Code flow showing setup, draw, resetgame, setupaudio, ensureaudiosstarted, updatemusic, playdrum, playsfx, silencemusic, updategame, spawnmanager, killenemy, takedamage, drawgame, drawhud, drawmenu, spawnparticles, shakescreen, triggersnap, handleinteract, mousepressed, mousedragged, mousemoved, touchstarted, touchmoved, windowresized

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

graph TD start[Start] --> setup[setup] setup --> canvas-setup[Canvas Initialization] setup --> pointer-init[Pointer Position Initialization] setup --> highscore-load[High Score Loading] setup --> setupaudio[setupAudio] setup --> resetgame[resetGame] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-setup href "#sub-canvas-setup" click pointer-init href "#sub-pointer-init" click highscore-load href "#sub-highscore-load" click setupaudio href "#fn-setupaudio" click resetgame href "#fn-resetgame" draw --> background-trail[Motion Trail Effect] draw --> state-menu[Start Menu State] draw --> state-play[Gameplay State] draw --> state-gameover[Game Over State] click draw href "#fn-draw" click background-trail href "#sub-background-trail" click state-menu href "#sub-state-menu" click state-play href "#sub-state-play" click state-gameover href "#sub-state-gameover" state-menu --> drawmenu[drawMenu] click drawmenu href "#fn-drawmenu" state-play --> updategame[updateGame] click updategame href "#fn-updategame" state-gameover --> silencemusic[silenceMusic] click silencemusic href "#fn-silencemusic" updategame --> tether-physics[Tether Spring Physics] updategame --> stamina-recharge[Stamina Regeneration] updategame --> enemy-spawn[Enemy Spawning] updategame --> bubble-update[Bubble Animation] updategame --> particle-update[Particle Update Loop] updategame --> screen-shake[Screen Shake Decay] click tether-physics href "#sub-tether-physics" click stamina-recharge href "#sub-stamina-recharge" click enemy-spawn href "#sub-enemy-spawn" click bubble-update href "#sub-bubble-update" click particle-update href "#sub-particle-update" click screen-shake href "#sub-screen-shake" enemy-spawn --> spawnmanager[spawnManager] click spawnmanager href "#fn-spawnmanager" spawnmanager --> spawn-rate[Dynamic Spawn Rate] spawnmanager --> spawn-trigger[Spawn Trigger] spawnmanager --> spawn-position[Spawn Position Calculation] spawnmanager --> enemy-type[Enemy Type Selection] spawnmanager --> enemy-stats[Enemy Stats Assignment] spawnmanager --> enemy-creation[Enemy Object Creation] click spawn-rate href "#sub-spawn-rate" click spawn-trigger href "#sub-spawn-trigger" click spawn-position href "#sub-spawn-position" click enemy-type href "#sub-enemy-type" click enemy-stats href "#sub-enemy-stats" click enemy-creation href "#sub-enemy-creation" enemy-loop --> enemy-movement[Enemy Movement Logic] enemy-loop --> core-collision[Core Collision Detection] enemy-loop --> tether-collision[Tether Collision Detection] click enemy-movement href "#sub-enemy-movement" click core-collision href "#sub-core-collision" click tether-collision href "#sub-tether-collision" core-collision --> takedamage[takeDamage] click takedamage href "#fn-takedamage" takedamage --> damage-apply[Health Reduction] takedamage --> damage-feedback[Damage Feedback] takedamage --> gameover-check[Game Over Check] click damage-apply href "#sub-damage-apply" click damage-feedback href "#sub-damage-feedback" click gameover-check href "#sub-gameover-check" gameover-check --> highscore-save[High Score Saving] click highscore-save href "#sub-highscore-save" draw --> drawgame[drawGame] draw --> drawhud[drawHUD] click drawgame href "#fn-drawgame" click drawhud href "#fn-drawhud" drawgame --> tether-draw[Tether Line Drawing] drawgame --> core-draw[Core Drawing] drawgame --> enemy-draw[Enemy Drawing] drawgame --> particle-draw[Particle Drawing] drawgame --> bubble-draw[Bubble Drawing] click tether-draw href "#sub-tether-draw" click core-draw href "#sub-core-draw" click enemy-draw href "#sub-enemy-draw" click particle-draw href "#sub-particle-draw" click bubble-draw href "#sub-bubble-draw" drawhud --> vignette[Vignette Effect] drawhud --> score-display[Score Display] drawhud --> stamina-bar[Stamina Bar Drawing] drawhud --> instructions[Control Instructions] click vignette href "#sub-vignette" click score-display href "#sub-score-display" click stamina-bar href "#sub-stamina-bar" click instructions href "#sub-instructions"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize your canvas size, load saved data, and set up objects that need to exist before the game begins. The high score is saved in localStorage, which persists even after the browser closes.

function setup() {
  createCanvas(windowWidth, windowHeight);
  pointerX = width / 2;
  pointerY = height / 2;

  // Load High Score
  if (typeof Storage !== "undefined") {
    let saved = localStorage.getItem("abyssalHighScore");
    if (saved) highScore = int(saved);
  }

  // Initialize Audio Objects (suspended state)
  setupAudio();
  
  resetGame();
  
  textFont("Courier New");
  textAlign(CENTER, CENTER);
}

🔧 Subcomponents:

calculation Canvas Initialization createCanvas(windowWidth, windowHeight);

Creates a full-screen canvas that fills the entire browser window

calculation Pointer Position Initialization pointerX = width / 2; pointerY = height / 2;

Sets the initial cursor/touch position to the center of the screen

conditional High Score Loading

if (typeof Storage !== "undefined") { let saved = localStorage.getItem("abyssalHighScore"); if (saved) highScore = int(saved); }

Retrieves the saved high score from browser local storage if it exists

Line by Line:

createCanvas(windowWidth, windowHeight);: Creates a canvas that fills the entire window. windowWidth and windowHeight are p5.js variables that automatically update if the window is resized
pointerX = width / 2;: Sets the starting horizontal position of the cursor/touch to the center of the canvas
pointerY = height / 2;: Sets the starting vertical position of the cursor/touch to the center of the canvas
if (typeof Storage !== "undefined") {: Checks if the browser supports localStorage (for saving data between sessions). Not all browsers allow this
let saved = localStorage.getItem("abyssalHighScore");: Retrieves the previously saved high score from browser storage using the key "abyssalHighScore"
if (saved) highScore = int(saved);: If a high score was found, converts it from text to a number and stores it in the highScore variable
setupAudio();: Calls the setupAudio function to initialize all the audio oscillators for music and sound effects
resetGame();: Calls resetGame to initialize all game variables like score, health, enemies array, and the tether object
textFont("Courier New");: Sets the font for all text drawn to the canvas to Courier New (a monospace font that looks retro)
textAlign(CENTER, CENTER);: Makes all text align to the center both horizontally and vertically when drawn

`draw()`

draw() runs 60 times per second (by default) and is the main animation loop. The semi-transparent background creates motion trails. The game uses three states (START, PLAY, GAMEOVER) to control what happens each frame. This is a common pattern called a State Machine.

function draw() {
  // Background with trails
  noStroke();
  fill(5, 10, 20, 80); 
  rect(0, 0, width, height);

  if (gameState === "START") {
    drawMenu("ABYSSAL ANCHOR", isMobile ? "TAP TO DIVE" : "CLICK TO DIVE");
  } else if (gameState === "PLAY") {
    updateMusic(); // Play the 8-bit loop
    updateGame();
    drawGame();
  } else if (gameState === "GAMEOVER") {
    silenceMusic(); // Stop music on death
    drawMenu("HULL BREACHED", "TAP TO RESURFACE");
  }
}

🔧 Subcomponents:

calculation Motion Trail Effect fill(5, 10, 20, 80); rect(0, 0, width, height);

Draws a semi-transparent dark rectangle over the entire canvas each frame, creating a motion blur/trail effect

conditional Start Menu State if (gameState === "START") { drawMenu(...); }

Shows the title screen when the game hasn't started yet

conditional Gameplay State else if (gameState === "PLAY") { updateMusic(); updateGame(); drawGame(); }

Runs all game logic and drawing when actively playing

conditional Game Over State else if (gameState === "GAMEOVER") { silenceMusic(); drawMenu(...); }

Shows the game over screen and stops the music when the core is destroyed

Line by Line:

noStroke();: Removes the outline from shapes, so the rectangle won't have a border
fill(5, 10, 20, 80);: Sets the fill color to very dark blue (RGB: 5,10,20) with 80/255 opacity. The low opacity creates transparency
rect(0, 0, width, height);: Draws a rectangle covering the entire canvas. Because it's semi-transparent, it fades out previous frames, creating a motion blur effect
if (gameState === "START") {: Checks if the game is in the START state (title screen)
drawMenu("ABYSSAL ANCHOR", isMobile ? "TAP TO DIVE" : "CLICK TO DIVE");: Draws the menu with the title and different instructions based on whether the player is on mobile or desktop
else if (gameState === "PLAY") {: Checks if the game is in the PLAY state (actively playing)
updateMusic();: Updates the music sequencer, playing the next note in the 8-bit chiptune loop
updateGame();: Updates all game logic: physics, enemy movement, collision detection, and particle effects
drawGame();: Draws all game elements: the tether, enemies, particles, core, and HUD
else if (gameState === "GAMEOVER") {: Checks if the game is in the GAMEOVER state (core was destroyed)
silenceMusic();: Fades out all audio when the game ends

`resetGame()`

resetGame() is called when the game starts and when the player wants to play again after game over. It clears all old data and creates fresh starting conditions. The tether is an object (not a class) that stores position and velocity data. Objects are useful for grouping related data together.

function resetGame() {
  score = 0;
  health = 100;
  stamina = 100;
  enemies = [];
  particles = [];
  bubbles = [];
  
  tether = {
    x: width / 2,
    y: height / 2 + 100,
    vx: 0,
    vy: 0,
    radius: 18
  };

  // Background bubbles
  for(let i=0; i<30; i++) {
    bubbles.push({
      x: random(width),
      y: random(height),
      size: random(2, 6),
      speed: random(0.5, 2)
    });
  }
}

🔧 Subcomponents:

calculation Game Statistics Reset score = 0; health = 100; stamina = 100;

Resets all player stats to their starting values

calculation Entity Arrays Clear enemies = []; particles = []; bubbles = [];

Empties all arrays to remove old enemies, particles, and bubbles from the previous game

calculation Tether Object Creation tether = { x: width / 2, y: height / 2 + 100, vx: 0, vy: 0, radius: 18 };

Creates the tether object with position, velocity, and size properties

for-loop Background Bubble Generation for(let i=0; i<30; i++) { bubbles.push({...}); }

Creates 30 decorative bubbles at random positions with random sizes and speeds

Line by Line:

score = 0;: Sets the score back to 0 at the start of a new game
health = 100;: Sets the core's health back to full (100). When this reaches 0, the game ends
stamina = 100;: Sets the stamina back to full (100). Stamina is used to perform snap attacks and recharges over time
enemies = [];: Creates an empty array to hold all current enemies. The [] syntax creates a new empty array
particles = [];: Creates an empty array to hold all particle effects (explosions, hits, etc.)
bubbles = [];: Creates an empty array to hold all decorative background bubbles
tether = { x: width / 2, y: height / 2 + 100, vx: 0, vy: 0, radius: 18 };: Creates the tether object with properties: x and y position (centered horizontally, below center vertically), vx and vy velocity (starting at 0), and radius (size)
for(let i=0; i<30; i++) {: Loops 30 times to create 30 bubbles
bubbles.push({ x: random(width), y: random(height), size: random(2, 6), speed: random(0.5, 2) });: Creates a bubble object with random x position, random y position, random size (2-6 pixels), and random upward speed (0.5-2 pixels per frame)

`setupAudio()`

setupAudio() creates all the audio oscillators using p5.sound library. Oscillators generate sound waves at specific frequencies. Different wave types (square, sawtooth, triangle, noise) sound different. All oscillators start with volume 0 and are already running - we control them by changing their frequency and amplitude during gameplay.

function setupAudio() {
  // 1. Lead Melody (Square wave = NES style)
  musicOscA = new p5.Oscillator('square');
  musicOscA.amp(0);
  musicOscA.start();

  // 2. Harmony/Arp (Square wave)
  musicOscB = new p5.Oscillator('square');
  musicOscB.amp(0);
  musicOscB.start();

  // 3. Bass (Sawtooth = gritty)
  bassOsc = new p5.Oscillator('sawtooth');
  bassOsc.amp(0);
  bassOsc.start();

  // 4. Noise (Drums + Explosions)
  noiseOsc = new p5.Noise('white');
  noiseOsc.amp(0);
  noiseOsc.start();
  
  // 5. SFX Oscillator
  sfxOsc = new p5.Oscillator('triangle');
  sfxOsc.amp(0);
  sfxOsc.start();
}

🔧 Subcomponents:

calculation Melody Oscillator Setup musicOscA = new p5.Oscillator('square'); musicOscA.amp(0); musicOscA.start();

Creates a square wave oscillator for the main melody, sets volume to 0, and starts it

calculation Harmony Oscillator Setup musicOscB = new p5.Oscillator('square'); musicOscB.amp(0); musicOscB.start();

Creates a second square wave oscillator for harmony notes

calculation Bass Oscillator Setup bassOsc = new p5.Oscillator('sawtooth'); bassOsc.amp(0); bassOsc.start();

Creates a sawtooth wave oscillator for deep bass notes

calculation Noise Oscillator Setup noiseOsc = new p5.Noise('white'); noiseOsc.amp(0); noiseOsc.start();

Creates white noise for drum and explosion sound effects

calculation Sound Effects Oscillator Setup sfxOsc = new p5.Oscillator('triangle'); sfxOsc.amp(0); sfxOsc.start();

Creates a triangle wave oscillator for game sound effects like snap and hit

Line by Line:

musicOscA = new p5.Oscillator('square');: Creates a new oscillator that produces a square wave (sounds like classic NES/8-bit music). 'square' is the wave type
musicOscA.amp(0);: Sets the amplitude (volume) to 0 so it's silent. We'll turn it up when we want to play notes
musicOscA.start();: Starts the oscillator. It will now run continuously in the background, ready to play notes
musicOscB = new p5.Oscillator('square');: Creates a second square wave oscillator for harmony/arpeggio notes
bassOsc = new p5.Oscillator('sawtooth');: Creates a sawtooth wave oscillator. Sawtooth waves sound harsher/grittier than square waves, good for bass
noiseOsc = new p5.Noise('white');: Creates white noise (random sound, like static). Used for percussion and explosion effects
sfxOsc = new p5.Oscillator('triangle');: Creates a triangle wave oscillator for sound effects. Triangle waves are smoother than square but still bright

`ensureAudioStarted()`

Modern browsers require user interaction (click/tap) before playing audio for security reasons. ensureAudioStarted() handles this by waiting for the first click/tap, then activating the audio context. It only does this once thanks to the audioInit flag.

function ensureAudioStarted() {
  if (!audioInit) {
    userStartAudio().then(() => {
      audioInit = true;
      console.log("Audio Context Started");
    });
  }
}

🔧 Subcomponents:

conditional Audio Initialization Check if (!audioInit) { ... }

Only starts audio if it hasn't been started yet

calculation Audio Context Activation userStartAudio().then(() => { audioInit = true; });

Activates the browser's audio context and sets the audioInit flag when complete

Line by Line:

if (!audioInit) {: Checks if audio has NOT been initialized yet. The ! means 'not', so this runs only once
userStartAudio().then(() => {: Calls p5.js's userStartAudio() function which waits for user interaction before starting audio. The .then() waits for this to complete
audioInit = true;: Sets the audioInit flag to true so this function won't try to start audio again
console.log("Audio Context Started");: Prints a message to the browser console for debugging purposes

`updateMusic()`

updateMusic() is the music sequencer. It plays notes in a repeating 16-step pattern. The TEMPO constant controls how fast the music plays. Each step, different instruments play: melody (fast), bass (slow), and drums (kick and hi-hat). The 0 values in MELODY represent rests (silence). This creates a simple 8-bit chiptune loop.

function updateMusic() {
  if (!audioInit) return;

  frameCounter++;
  
  // Metronome
  if (frameCounter % TEMPO === 0) {
    seqStep = (seqStep + 1) % 16;
    
    // 1. Melody (Fast Arps)
    let note = MELODY[seqStep % MELODY.length];
    if (note > 0) {
      musicOscA.freq(note);
      musicOscA.amp(0.08, 0.05); // Short decay
      musicOscA.amp(0, 0.1);
    }

    // 2. Bass (Slow steps)
    if (seqStep % 4 === 0) {
      let bassNote = BASS[(seqStep / 4) % BASS.length];
      bassOsc.freq(bassNote);
      bassOsc.amp(0.15, 0.05);
      bassOsc.amp(0, 0.4);
    }
    
    // 3. Drums (Noise bursts)
    if (seqStep % 8 === 0) { // Kick
       playDrum(0.2); 
    } else if (seqStep % 4 === 2) { // Hi-hat
       playDrum(0.05);
    }
  }
}

🔧 Subcomponents:

conditional Audio Initialization Guard if (!audioInit) return;

Exits the function early if audio hasn't been initialized yet

calculation Frame Counter Increment frameCounter++;

Increments the frame counter to track timing

conditional Metronome Trigger if (frameCounter % TEMPO === 0) { ... }

Triggers a new music step every TEMPO frames (creates the beat)

conditional Melody Note Playing let note = MELODY[seqStep % MELODY.length]; if (note > 0) { ... }

Gets the current melody note and plays it if it's not 0 (0 means rest)

conditional Bass Note Playing if (seqStep % 4 === 0) { ... }

Plays a bass note every 4 steps (slower than melody)

conditional Drum Sound Playing if (seqStep % 8 === 0) { playDrum(0.2); } else if (seqStep % 4 === 2) { playDrum(0.05); }

Plays kick drums every 8 steps and hi-hats every 4 steps (offset by 2)

Line by Line:

if (!audioInit) return;: If audio hasn't been started yet, exit the function immediately
frameCounter++;: Increments frameCounter by 1 each frame. This is used to create timing for the music
if (frameCounter % TEMPO === 0) {: Checks if frameCounter is divisible by TEMPO (10). When true, it's time for the next music step
seqStep = (seqStep + 1) % 16;: Advances to the next step in the sequence (0-15), then wraps back to 0 after 15 (% 16 means modulo 16)
let note = MELODY[seqStep % MELODY.length];: Gets the note frequency from the MELODY array at the current step. % MELODY.length wraps around if needed
if (note > 0) {: Only plays the note if it's greater than 0. In the MELODY array, 0 means 'rest' (silence)
musicOscA.freq(note);: Sets the frequency of the melody oscillator to the note frequency (in Hz)
musicOscA.amp(0.08, 0.05);: Ramps the volume up to 0.08 over 0.05 seconds (50 milliseconds), creating a quick attack
musicOscA.amp(0, 0.1);: Ramps the volume down to 0 over 0.1 seconds (100 milliseconds), creating a decay/release
if (seqStep % 4 === 0) {: Plays a bass note every 4 steps (slower rhythm than the melody)
let bassNote = BASS[(seqStep / 4) % BASS.length];: Gets the bass note. Dividing seqStep by 4 gives us a slower index into the BASS array
if (seqStep % 8 === 0) { playDrum(0.2); }: Plays a loud kick drum (volume 0.2) every 8 steps
else if (seqStep % 4 === 2) { playDrum(0.05); }: Plays a quiet hi-hat (volume 0.05) when seqStep is 2, 6, 10, 14 (every 4 steps, offset by 2)

`playDrum(vol)`

playDrum() creates a drum sound by using noise with a quick attack and decay envelope. The vol parameter controls how loud the drum is (0.2 for kick, 0.05 for hi-hat). The attack/decay times create the characteristic 'thump' of a drum.

function playDrum(vol) {
  noiseOsc.setType('brown');
  noiseOsc.amp(vol, 0.01);
  noiseOsc.amp(0, 0.1);
}

🔧 Subcomponents:

calculation Noise Type Setting noiseOsc.setType('brown');

Changes the noise to brown noise (deeper, more bass-heavy than white noise)

calculation Drum Attack noiseOsc.amp(vol, 0.01);

Quickly ramps up the volume to create the initial 'hit' of the drum

calculation Drum Decay noiseOsc.amp(0, 0.1);

Fades out the drum sound over 100 milliseconds

Line by Line:

noiseOsc.setType('brown');: Sets the noise oscillator to brown noise, which has more bass and sounds more like a drum than white noise
noiseOsc.amp(vol, 0.01);: Ramps the volume up to the specified amount (vol parameter) over 0.01 seconds (10 milliseconds). This creates a quick percussive attack
noiseOsc.amp(0, 0.1);: Ramps the volume down to 0 over 0.1 seconds (100 milliseconds). This creates the decay of the drum sound

`playSFX(type)`

playSFX() creates different sound effects based on game events. Each sound uses different oscillator types, frequencies, and envelope shapes (attack/decay) to create distinct audio feedback. This helps the player feel the impact of their actions.

function playSFX(type) {
  if (!audioInit) return;
  
  if (type === 'SNAP') {
    // Laser-like sweep
    sfxOsc.setType('square');
    sfxOsc.freq(800);
    sfxOsc.freq(100, 0.2);
    sfxOsc.amp(0.3, 0.01);
    sfxOsc.amp(0, 0.2);
  } else if (type === 'HIT') {
    // High ping
    sfxOsc.setType('sine');
    sfxOsc.freq(1200);
    sfxOsc.amp(0.2, 0.01);
    sfxOsc.amp(0, 0.1);
  } else if (type === 'DAMAGE') {
    // Low crunch
    noiseOsc.setType('white');
    noiseOsc.amp(0.4, 0.01);
    noiseOsc.amp(0, 0.3);
  }
}

🔧 Subcomponents:

conditional Snap Attack Sound Effect if (type === 'SNAP') { ... }

Creates a laser-like sweep sound when the player performs a snap attack

conditional Hit Sound Effect else if (type === 'HIT') { ... }

Creates a high-pitched ping sound when an enemy is successfully hit

conditional Damage Sound Effect else if (type === 'DAMAGE') { ... }

Creates a low-pitched crunch sound when the core takes damage

Line by Line:

if (!audioInit) return;: Exits early if audio hasn't been initialized yet
if (type === 'SNAP') {: Checks if the sound effect type is 'SNAP' (snap attack)
sfxOsc.setType('square');: Uses a square wave for the snap sound
sfxOsc.freq(800);: Sets the starting frequency to 800 Hz (high pitch)
sfxOsc.freq(100, 0.2);: Sweeps the frequency down to 100 Hz over 0.2 seconds, creating a laser-like effect
sfxOsc.amp(0.3, 0.01);: Ramps volume up to 0.3 over 10 milliseconds (quick attack)
sfxOsc.amp(0, 0.2);: Ramps volume down to 0 over 200 milliseconds (slow decay)
else if (type === 'HIT') {: Checks if the sound effect type is 'HIT' (enemy defeated)
sfxOsc.setType('sine');: Uses a sine wave for the hit sound (smoother than square)
sfxOsc.freq(1200);: Sets frequency to 1200 Hz (high pitch for a 'ping')
else if (type === 'DAMAGE') {: Checks if the sound effect type is 'DAMAGE' (core hit)
noiseOsc.setType('white');: Uses white noise for a harsh crunch sound
noiseOsc.amp(0.4, 0.01);: Ramps volume up to 0.4 (louder than other effects) over 10 milliseconds
noiseOsc.amp(0, 0.3);: Ramps volume down to 0 over 300 milliseconds (longer decay for impact)

`silenceMusic()`

silenceMusic() is called when the game ends to fade out all music smoothly. The 0.5 second fade time makes the transition feel natural rather than abrupt.

function silenceMusic() {
  if (audioInit) {
    musicOscA.amp(0, 0.5);
    musicOscB.amp(0, 0.5);
    bassOsc.amp(0, 0.5);
    noiseOsc.amp(0, 0.5);
  }
}

🔧 Subcomponents:

conditional Silence All Oscillators if (audioInit) { ... }

Fades out all music oscillators if audio is initialized

Line by Line:

if (audioInit) {: Only silences music if audio has been initialized
musicOscA.amp(0, 0.5);: Fades the melody oscillator to silence over 0.5 seconds
musicOscB.amp(0, 0.5);: Fades the harmony oscillator to silence over 0.5 seconds
bassOsc.amp(0, 0.5);: Fades the bass oscillator to silence over 0.5 seconds
noiseOsc.amp(0, 0.5);: Fades the noise oscillator to silence over 0.5 seconds

`updateGame()`

updateGame() is the core game logic function. It handles: tether physics (spring toward cursor with drag), stamina regeneration, bubble animation, enemy spawning and movement, collision detection (both core and tether), particle updates, and screen shake decay. The physics uses a spring model where the tether is pulled toward the cursor. Collision detection uses distance calculations to determine hits.

function updateGame() {
  const coreX = width / 2;
  const coreY = height / 2;
  
  // Stamina
  if (stamina < 100) stamina += RECHARGE_RATE;
  
  // Physics
  let dx = pointerX - tether.x;
  let dy = pointerY - tether.y;
  
  // Snap Physics
  let springK = 0.03; 
  if (isSnapping) {
    springK = 0.35; // Very strong snap
    snapTimer--;
    if (snapTimer <= 0) isSnapping = false;
  }
  
  let ax = dx * springK;
  let ay = dy * springK;
  
  tether.vx += ax;
  tether.vy += ay;
  
  // Water Drag
  tether.vx *= WATER_DRAG;
  tether.vy *= WATER_DRAG;
  
  tether.x += tether.vx;
  tether.y += tether.vy;
  
  // Bubbles
  for (let b of bubbles) {
    b.y -= b.speed;
    b.x += sin(frameCount * 0.05 + b.y * 0.01) * 0.5;
    if (b.y < -10) {
      b.y = height + 10;
      b.x = random(width);
    }
  }

  // Enemies
  spawnManager();
  
  for (let i = enemies.length - 1; i >= 0; i--) {
    let e = enemies[i];
    
    // Move
    let dir = createVector(coreX - e.pos.x, coreY - e.pos.y);
    dir.normalize();
    
    if (e.type === 'JELLY') {
      let pulse = 1 + sin(frameCount * 0.1 + e.offset) * 0.2;
      e.pos.add(dir.mult(e.speed * pulse));
    } else {
      let wobble = createVector(-dir.y, dir.x).mult(sin(frameCount * 0.2) * 2);
      e.pos.add(dir.mult(e.speed).add(wobble));
    }

    // Core Hit
    let dCore = dist(e.pos.x, e.pos.y, coreX, coreY);
    if (dCore < 45) {
      takeDamage(15);
      killEnemy(i, false);
      continue;
    }

    // Tether Hit
    let dTether = dist(e.pos.x, e.pos.y, tether.x, tether.y);
    let hitRad = tether.radius + e.size/2;
    if (isSnapping) hitRad += 20; 

    if (dTether < hitRad) {
      let impact = mag(tether.vx, tether.vy);
      
      if (isSnapping || impact > 8) {
        playSFX('HIT');
        killEnemy(i, true);
        
        tether.vx *= -0.5;
        tether.vy *= -0.5;
        
        if (isSnapping) shakeScreen(10);
      } else {
        e.pos.x += tether.vx;
        e.pos.y += tether.vy;
      }
    }
  }

  // Particles
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    p.life -= 4;
    p.pos.add(p.vel);
    p.vel.mult(0.95);
    if (p.life <= 0) particles.splice(i, 1);
  }
  
  if (shaking > 0) shaking *= 0.8;
}

🔧 Subcomponents:

conditional Stamina Regeneration if (stamina < 100) stamina += RECHARGE_RATE;

Slowly regenerates stamina when it's below maximum

calculation Tether Spring Physics

let dx = pointerX - tether.x; let dy = pointerY - tether.y; let springK = 0.03; let ax = dx * springK; let ay = dy * springK;

Calculates acceleration toward the cursor using spring physics

conditional Snap Attack Physics Boost if (isSnapping) { springK = 0.35; snapTimer--; if (snapTimer <= 0) isSnapping = false; }

Increases spring force during snap attack and counts down the snap duration

calculation Velocity and Position Update

tether.vx += ax; tether.vy += ay; tether.vx *= WATER_DRAG; tether.vy *= WATER_DRAG; tether.x += tether.vx; tether.y += tether.vy;

Updates tether velocity with acceleration, applies water drag, and moves the tether

for-loop Bubble Animation for (let b of bubbles) { ... }

Updates bubble positions with rising motion and wave animation

calculation Enemy Spawning spawnManager();

Calls the spawn manager to create new enemies

for-loop Enemy Update Loop for (let i = enemies.length - 1; i >= 0; i--) { ... }

Updates all enemies: movement, collision with core, collision with tether

conditional Enemy Movement Logic if (e.type === 'JELLY') { ... } else { ... }

Different movement patterns for jellyfish (pulsing) and sharks (wobbling)

conditional Core Collision Detection let dCore = dist(e.pos.x, e.pos.y, coreX, coreY); if (dCore < 45) { ... }

Checks if enemy reached the core and damages it

conditional Tether Collision Detection let dTether = dist(e.pos.x, e.pos.y, tether.x, tether.y); if (dTether < hitRad) { ... }

Checks if enemy hit the tether and determines if it's defeated

for-loop Particle Update Loop for (let i = particles.length - 1; i >= 0; i--) { ... }

Updates all particles and removes them when their life expires

calculation Screen Shake Decay if (shaking > 0) shaking *= 0.8;

Gradually reduces screen shake intensity

Line by Line:

const coreX = width / 2;: Stores the core's x position (center of screen)
const coreY = height / 2;: Stores the core's y position (center of screen)
if (stamina < 100) stamina += RECHARGE_RATE;: If stamina is below 100, add RECHARGE_RATE (0.6) each frame to slowly restore it
let dx = pointerX - tether.x;: Calculates the horizontal distance from tether to cursor
let dy = pointerY - tether.y;: Calculates the vertical distance from tether to cursor
let springK = 0.03;: Sets the spring constant (0.03 for normal movement, 0.35 when snapping). Higher values = stronger pull
if (isSnapping) { springK = 0.35; snapTimer--; if (snapTimer <= 0) isSnapping = false; }: During a snap attack, increase spring force to 0.35 and count down the snap duration
let ax = dx * springK;: Calculates horizontal acceleration using spring physics (F = k * x)
let ay = dy * springK;: Calculates vertical acceleration using spring physics
tether.vx += ax;: Updates horizontal velocity by adding acceleration
tether.vy += ay;: Updates vertical velocity by adding acceleration
tether.vx *= WATER_DRAG;: Applies water drag (0.92) to slow down horizontal velocity, simulating resistance
tether.vy *= WATER_DRAG;: Applies water drag to slow down vertical velocity
tether.x += tether.vx;: Updates tether's x position by adding its velocity
tether.y += tether.vy;: Updates tether's y position by adding its velocity
for (let b of bubbles) {: Loops through each bubble in the bubbles array
b.y -= b.speed;: Moves bubble upward (negative y) at its speed
b.x += sin(frameCount * 0.05 + b.y * 0.01) * 0.5;: Adds a wavy horizontal motion to the bubble using sine wave
if (b.y < -10) { b.y = height + 10; b.x = random(width); }: When bubble floats off the top, reset it to the bottom at a random x position
spawnManager();: Calls the spawn manager to potentially create new enemies
for (let i = enemies.length - 1; i >= 0; i--) {: Loops through enemies backwards (from last to first). Going backwards allows safe removal during the loop
let dir = createVector(coreX - e.pos.x, coreY - e.pos.y);: Creates a vector pointing from the enemy toward the core
dir.normalize();: Normalizes the direction vector to length 1, so speed is controlled by e.speed
if (e.type === 'JELLY') { let pulse = 1 + sin(frameCount * 0.1 + e.offset) * 0.2; e.pos.add(dir.mult(e.speed * pulse)); }: For jellyfish, speed pulses up and down using sine wave, creating a pulsing movement
else { let wobble = createVector(-dir.y, dir.x).mult(sin(frameCount * 0.2) * 2); e.pos.add(dir.mult(e.speed).add(wobble)); }: For sharks, add a wobble perpendicular to the direction vector, creating side-to-side movement
let dCore = dist(e.pos.x, e.pos.y, coreX, coreY);: Calculates the distance from enemy to core
if (dCore < 45) { takeDamage(15); killEnemy(i, false); continue; }: If enemy is within 45 pixels of core, damage the core and remove the enemy without awarding points
let dTether = dist(e.pos.x, e.pos.y, tether.x, tether.y);: Calculates the distance from enemy to tether
let hitRad = tether.radius + e.size/2;: Calculates the collision radius (sum of tether and enemy radii)
if (isSnapping) hitRad += 20;: During a snap attack, increase the hit radius by 20 pixels for easier hits
if (dTether < hitRad) {: If enemy is within collision radius of tether
let impact = mag(tether.vx, tether.vy);: Calculates the magnitude (speed) of the tether's velocity
if (isSnapping || impact > 8) {: If snapping or moving fast enough (impact > 8), the enemy is defeated
playSFX('HIT');: Plays the hit sound effect
killEnemy(i, true);: Removes the enemy and awards points
tether.vx *= -0.5; tether.vy *= -0.5;: Bounces the tether back (reverses velocity and reduces it to 50%)
if (isSnapping) shakeScreen(10);: If snapping, add extra screen shake for impact feedback
else { e.pos.x += tether.vx; e.pos.y += tether.vy; }: If not defeated, the enemy is pushed by the tether's velocity
for (let i = particles.length - 1; i >= 0; i--) {: Loops through particles backwards for safe removal
p.life -= 4;: Reduces particle life by 4 each frame (life goes from 255 to 0)
p.pos.add(p.vel);: Moves particle by adding its velocity to position
p.vel.mult(0.95);: Slows down particle by multiplying velocity by 0.95 each frame (friction)
if (p.life <= 0) particles.splice(i, 1);: When particle life reaches 0, removes it from the array
if (shaking > 0) shaking *= 0.8;: Gradually reduces screen shake intensity by multiplying by 0.8 each frame

`spawnManager()`

spawnManager() creates enemies at an increasing rate as the score increases. Enemies spawn in a circle around the screen edge. The 'offset' property is used for animation (jellyfish pulsing, shark wobbling). The spawn rate uses map() to smoothly transition from slow spawning at low scores to fast spawning at high scores.

function spawnManager() {
  let rate = map(score, 0, 2000, 80, 25);
  if (frameCount % floor(rate) === 0) {
    let angle = random(TWO_PI);
    let rad = max(width, height) * 0.6;
    let pos = createVector(width/2 + cos(angle)*rad, height/2 + sin(angle)*rad);
    
    let type = random() < 0.3 ? 'SHARK' : 'JELLY';
    let size = type === 'JELLY' ? 30 : 20;
    let speed = type === 'JELLY' ? random(0.8, 1.5) : random(2.5, 4.0);
    
    enemies.push({
      pos: pos,
      type: type,
      size: size,
      speed: speed,
      offset: random(100),
      hp: 1
    });
  }
}

🔧 Subcomponents:

calculation Dynamic Spawn Rate let rate = map(score, 0, 2000, 80, 25);

Calculates spawn rate based on score (faster enemies as score increases)

conditional Spawn Trigger if (frameCount % floor(rate) === 0) { ... }

Spawns an enemy every 'rate' frames

calculation Spawn Position Calculation

let angle = random(TWO_PI); let rad = max(width, height) * 0.6; let pos = createVector(width/2 + cos(angle)*rad, height/2 + sin(angle)*rad);

Calculates a random position on a circle around the center of the screen

conditional Enemy Type Selection let type = random() < 0.3 ? 'SHARK' : 'JELLY';

30% chance for shark, 70% chance for jellyfish

conditional Enemy Stats Assignment let size = type === 'JELLY' ? 30 : 20; let speed = type === 'JELLY' ? random(0.8, 1.5) : random(2.5, 4.0);

Sets size and speed based on enemy type

calculation Enemy Object Creation enemies.push({ pos: pos, type: type, size: size, speed: speed, offset: random(100), hp: 1 });

Creates and adds a new enemy object to the enemies array

Line by Line:

let rate = map(score, 0, 2000, 80, 25);: Maps the score (0-2000) to a spawn rate (80-25). At score 0, spawn every 80 frames. At score 2000+, spawn every 25 frames. Higher score = faster spawning
if (frameCount % floor(rate) === 0) {: Checks if frameCount is divisible by rate. This creates a repeating spawn timer
let angle = random(TWO_PI);: Picks a random angle (0 to 2π radians = 0 to 360 degrees)
let rad = max(width, height) * 0.6;: Calculates the radius of the spawn circle as 60% of the larger screen dimension
let pos = createVector(width/2 + cos(angle)*rad, height/2 + sin(angle)*rad);: Calculates a position on the circle using trigonometry. cos and sin convert angle to x,y coordinates
let type = random() < 0.3 ? 'SHARK' : 'JELLY';: If random number is less than 0.3 (30% chance), type is 'SHARK', otherwise 'JELLY'
let size = type === 'JELLY' ? 30 : 20;: Jellyfish are 30 pixels, sharks are 20 pixels
let speed = type === 'JELLY' ? random(0.8, 1.5) : random(2.5, 4.0);: Jellyfish are slow (0.8-1.5 pixels/frame), sharks are fast (2.5-4.0 pixels/frame)
enemies.push({ pos: pos, type: type, size: size, speed: speed, offset: random(100), hp: 1 });: Creates a new enemy object with all properties and adds it to the enemies array. offset is used for animation timing

`killEnemy(index, awardedPoints)`

killEnemy() handles enemy death: creates a particle explosion with color matching the enemy type, awards points if the enemy was defeated by the player (not if it reached the core), and removes the enemy from the array. Snap attacks give a 10-point bonus, encouraging aggressive play.

function killEnemy(index, awardedPoints) {
  let e = enemies[index];
  let color = e.type === 'JELLY' ? [0, 255, 200] : [255, 100, 100];
  spawnParticles(e.pos.x, e.pos.y, color, 8);
  
  if (awardedPoints) {
    score += (e.type === 'SHARK' ? 25 : 10);
    if (isSnapping) score += 10;
  }
  
  enemies.splice(index, 1);
}

🔧 Subcomponents:

conditional Particle Color Selection let color = e.type === 'JELLY' ? [0, 255, 200] : [255, 100, 100];

Cyan particles for jellyfish, red particles for sharks

calculation Particle Explosion spawnParticles(e.pos.x, e.pos.y, color, 8);

Creates 8 particles at the enemy's position for visual feedback

conditional Score Award Logic if (awardedPoints) { score += (e.type === 'SHARK' ? 25 : 10); if (isSnapping) score += 10; }

Awards points based on enemy type and snap bonus

calculation Enemy Removal enemies.splice(index, 1);

Removes the enemy from the array

Line by Line:

let e = enemies[index];: Gets the enemy object at the specified index
let color = e.type === 'JELLY' ? [0, 255, 200] : [255, 100, 100];: Sets particle color to cyan [0, 255, 200] for jellyfish or red [255, 100, 100] for sharks
spawnParticles(e.pos.x, e.pos.y, color, 8);: Creates 8 particles at the enemy's position with the chosen color
if (awardedPoints) {: Only awards points if awardedPoints is true (enemy defeated by tether, not core hit)
score += (e.type === 'SHARK' ? 25 : 10);: Adds 25 points for shark, 10 points for jellyfish
if (isSnapping) score += 10;: Adds 10 bonus points if the enemy was defeated during a snap attack
enemies.splice(index, 1);: Removes the enemy from the array. splice(index, 1) removes 1 element at that index

`takeDamage(amt)`

takeDamage() handles core damage. It reduces health (with a minimum of 0), provides feedback (screen shake and sound), and checks for game over. When health reaches 0, it saves the high score to localStorage if the current score is higher. This is called when an enemy reaches the core.

function takeDamage(amt) {
  health = max(0, health - amt);
  shakeScreen(20);
  playSFX('DAMAGE');
  
  if (health <= 0) {
    gameState = "GAMEOVER";
    if (score > highScore) {
      highScore = score;
      localStorage.setItem("abyssalHighScore", highScore);
    }
  }
}

🔧 Subcomponents:

calculation Health Reduction health = max(0, health - amt);

Reduces health but prevents it from going below 0

calculation Damage Feedback shakeScreen(20); playSFX('DAMAGE');

Provides visual and audio feedback for taking damage

conditional Game Over Check if (health <= 0) { ... }

Ends the game and saves high score if health reaches 0

conditional High Score Saving if (score > highScore) { highScore = score; localStorage.setItem("abyssalHighScore", highScore); }

Updates and saves the high score if current score is higher

Line by Line:

health = max(0, health - amt);: Subtracts damage amount from health, but max(0, ...) ensures health never goes below 0
shakeScreen(20);: Triggers screen shake with intensity 20 for impact feedback
playSFX('DAMAGE');: Plays the damage sound effect
if (health <= 0) {: Checks if the core is destroyed (health 0 or less)
gameState = "GAMEOVER";: Changes game state to GAMEOVER, which will show the game over screen next frame
if (score > highScore) {: Checks if the current score is higher than the saved high score
highScore = score;: Updates the highScore variable
localStorage.setItem("abyssalHighScore", highScore);: Saves the new high score to browser storage so it persists after closing

`drawGame()`

drawGame() renders all game elements. It uses push/pop to manage transformations (translate, rotate). The tether line uses a quadratic curve that trails behind the velocity. The core rotates continuously and dims as health decreases. Enemies are drawn as shapes that rotate to face the core. Particles fade out by reducing their alpha value over time.

function drawGame() {
  push();
  if (shaking > 1) {
    translate(random(-shaking, shaking), random(-shaking, shaking));
  }
  
  // Bubbles
  noStroke();
  fill(100, 200, 255, 30);
  for (let b of bubbles) circle(b.x, b.y, b.size);
  
  // Tether
  noFill();
  stroke(100, 255, 200, 100);
  strokeWeight(3);
  let midX = (pointerX + tether.x) / 2 - tether.vx * 2; 
  let midY = (pointerY + tether.y) / 2 - tether.vy * 2;
  beginShape();
  vertex(pointerX, pointerY);
  quadraticVertex(midX, midY, tether.x, tether.y);
  endShape();
  
  // Lure
  noStroke();
  fill(0, 255, 200, 50);
  circle(tether.x, tether.y, tether.radius * 3 + sin(frameCount*0.2)*5);
  fill(200, 255, 255);
  circle(tether.x, tether.y, tether.radius * 2);
  
  // Core
  coreRotation += 0.01;
  push();
  translate(width/2, height/2);
  rotate(coreRotation);
  let dim = map(health, 0, 100, 50, 255);
  for(let i=0; i<5; i++) {
    let ang = (TWO_PI/5) * i;
    fill(255, 100, 150, dim);
    circle(cos(ang)*15, sin(ang)*15, 16);
  }
  noFill();
  stroke(255, 100, 150, dim * 0.5);
  strokeWeight(2);
  circle(0, 0, 55);
  pop();
  
  // Enemies
  for (let e of enemies) {
    push();
    translate(e.pos.x, e.pos.y);
    rotate(atan2(height/2 - e.pos.y, width/2 - e.pos.x));
    
    if (e.type === 'JELLY') {
      fill(0, 180, 255, 200);
      noStroke();
      arc(0, 0, e.size, e.size, PI, TWO_PI);
      stroke(0, 180, 255, 150);
      strokeWeight(2);
      let wiggle = sin(frameCount * 0.3 + e.offset) * 5;
      line(-5, 0, -5 - wiggle, 15);
      line(5, 0, 5 + wiggle, 15);
    } else {
      fill(255, 80, 80);
      noStroke();
      triangle(10, 0, -10, -8, -10, 8);
    }
    pop();
  }
  
  // Particles
  for (let p of particles) {
    fill(p.r, p.g, p.b, p.life);
    noStroke();
    circle(p.pos.x, p.pos.y, p.size);
  }
  
  pop();
  drawHUD();
}

🔧 Subcomponents:

conditional Screen Shake Application if (shaking > 1) { translate(random(-shaking, shaking), random(-shaking, shaking)); }

Applies random screen offset when shaking

for-loop Bubble Drawing for (let b of bubbles) circle(b.x, b.y, b.size);

Draws all background bubbles

calculation Tether Line Drawing beginShape(); vertex(pointerX, pointerY); quadraticVertex(midX, midY, tether.x, tether.y); endShape();

Draws a curved line from cursor to tether using quadratic curve

calculation Lure Drawing circle(tether.x, tether.y, tether.radius * 3 + sin(frameCount*0.2)*5); circle(tether.x, tether.y, tether.radius * 2);

Draws the glowing lure with pulsing outer glow

calculation Core Drawing for(let i=0; i<5; i++) { ... }

Draws 5 rotating circles around the core center

for-loop Enemy Drawing for (let e of enemies) { ... }

Draws all enemies with different shapes for jellyfish and sharks

for-loop Particle Drawing for (let p of particles) { ... }

Draws all particles with their current life as alpha

Line by Line:

push();: Saves the current drawing state (transformations, colors, etc.)
if (shaking > 1) { translate(random(-shaking, shaking), random(-shaking, shaking)); }: If shaking, randomly offsets the entire drawing to create screen shake effect
noStroke(); fill(100, 200, 255, 30);: Sets up for drawing: no outline, light blue fill with transparency
for (let b of bubbles) circle(b.x, b.y, b.size);: Draws each bubble as a circle at its position with its size
noFill(); stroke(100, 255, 200, 100); strokeWeight(3);: Sets up for tether line: no fill, cyan outline, 3 pixels thick
let midX = (pointerX + tether.x) / 2 - tether.vx * 2;: Calculates the control point for the curve. Subtracting velocity creates a trailing curve effect
let midY = (pointerY + tether.y) / 2 - tether.vy * 2;: Calculates the vertical control point for the curve
beginShape(); vertex(pointerX, pointerY); quadraticVertex(midX, midY, tether.x, tether.y); endShape();: Draws a quadratic curve from cursor to tether. quadraticVertex creates a smooth curve through the control point
noStroke(); fill(0, 255, 200, 50);: Sets up for lure glow: no outline, cyan fill with transparency
circle(tether.x, tether.y, tether.radius * 3 + sin(frameCount*0.2)*5);: Draws the outer glow circle. Size pulses using sine wave
fill(200, 255, 255); circle(tether.x, tether.y, tether.radius * 2);: Draws the inner bright lure circle
coreRotation += 0.01;: Increments the core rotation angle for continuous spinning
push(); translate(width/2, height/2); rotate(coreRotation);: Saves state, moves origin to core center, and rotates by coreRotation
let dim = map(health, 0, 100, 50, 255);: Maps health (0-100) to brightness (50-255). Lower health = darker core
for(let i=0; i<5; i++) { let ang = (TWO_PI/5) * i; fill(255, 100, 150, dim); circle(cos(ang)*15, sin(ang)*15, 16); }: Draws 5 circles evenly spaced around the core (360/5 = 72 degrees apart). Uses cos/sin to position them in a circle
noFill(); stroke(255, 100, 150, dim * 0.5); strokeWeight(2); circle(0, 0, 55);: Draws the core outline circle
pop();: Restores the drawing state (undoes translate and rotate)
for (let e of enemies) { push(); translate(e.pos.x, e.pos.y); rotate(atan2(height/2 - e.pos.y, width/2 - e.pos.x));: For each enemy, save state, move to its position, and rotate to face the core
if (e.type === 'JELLY') { fill(0, 180, 255, 200); noStroke(); arc(0, 0, e.size, e.size, PI, TWO_PI);: For jellyfish, draw the top half as an arc (semicircle)
stroke(0, 180, 255, 150); strokeWeight(2); let wiggle = sin(frameCount * 0.3 + e.offset) * 5; line(-5, 0, -5 - wiggle, 15); line(5, 0, 5 + wiggle, 15);: Draws two tentacles that wiggle using sine wave
} else { fill(255, 80, 80); noStroke(); triangle(10, 0, -10, -8, -10, 8); }: For sharks, draws a red triangle pointing right (toward the core)
pop();: Restores state (undoes translate and rotate)
for (let p of particles) { fill(p.r, p.g, p.b, p.life); noStroke(); circle(p.pos.x, p.pos.y, p.size); }: Draws each particle as a circle with color and alpha based on its life value
pop();: Restores the initial state (undoes screen shake translate)
drawHUD();: Calls the function to draw the HUD (score, stamina bar, instructions)

`drawHUD()`

drawHUD() draws the user interface: a vignette effect (dark edges), score display, stamina bar, and control instructions. The stamina bar changes color to indicate if the player has enough stamina for a snap attack. The vignette uses drawingContext (raw canvas API) for a radial gradient that p5.js doesn't have a built-in function for.

function drawHUD() {
  // Vignette
  let grad = drawingContext.createRadialGradient(
    width/2, height/2, height*0.3, width/2, height/2, height*0.8
  );
  grad.addColorStop(0, "rgba(0,0,0,0)");
  grad.addColorStop(1, "rgba(0,0,5,0.8)"); 
  drawingContext.fillStyle = grad;
  drawingContext.fillRect(0,0,width,height);
  
  fill(255);
  noStroke();
  textSize(20);
  textAlign(LEFT, TOP);
  text("DEPTH: " + score + "m", 20, 20);
  
  // Stamina Bar
  let barW = 200, barH = 10;
  let barX = width/2 - barW/2, barY = height - 40;
  
  fill(0, 50, 50);
  rect(barX, barY, barW, barH, 5);
  let fillW = map(stamina, 0, 100, 0, barW);
  fill(stamina >= SNAP_COST ? color(0, 255, 255) : color(255, 50, 50));
  rect(barX, barY, fillW, barH, 5);
  
  textAlign(CENTER, BOTTOM);
  textSize(14);
  fill(150, 200, 200);
  text(isMobile ? "DRAG to Swing • TAP to Snap" : "MOUSE to Swing • CLICK to Snap", width/2, barY - 5);
}

🔧 Subcomponents:

calculation Vignette Effect

let grad = drawingContext.createRadialGradient(...); grad.addColorStop(...); drawingContext.fillStyle = grad; drawingContext.fillRect(0,0,width,height);

Creates a dark gradient around the edges of the screen

calculation Score Display fill(255); noStroke(); textSize(20); textAlign(LEFT, TOP); text("DEPTH: " + score + "m", 20, 20);

Displays the current score in the top-left corner

calculation Stamina Bar Drawing

fill(0, 50, 50); rect(barX, barY, barW, barH, 5); let fillW = map(stamina, 0, 100, 0, barW); fill(...); rect(barX, barY, fillW, barH, 5);

Draws the stamina bar with background and fill

conditional Stamina Bar Color fill(stamina >= SNAP_COST ? color(0, 255, 255) : color(255, 50, 50));

Changes bar color to cyan when ready to snap, red when not enough stamina

calculation Control Instructions text(isMobile ? "DRAG to Swing • TAP to Snap" : "MOUSE to Swing • CLICK to Snap", width/2, barY - 5);

Displays different instructions for mobile vs desktop

Line by Line:

let grad = drawingContext.createRadialGradient(width/2, height/2, height*0.3, width/2, height/2, height*0.8);: Creates a radial gradient (circle) centered at screen center, starting at radius 30% and ending at 80%
grad.addColorStop(0, "rgba(0,0,0,0)");: At the center (0), the gradient is transparent black
grad.addColorStop(1, "rgba(0,0,5,0.8)");: At the edges (1), the gradient is dark blue with 80% opacity
drawingContext.fillStyle = grad;: Sets the fill style to the gradient
drawingContext.fillRect(0,0,width,height);: Fills the entire canvas with the gradient, creating a vignette effect
fill(255); noStroke(); textSize(20); textAlign(LEFT, TOP);: Sets up text: white color, no outline, 20px size, aligned to top-left
text("DEPTH: " + score + "m", 20, 20);: Displays the score as 'DEPTH: [score]m' at position (20, 20)
let barW = 200, barH = 10;: Sets stamina bar width to 200 pixels and height to 10 pixels
let barX = width/2 - barW/2, barY = height - 40;: Positions the bar at the bottom center of the screen (40 pixels from bottom)
fill(0, 50, 50); rect(barX, barY, barW, barH, 5);: Draws the dark background of the stamina bar with rounded corners (5px radius)
let fillW = map(stamina, 0, 100, 0, barW);: Maps stamina (0-100) to bar width (0-200 pixels)
fill(stamina >= SNAP_COST ? color(0, 255, 255) : color(255, 50, 50));: If stamina is enough for snap (>= 25), use cyan. Otherwise use red
rect(barX, barY, fillW, barH, 5);: Draws the filled portion of the stamina bar
textAlign(CENTER, BOTTOM); textSize(14); fill(150, 200, 200);: Sets up text: centered horizontally, bottom-aligned, 14px size, light blue color
text(isMobile ? "DRAG to Swing • TAP to Snap" : "MOUSE to Swing • CLICK to Snap", width/2, barY - 5);: Displays different instructions based on whether the player is on mobile or desktop

`drawMenu(title, subtitle)`

drawMenu() displays the start and game over screens. The title has a cyan glow effect using drawingContext.shadowBlur and shadowColor. Font size is responsive (smaller on mobile, larger on desktop). The high score is displayed in green if it exists.

function drawMenu(title, subtitle) {
  fill(200, 255, 255);
  textSize(width < 600 ? 32 : 64);
  drawingContext.shadowBlur = 30;
  drawingContext.shadowColor = "#00FFFF";
  text(title, width/2, height/2 - 50);
  
  drawingContext.shadowBlur = 0;
  textSize(20);
  fill(255);
  text(subtitle, width/2, height/2 + 50);
  
  if (highScore > 0) {
    fill(100, 255, 150);
    text("DEEPEST DIVE: " + highScore + "m", width/2, height/2 + 90);
  }
}

🔧 Subcomponents:

calculation Title Text Drawing

fill(200, 255, 255); textSize(width < 600 ? 32 : 64); drawingContext.shadowBlur = 30; drawingContext.shadowColor = "#00FFFF"; text(title, width/2, height/2 - 50);

Draws the main title with cyan glow effect, responsive font size

calculation Subtitle Text Drawing drawingContext.shadowBlur = 0; textSize(20); fill(255); text(subtitle, width/2, height/2 + 50);

Draws the subtitle without shadow

conditional High Score Display if (highScore > 0) { fill(100, 255, 150); text("DEEPEST DIVE: " + highScore + "m", width/2, height/2 + 90); }

Displays the high score if one exists

Line by Line:

fill(200, 255, 255);: Sets text color to light cyan
textSize(width < 600 ? 32 : 64);: Uses 32px font on small screens, 64px on large screens (responsive design)
drawingContext.shadowBlur = 30;: Sets up a shadow blur of 30 pixels for glow effect
drawingContext.shadowColor = "#00FFFF";: Sets the shadow color to cyan, creating a glowing effect
text(title, width/2, height/2 - 50);: Draws the title text centered horizontally, 50 pixels above the screen center
drawingContext.shadowBlur = 0;: Removes the shadow for the subtitle
textSize(20);: Sets subtitle font size to 20 pixels
fill(255);: Sets text color to white
text(subtitle, width/2, height/2 + 50);: Draws the subtitle centered horizontally, 50 pixels below the screen center
if (highScore > 0) {: Only shows high score if one has been set (greater than 0)
fill(100, 255, 150);: Sets text color to light green
text("DEEPEST DIVE: " + highScore + "m", width/2, height/2 + 90);: Displays the high score centered horizontally, 90 pixels below screen center

`spawnParticles(x, y, rgb, count)`

spawnParticles() creates explosion effects. It takes a position, color array, and count. Each particle gets a random direction and speed, random size, and starts with full life (255). The particles are drawn with their life value as alpha, so they fade out. p5.Vector.random2D() creates a random unit vector in any direction.

function spawnParticles(x, y, rgb, count) {
  for(let i=0; i<count; i++) {
    particles.push({
      pos: createVector(x, y),
      vel: p5.Vector.random2D().mult(random(2, 6)),
      size: random(2, 6),
      life: 255,
      r: rgb[0], g: rgb[1], b: rgb[2]
    });
  }
}

🔧 Subcomponents:

for-loop Particle Creation Loop for(let i=0; i<count; i++) { particles.push({...}); }

Creates 'count' particles at the specified position

calculation Random Velocity vel: p5.Vector.random2D().mult(random(2, 6))

Gives each particle a random direction and speed

calculation Color Assignment r: rgb[0], g: rgb[1], b: rgb[2]

Stores the RGB color values from the parameter

Line by Line:

for(let i=0; i<count; i++) {: Loops 'count' times to create that many particles
particles.push({: Creates a new particle object and adds it to the particles array
pos: createVector(x, y),: Sets the particle's starting position to the specified x, y coordinates
vel: p5.Vector.random2D().mult(random(2, 6)),: Creates a random 2D direction vector and multiplies it by a random speed (2-6 pixels/frame)
size: random(2, 6),: Gives each particle a random size between 2 and 6 pixels
life: 255,: Sets initial life to 255 (maximum). Life decreases by 4 each frame until it reaches 0
r: rgb[0], g: rgb[1], b: rgb[2]: Stores the red, green, and blue components from the rgb array parameter

`shakeScreen(amt)`

shakeScreen() is a simple helper that sets the screen shake intensity. The actual shaking effect is applied in drawGame() using translate(random(-shaking, shaking), ...). The shaking value decays each frame (multiplied by 0.8) in updateGame().

function shakeScreen(amt) {
  shaking = amt;
}

🔧 Subcomponents:

calculation Screen Shake Intensity shaking = amt;

Sets the screen shake intensity

Line by Line:

shaking = amt;: Sets the shaking variable to the amount parameter. The shaking variable is then used in drawGame() to apply a random offset

`triggerSnap()`

triggerSnap() activates the snap attack if the player has enough stamina. It deducts stamina, activates the snap (which increases spring force and hit radius), and provides feedback (sound, screen shake, particles). The snap only lasts 8 frames, after which isSnapping becomes false.

function triggerSnap() {
  if (stamina >= SNAP_COST) {
    stamina -= SNAP_COST;
    isSnapping = true;
    snapTimer = 8;
    playSFX('SNAP');
    shakeScreen(5);
    spawnParticles(pointerX, pointerY, [255, 255, 255], 10);
  }
}

🔧 Subcomponents:

conditional Stamina Check if (stamina >= SNAP_COST) { ... }

Only allows snap if player has enough stamina

calculation Snap Activation stamina -= SNAP_COST; isSnapping = true; snapTimer = 8;

Deducts stamina, activates snap, and sets duration

calculation Snap Feedback playSFX('SNAP'); shakeScreen(5); spawnParticles(pointerX, pointerY, [255, 255, 255], 10);

Provides audio, visual, and particle feedback

Line by Line:

if (stamina >= SNAP_COST) {: Checks if the player has at least 25 stamina (SNAP_COST)
stamina -= SNAP_COST;: Deducts 25 stamina from the player
isSnapping = true;: Sets the isSnapping flag to true, which increases spring force and hit radius
snapTimer = 8;: Sets the snap duration to 8 frames (about 0.13 seconds at 60 FPS)
playSFX('SNAP');: Plays the snap sound effect (laser sweep)
shakeScreen(5);: Triggers screen shake with intensity 5
spawnParticles(pointerX, pointerY, [255, 255, 255], 10);: Creates 10 white particles at the cursor position for visual feedback

`handleInteract()`

handleInteract() is called on every click/tap. It handles two things: starting the game (and audio) on first interaction, and triggering snap attacks during gameplay. This is the main entry point for player input.

function handleInteract() {
  ensureAudioStarted();
  
  if (gameState !== "PLAY") {
    if (gameState === "GAMEOVER") resetGame();
    gameState = "PLAY";
  } else {
    triggerSnap();
  }
}

🔧 Subcomponents:

calculation Audio Initialization ensureAudioStarted();

Ensures audio context is started on first user interaction

conditional Game State Transition if (gameState !== "PLAY") { if (gameState === "GAMEOVER") resetGame(); gameState = "PLAY"; }

Starts or restarts the game

conditional Snap Trigger else { triggerSnap(); }

If already playing, trigger a snap attack

Line by Line:

ensureAudioStarted();: Calls ensureAudioStarted() to activate audio on first user interaction
if (gameState !== "PLAY") {: If the game is not currently playing (START or GAMEOVER state)
if (gameState === "GAMEOVER") resetGame();: If coming from game over, reset all game variables
gameState = "PLAY";: Changes game state to PLAY, which starts the game
else { triggerSnap(); }: If already playing, trigger a snap attack instead

`mousePressed()`

mousePressed() is a p5.js event function called when the mouse is clicked. It updates the cursor position and calls handleInteract(). On mobile, this function returns early because touch events are used instead.

function mousePressed() {
  if (isMobile) return;
  handleInteract();
  pointerX = mouseX;
  pointerY = mouseY;
}

🔧 Subcomponents:

conditional Mobile Guard if (isMobile) return;

Prevents mouse input on mobile devices

calculation Interaction Handler handleInteract();

Calls the interaction handler

calculation Pointer Position Update pointerX = mouseX; pointerY = mouseY;

Updates cursor position

Line by Line:

if (isMobile) return;: Exits the function early if on mobile. Mobile uses touch events instead
handleInteract();: Calls handleInteract() to process the click
pointerX = mouseX;: Updates pointerX to the current mouse x position
pointerY = mouseY;: Updates pointerY to the current mouse y position

`mouseDragged()`

mouseDragged() is called continuously while the mouse button is held down. It updates the cursor position so the tether follows the mouse smoothly.

function mouseDragged() {
  if (isMobile) return;
  pointerX = mouseX;
  pointerY = mouseY;
}

🔧 Subcomponents:

calculation Drag Pointer Update pointerX = mouseX; pointerY = mouseY;

Updates pointer position while dragging

Line by Line:

if (isMobile) return;: Exits early on mobile devices
pointerX = mouseX;: Updates pointer x position while dragging
pointerY = mouseY;: Updates pointer y position while dragging

`mouseMoved()`

mouseMoved() is called whenever the mouse moves, even without clicking. It updates the cursor position so the tether follows the mouse at all times.

function mouseMoved() {
  if (isMobile) return;
  pointerX = mouseX;
  pointerY = mouseY;
}

🔧 Subcomponents:

calculation Move Pointer Update pointerX = mouseX; pointerY = mouseY;

Updates pointer position when mouse moves

Line by Line:

if (isMobile) return;: Exits early on mobile devices
pointerX = mouseX;: Updates pointer x position when mouse moves
pointerY = mouseY;: Updates pointer y position when mouse moves

`touchStarted()`

touchStarted() is called when a touch begins on mobile. It updates the pointer position to the first touch and calls handleInteract(). Returning false prevents the page from scrolling, which is important for a full-screen game.

function touchStarted() {
  if (touches.length > 0) {
    pointerX = touches[0].x;
    pointerY = touches[0].y;
  }
  handleInteract();
  return false; // Prevents scrolling
}

🔧 Subcomponents:

conditional Touch Position Update if (touches.length > 0) { pointerX = touches[0].x; pointerY = touches[0].y; }

Updates pointer to the first touch position

calculation Touch Interaction handleInteract();

Handles the tap interaction

calculation Scroll Prevention return false;

Prevents the page from scrolling on touch

Line by Line:

if (touches.length > 0) {: Checks if there is at least one touch on the screen
pointerX = touches[0].x;: Updates pointer x to the first touch's x position
pointerY = touches[0].y;: Updates pointer y to the first touch's y position
handleInteract();: Calls handleInteract() to process the tap
return false;: Returning false prevents the browser's default touch behavior (scrolling)

`touchMoved()`

touchMoved() is called continuously while a touch is dragging. It updates the pointer position so the tether follows the finger smoothly on mobile.

function touchMoved() {
  if (touches.length > 0) {
    pointerX = touches[0].x;
    pointerY = touches[0].y;
  }
  return false; // Prevents scrolling
}

🔧 Subcomponents:

conditional Touch Drag Update if (touches.length > 0) { pointerX = touches[0].x; pointerY = touches[0].y; }

Updates pointer while dragging on touch

Line by Line:

if (touches.length > 0) {: Checks if there is an active touch
pointerX = touches[0].x;: Updates pointer x while dragging
pointerY = touches[0].y;: Updates pointer y while dragging
return false;: Prevents scrolling during touch drag

`windowResized()`

windowResized() is called by p5.js whenever the window is resized. It resizes the canvas and resets the tether and pointer positions to the center of the new screen. This ensures the game works correctly on any screen size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  tether.x = width/2; 
  tether.y = height/2 + 100;
  pointerX = width/2;
  pointerY = height/2;
}

🔧 Subcomponents:

calculation Canvas Resize resizeCanvas(windowWidth, windowHeight);

Resizes the canvas to match the new window size

calculation Position Reset tether.x = width/2; tether.y = height/2 + 100; pointerX = width/2; pointerY = height/2;

Resets tether and pointer positions to center for the new screen size

Line by Line:

resizeCanvas(windowWidth, windowHeight);: Resizes the p5.js canvas to match the new window dimensions
tether.x = width/2;: Resets tether x position to the center of the new canvas
tether.y = height/2 + 100;: Resets tether y position to 100 pixels below the center
pointerX = width/2;: Resets pointer x position to the center
pointerY = height/2;: Resets pointer y position to the center

📦 Key Variables

gameState string

Tracks the current game state: 'START' (menu), 'PLAY' (active game), or 'GAMEOVER' (game ended)

let gameState = "START";

score number

Stores the player's current score (depth in meters). Increases when enemies are defeated

let score = 0;

highScore number

Stores the highest score achieved across all games. Loaded from and saved to localStorage

let highScore = 0;

health number

Stores the core's health (0-100). When it reaches 0, the game ends

let health = 100;

stamina number

Stores the player's stamina (0-100). Required to perform snap attacks. Regenerates over time

let stamina = 100;

tether object

Object storing the tether's properties: x, y position, vx, vy velocity, and radius (size)

let tether = { x: 0, y: 0, vx: 0, vy: 0, radius: 18 };

coreRotation number

Tracks the rotation angle of the core. Incremented each frame for continuous spinning

let coreRotation = 0;

enemies array

Array storing all active enemy objects. Each enemy has pos, type, size, speed, offset, and hp

let enemies = [];

particles array

Array storing all active particle objects. Each particle has pos, vel, size, life, and RGB color

let particles = [];

bubbles array

Array storing decorative background bubbles. Each bubble has x, y, size, and speed

let bubbles = [];

WATER_DRAG number

Physics constant (0.92) that slows down the tether's velocity each frame, simulating water resistance

const WATER_DRAG = 0.92;

SNAP_COST number

Amount of stamina (25) required to perform a snap attack

const SNAP_COST = 25;

RECHARGE_RATE number

Amount of stamina (0.6) regenerated per frame

const RECHARGE_RATE = 0.6;

audioInit boolean

Flag indicating whether the audio context has been initialized. Set to true after first user interaction

let audioInit = false;

musicOscA p5.Oscillator

Square wave oscillator for the main melody line

let musicOscA = new p5.Oscillator('square');

musicOscB p5.Oscillator

Square wave oscillator for harmony/arpeggio notes

let musicOscB = new p5.Oscillator('square');

bassOsc p5.Oscillator

Sawtooth wave oscillator for deep bass notes

let bassOsc = new p5.Oscillator('sawtooth');

noiseOsc p5.Noise

Noise oscillator for drum and explosion sound effects

let noiseOsc = new p5.Noise('white');

sfxOsc p5.Oscillator

Triangle wave oscillator for game sound effects (snap, hit, damage)

let sfxOsc = new p5.Oscillator('triangle');

seqStep number

Current step in the 16-step music sequence (0-15)

let seqStep = 0;

frameCounter number

Counter used to trigger music steps at the correct tempo

let frameCounter = 0;

TEMPO number

Frames per music step (10). Lower values = faster music

const TEMPO = 10;

MELODY array

Array of 16 note frequencies (Hz) for the main melody. 0 means rest (silence)

const MELODY = [220, 0, 261, 0, 329, 0, 261, 0, ...];

BASS array

Array of 8 bass note frequencies (Hz) that play slower than the melody

const BASS = [55, 55, 55, 55, 65, 65, 49, 49];

pointerX number

Current horizontal position of the cursor/touch. Updated by mouse/touch events

let pointerX = 0;

pointerY number

Current vertical position of the cursor/touch. Updated by mouse/touch events

let pointerY = 0;

isMobile boolean

Flag indicating whether the device is mobile. Used to choose between mouse and touch input

let isMobile = /Mobi|Android|iP(ad|hone|od)|Tablet/i.test(navigator.userAgent);

shaking number

Current screen shake intensity. Decays each frame and is used to offset the entire drawing

let shaking = 0;

isSnapping boolean

Flag indicating whether a snap attack is currently active. Increases spring force and hit radius

let isSnapping = false;

snapTimer number

Countdown timer for snap attack duration (8 frames). When it reaches 0, snap ends

let snapTimer = 0;

🧪 Try This!

Experiment with the code by making these changes:

Change SNAP_COST from 25 to 10 to make snap attacks cheaper and more frequent. See how this changes the difficulty and gameplay feel.
Modify WATER_DRAG from 0.92 to 0.95 or 0.85 to make the tether feel lighter or heavier. Higher values = more floaty, lower values = more responsive.
Change the MELODY array to create a different 8-bit tune. Try replacing frequencies with values like 330, 392, 440, or 494 Hz for different notes.
In spawnManager(), change the spawn rate calculation to 'let rate = map(score, 0, 2000, 60, 10);' to make enemies spawn faster as you progress.
Modify the enemy movement in updateGame() to make sharks move in circles instead of wobbling. Replace the wobble line with: 'let wobble = createVector(cos(frameCount * 0.05) * 3, sin(frameCount * 0.05) * 3);'
Change the core's color in drawGame() from [255, 100, 150] to [100, 200, 255] to make it cyan instead of red.
Increase the number of bubbles created in resetGame() from 30 to 50 or 100 to make the background more active.
In triggerSnap(), change snapTimer from 8 to 15 to make snap attacks last longer and be more powerful.
Modify the stamina recharge in updateGame() from RECHARGE_RATE to RECHARGE_RATE * 2 to make stamina regenerate twice as fast.
Change the particle count in spawnParticles() calls from 8 to 15 or 20 to create more dramatic explosions when enemies are defeated.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG updateGame() - enemy collision

When an enemy hits the core, it's removed but its velocity might push it through the core boundary before being detected, allowing multiple hits in one frame

💡 Add a 'lastHitFrame' property to enemies and check if they were hit this frame before applying damage again: 'if (dCore < 45 && e.lastHitFrame !== frameCount) { takeDamage(15); e.lastHitFrame = frameCount; }'

BUG spawnManager()

The spawn rate can become very fast at high scores (25 frames), potentially causing performance issues with many enemies

💡 Add a minimum spawn rate: 'let rate = map(score, 0, 2000, 80, 25); rate = max(rate, 30);' to prevent spawning faster than every 30 frames

PERFORMANCE updateGame() - enemy loop

Looping backwards through enemies array is good for removal, but dist() is called twice per enemy (core and tether), which is expensive

💡 Cache distance calculations: 'let dCore = dist(e.pos.x, e.pos.y, coreX, coreY); let dTether = dist(e.pos.x, e.pos.y, tether.x, tether.y);' (already done, but could optimize with squared distances to avoid sqrt)

PERFORMANCE draw() - background

Drawing a semi-transparent rectangle every frame with fill() and rect() is less efficient than using background() with alpha

💡 Replace the background code with: 'background(5, 10, 20, 80);' which is more optimized internally

STYLE updateGame() - physics calculations

Spring physics constants (springK = 0.03 or 0.35) are magic numbers with no explanation

💡 Define constants at the top: 'const NORMAL_SPRING = 0.03; const SNAP_SPRING = 0.35;' and use them in the code for clarity

FEATURE game mechanics

There's no difficulty progression beyond spawn rate. Game becomes repetitive at high scores

💡 Add progressive difficulty: increase enemy speed or health based on score, add new enemy types at certain thresholds, or increase core damage taken

FEATURE audio system

Music plays the same 16-step loop continuously without variation

💡 Create multiple MELODY and BASS patterns and switch between them every 32 steps (2 loops) to add variety

BUG drawGame() - tether curve

The quadratic curve control point calculation uses tether velocity, which can create strange curves when velocity is very high

💡 Clamp the velocity influence: 'let midX = (pointerX + tether.x) / 2 - constrain(tether.vx * 2, -10, 10);' to limit extreme curves

STYLE all functions

No input validation - functions assume parameters are valid types and ranges

💡 Add basic checks like 'if (typeof x !== "number" || typeof y !== "number") return;' in drawing functions to prevent errors

FEATURE game mechanics

No feedback for near-misses or close calls with enemies

💡 Add a warning effect when enemies get close to the core (e.g., increase core pulse speed or change color when enemies are near)

Preview

Code flow diagram showing the structure of SpaceTeather - Code flow showing setup, draw, resetgame, setupaudio, ensureaudiosstarted, updatemusic, playdrum, playsfx, silencemusic, updategame, spawnmanager, killenemy, takedamage, drawgame, drawhud, drawmenu, spawnparticles, shakescreen, triggersnap, handleinteract, mousepressed, mousedragged, mousemoved, touchstarted, touchmoved, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 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