HappyNewYear2026

This is an ambitious and creative prompt! I'm excited to help you bring the "2025 Rewind Ball Drop" to life. This sketch will involve multiple animated elements, object-oriented design, text rendering, and state management.

Due to the complexity of the prompt, I'll provide a comprehensive solution that includes the main interactive elements and visual effects. I will use simple p5.js shapes as placeholders for the iconic images (Blue Ghost, Green Turtle, etc.) since I cannot create or load external image files. You can replace these placeholder drawing functions with `image()` calls once you have your assets ready.

I will also incorporate the suggested color palette and the interactive bonus ideas (click for fireworks, slider for speed, mute button) to make the sketch more engaging.

Here's the complete code for your p5.js project:

---

### `sketch.js`

```js
// ============================================================
// 2025 Rewind Ball Drop - New Year's Eve Sketch
// Concept: A glittering Times Square-style ball drops as midnight approaches,
// cycling through iconic visual moments from 2025. When the ball reaches
// the bottom, confetti explodes with "2026" and fireworks burst.
// ============================================================

// === Global Variables ===
let ball;
let particleSystems = [];
let tickerTape;
let countdownTimer;
let confettiSystem;
let fireworkSystem;
let ballDropSpeed = 0.005; // Default drop speed
let dropSpeedSlider;
let muteButton;
let isMuted = false;

// Fonts
let montserratBold; // For "2026" and countdown numbers
let robotoRegular; // For ticker tape

// Color Palette
const midnightBlue = '#0a1628';
const gold = '#ffd700';
const champagne = '#c9a227';
const magenta = '#ff00ff';
const seaGreen = '#2ecc71';
const silver = '#c0c0c0';

// Sketch States
const PRE_DROP = 0;
const DROPPING = 1;
const EXPLOSION = 2;
let currentState = PRE_DROP;

// Ball Icons (Placeholders - replace with image loading)
let ballIcons = []; // Array to hold p5.Image objects or functions for drawing icons
const ICON_CHANGE_INTERVAL = 300; // Frames between icon changes

// Particle Icon Placeholders
let bitcoinIcon; // Placeholder for Bitcoin symbol
let musicNoteIcon; // Placeholder for Music Note symbol

// Countdown Icon Placeholders
let countdownIcons = []; // Array to hold p5.Image objects or functions for drawing icons for countdown flashbacks

// Audio (Optional - using Tone.js)
let fireworksSynth;
let countdownBeep;

// === Preload Assets ===
function preload() {
// Load Fonts from Fontsource CDN
// Montserrat Bold for main text and countdown
montserratBold = loadFont('https://unpkg.com/@fontsource/montserrat@latest/files/montserrat-latin-700-normal.woff');
// Roboto Regular for ticker tape
robotoRegular = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');

// --- Ball Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// In a real sketch, you would load p5.Image objects like this:
// ballIcons[0] = loadImage('path/to/blue_ghost.png');
// ballIcons[1] = loadImage('path/to/green_turtle.png');
// ...and then draw them in the Ball.display() method using image()

ballIcons = [
// 0: Blue Ghost lunar lander silhouette
(size) => {
fill(silver);
noStroke();
triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3);
rectMode(CENTER);
rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 1: Green turtle
(size) => {
fill(seaGreen);
noStroke();
ellipse(0, 0, size * 0.7, size * 0.5); // Body
ellipse(0, -size * 0.2, size * 0.3, size * 0.3); // Head
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 1
rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 2
},
// 2: Solar panels
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
rect(0, 0, size * 0.8, size * 0.6);
fill(midnightBlue);
rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta);
strokeWeight(2);
line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25);
line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15);
line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 3: Cowboy hat
(size) => {
fill(champagne);
noStroke();
ellipse(0, size * 0.2, size * 0.8, size * 0.3); // Brim
rectMode(CENTER);
rect(0, -size * 0.1, size * 0.5, size * 0.4, 5); // Crown
fill(gold);
rect(0, size * 0.05, size * 0.5, size * 0.1); // Band
},
// 4: Colossal squid tentacle
(size) => {
fill(silver);
noStroke();
rectMode(CORNER);
beginShape();
vertex(-size * 0.2, -size * 0.4);
bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4);
bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4);
endShape(CLOSE);
fill(gold);
ellipse(-size * 0.1, -size * 0.2, size * 0.1);
ellipse(size * 0.1, 0, size * 0.1);
ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold);
noStroke();
rectMode(CENTER);
// Main key
ellipse(0, -size * 0.2, size * 0.2, size * 0.2); // Ring
rect(0, 0, size * 0.05, size * 0.4); // Shaft
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); // Bit
// Cross key
rect(0, 0, size * 0.4, size * 0.05);
rect(0, 0, size * 0.05, size * 0.4);
// USA flag detail
fill(255);
rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15);
fill(255, 0, 0);
rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 6: Football + heart (Taylor Swift & Travis Kelce engaged)
(size) => {
fill(139, 69, 19); // Brown
noStroke();
ellipse(0, 0, size * 0.6, size * 0.3); // Football
fill(255);
rectMode(CENTER);
rect(0, 0, size * 0.4, size * 0.05); // Laces
rect(0, -size * 0.05, size * 0.05, size * 0.05);
rect(0, size * 0.05, size * 0.05, size * 0.05);
fill(255, 0, 0); // Red heart
beginShape();
vertex(0, size * 0.2);
bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2);
bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2);
endShape(CLOSE);
},
// 7: AI circuit patterns (GPT-5, $1.5T AI investment boom)
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
for (let i = 0; i < 5; i++) {
rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1);
}
stroke(magenta);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4),
random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4));
}
}
];

// --- Particle Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// bitcoinIcon = loadImage('path/to/bitcoin.png');
// musicNoteIcon = loadImage('path/to/music_note.png');
bitcoinIcon = (size) => {
fill(gold);
noStroke();
rectMode(CENTER);
rect(0, 0, size, size);
fill(0);
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(size * 0.8);
text('₿', 0, 0);
};
musicNoteIcon = (size) => {
fill(255);
noStroke();
ellipse(0, size * 0.2, size * 0.5, size * 0.3);
rectMode(CENTER);
rect(size * 0.15, -size * 0.05, size * 0.1, size * 0.5);
line(size * 0.15, -size * 0.3, size * 0.4, -size * 0.3);
};

// --- Countdown Icons (Replace with your actual images) ---
// For each number from 10 down to 1, define an icon or drawing function
// countdownIcons[0] = loadImage('path/to/icon_for_10.png');
// countdownIcons[1] = loadImage('path/to/icon_for_9.png');
// ...
countdownIcons = [
// 10: Blue Ghost lunar lander
(size) => {
fill(silver); noStroke(); triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3); rectMode(CENTER); rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 9: Green turtle
(size) => {
fill(seaGreen); noStroke(); ellipse(0, 0, size * 0.7, size * 0.5); ellipse(0, -size * 0.2, size * 0.3, size * 0.3);
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5);
},
// 8: Solar panels
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.8, size * 0.6); fill(midnightBlue); rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta); strokeWeight(2); line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25); line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15); line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 7: Cowboy hat
(size) => {
fill(champagne); noStroke(); ellipse(0, size * 0.2, size * 0.8, size * 0.3); rectMode(CENTER); rect(0, -size * 0.1, size * 0.5, size * 0.4, 5);
fill(gold); rect(0, size * 0.05, size * 0.5, size * 0.1);
},
// 6: Colossal squid tentacle
(size) => {
fill(silver); noStroke(); rectMode(CORNER); beginShape(); vertex(-size * 0.2, -size * 0.4); bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4); bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4); endShape(CLOSE);
fill(gold); ellipse(-size * 0.1, -size * 0.2, size * 0.1); ellipse(size * 0.1, 0, size * 0.1); ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold); noStroke(); rectMode(CENTER); ellipse(0, -size * 0.2, size * 0.2, size * 0.2); rect(0, 0, size * 0.05, size * 0.4);
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); rect(0, 0, size * 0.4, size * 0.05); rect(0, 0, size * 0.05, size * 0.4);
fill(255); rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15); fill(255, 0, 0); rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 4: Football + heart
(size) => {
fill(139, 69, 19); noStroke(); ellipse(0, 0, size * 0.6, size * 0.3); fill(255); rectMode(CENTER); rect(0, 0, size * 0.4, size * 0.05);
rect(0, -size * 0.05, size * 0.05, size * 0.05); rect(0, size * 0.05, size * 0.05, size * 0.05); fill(255, 0, 0); beginShape();
vertex(0, size * 0.2); bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2); bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2); endShape(CLOSE);
},
// 3: AI circuit patterns
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); for (let i = 0; i < 5; i++) { rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1); }
stroke(magenta); strokeWeight(2); for (let i = 0; i < 10; i++) { line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4)); }
},
// 2: Confetti (generic celebration)
(size) => {
fill(gold); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.6, size * 0.6);
fill(seaGreen); rect(-size * 0.15, -size * 0.15, size * 0.3, size * 0.3);
fill(magenta); rect(size * 0.15, size * 0.15, size * 0.3, size * 0.3);
},
// 1: Firework (generic explosion)
(size) => {
fill(gold); noStroke(); ellipse(0, 0, size * 0.8, size * 0.8);
fill(magenta); ellipse(-size * 0.2, -size * 0.2, size * 0.3, size * 0.3);
fill(seaGreen); ellipse(size * 0.2, size * 0.2, size * 0.3, size * 0.3);
}
];

// --- Audio Setup (Tone.js) ---
// Create a PolySynth for fireworks
fireworksSynth = new Tone.PolySynth(Tone.Synth, {
oscillator: { type: "square" },
envelope: { attack: 0.05, decay: 0.2, sustain: 0.1, release: 0.5 },
volume: -10
}).toDestination();

// Create a SimpleSynth for countdown beep
countdownBeep = new Tone.Synth({
oscillator: { type: "sine" },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.1 },
volume: -10
}).toDestination();
}

// === Setup Function ===
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100); // Using HSB for easier color manipulation
noStroke();

// Initialize main objects
ball = new Ball();
tickerTape = new TickerTape();
countdownTimer = new Countdown();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();

// Initialize particle systems
particleSystems.push(new ParticleSystem(bitcoinIcon, color(gold), 0.5)); // Bitcoin particles
particleSystems.push(new ParticleSystem(musicNoteIcon, color(255), 0.5)); // Music notes
particleSystems.push(new ParticleSystem(null, color(20, 100, 100), 0.8, true)); // Flame particles
particleSystems.push(new ParticleSystem(null, color(120, 100, 100), 0.6, false, true)); // Lightning bolts

// Create UI elements
createUI();
}

// === Draw Function ===
function draw() {
// Background: Starry NYC night sky
background(midnightBlue);

// Update and display ticker tape
tickerTape.update();
tickerTape.display();

switch (currentState) {
case PRE_DROP:
// Display initial "Happy New Year!" or "Get Ready!" message
displayPreDropMessage();
break;

case DROPPING:
// Update and display ball
ball.update();
ball.display();

// Update and display particles
for (let ps of particleSystems) {
ps.update();
ps.display();
}

// Update and display countdown
countdownTimer.update();
countdownTimer.display();

// Check for state transition to EXPLOSION
if (ball.dropProgress >= 1) {
currentState = EXPLOSION;
initExplosion();
}
break;

case EXPLOSION:
// Display "2026"
display2026();

// Update and display confetti
confettiSystem.update();
confettiSystem.display();

// Update and display fireworks
fireworkSystem.update();
fireworkSystem.display();

// Optionally, transition back to PRE_DROP after some time
if (frameCount % 600 === 0) { // After about 10 seconds of explosion
resetSketch();
}
break;
}
}

// === UI Elements ===
function createUI() {
// Slider for ball drop speed
dropSpeedSlider = createSlider(0.001, 0.01, ballDropSpeed, 0.0005);
dropSpeedSlider.position(10, 10);
dropSpeedSlider.style('width', '150px');
dropSpeedSlider.input(() => {
ballDropSpeed = dropSpeedSlider.value();
if (currentState === DROPPING) ball.dropSpeed = ballDropSpeed;
});

// Mute button
muteButton = createButton('Mute');
muteButton.position(180, 10);
muteButton.mousePressed(toggleMute);
}

function toggleMute() {
isMuted = !isMuted;
muteButton.html(isMuted ? 'Unmute' : 'Mute');
Tone.Destination.mute = isMuted; // Mute/unmute all Tone.js audio
}

// === Mouse Press Interaction (Launch extra fireworks) ===
function mousePressed() {
if (currentState === EXPLOSION) {
fireworkSystem.addFirework(mouseX, mouseY, 0); // Launch a firework at mouse position
} else if (currentState === PRE_DROP) {
// Start the ball drop on click/tap
currentState = DROPPING;
ball.startDrop();
countdownTimer.startCountdown();
}
}

// === State-Specific Displays ===
function displayPreDropMessage() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.08);
fill(gold);
text("Click or Tap to Start", width / 2, height / 2 - height * 0.1);
textSize(width * 0.04);
fill(silver);
text("2025 Rewind Ball Drop", width / 2, height / 2);
pop();
}

function initExplosion() {
// Generate lots of confetti
for (let i = 0; i < 500; i++) {
confettiSystem.addConfetti(width / 2, height * 0.9);
}
// Launch initial fireworks
for (let i = 0; i < 5; i++) {
fireworkSystem.addFirework(random(width * 0.2, width * 0.8), height, random(-PI / 4, -3 * PI / 4));
}
}

function display2026() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.15);
fill(gold);
text("2026", width / 2, height / 2);
pop();
}

function resetSketch() {
currentState = PRE_DROP;
ball.reset();
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem(); // Clear confetti
fireworkSystem = new FireworkSystem(); // Clear fireworks
// Clear all particle systems
for (let ps of particleSystems) {
ps.particles = [];
}
}

// === Window Resized Function ===
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
ball.reset(); // Recenter ball
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();
// Adjust UI element positions if necessary
dropSpeedSlider.position(10, 10);
muteButton.position(180, 10);
}

// === Ball Class ===
class Ball {
constructor() {
this.reset();
}

reset() {
this.x = width / 2;
this.y = height * 0.15; // Starting position at the top
this.size = min(width, height) * 0.2;
this.targetY = height * 0.9; // Target position at the bottom
this.dropProgress = 0; // 0 to 1 for easing
this.dropSpeed = ballDropSpeed;
this.currentIconIndex = 0;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
this.rotation = 0;
}

startDrop() {
this.dropProgress = 0;
this.dropSpeed = ballDropSpeed;
}

update() {
if (this.dropProgress < 1) {
// Eased descent
this.dropProgress = min(this.dropProgress + this.dropSpeed, 1);
// Using a cubic ease-in-out function for smooth acceleration and deceleration
let easedProgress = this.easeInOutCubic(this.dropProgress);
this.y = lerp(height * 0.15, this.targetY, easedProgress);

this.rotation += TWO_PI / 360; // Gentle rotation

// Cycle ball icons
this.iconChangeTimer--;
if (this.iconChangeTimer <= 0) {
this.currentIconIndex = (this.currentIconIndex + 1) % ballIcons.length;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
}

// Generate particles based on ball's position
if (frameCount % 10 === 0) { // Generate particles every 10 frames
let numParticles = 5;
let speedFactor = map(this.dropProgress, 0, 1, 0.5, 2); // Particles speed up as ball drops
particleSystems[0].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(gold)); // Bitcoin
particleSystems[1].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(255)); // Music notes
particleSystems[2].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(20, 100, 100, 100)); // Flames
particleSystems[3].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(120, 100, 100, 100)); // Lightning bolts
}
}
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

// Draw disco ball texture
const numFacets = 30; // Number of facets around the ball
const facetSize = this.size * 0.1;
const radius = this.size / 2;

for (let i = 0; i < numFacets; i++) {
let angle1 = map(i, 0, numFacets, 0, TWO_PI);
let angle2 = map(i + 1, 0, numFacets, 0, TWO_PI);

let x1 = radius * cos(angle1);
let y1 = radius * sin(angle1);
let x2 = radius * cos(angle2);
let y2 = radius * sin(angle2);

// Create a gradient effect for sparkle
let c1 = color(silver);
let c2 = color(silver);
let c3 = color(gold);

// Randomly choose a color for each facet to simulate sparkle
let r = random(1);
if (r < 0.2) {
c1 = color(magenta);
c2 = color(magenta);
c3 = color(silver);
} else if (r < 0.4) {
c1 = color(seaGreen);
c2 = color(seaGreen);
c3 = color(silver);
} else if (r < 0.6) {
c1 = color(gold);
c2 = color(gold);
c3 = color(silver);
}


// Draw a "facet" (a small square or rectangle)
rectMode(CENTER);
fill(c1);
rect(x1, y1, facetSize, facetSize);

// Draw a small highlight
fill(255, 50);
ellipse(x1 + random(-facetSize / 4, facetSize / 4), y1 + random(-facetSize / 4, facetSize / 4), facetSize * random(0.2, 0.5));
}

// Overlay current icon
push();
fill(midnightBlue);
noStroke();
ellipse(0, 0, this.size * 0.7); // Dark circle behind icon for contrast
fill(255);
noStroke();
let iconSize = this.size * 0.5;
if (ballIcons[this.currentIconIndex]) {
if (typeof ballIcons[this.currentIconIndex] === 'function') {
ballIcons[this.currentIconIndex](iconSize); // Call drawing function
} else if (ballIcons[this.currentIconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(ballIcons[this.currentIconIndex], 0, 0, iconSize, iconSize); // Draw image
}
}
pop();

pop();
}

// Easing function: Cubic ease-in-out
easeInOutCubic(t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2;
return 0.5 * (t * t * t + 2);
}
}

// === Particle Class ===
class Particle {
constructor(x, y, vx, vy, size, color, icon, isFlame, isLightning) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.size = size;
this.color = color;
this.icon = icon;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
this.lifetime = 255; // For alpha fading
this.rotation = random(TWO_PI);
this.rotationSpeed = random(-0.1, 0.1);
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.05; // Gravity
this.lifetime -= 5;
this.rotation += this.rotationSpeed;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

let currentAlpha = map(this.lifetime, 0, 255, 0, 100);
fill(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
noStroke();

if (this.isFlame) {
// Draw flame shape
ellipse(0, 0, this.size, this.size * 2);
ellipse(0, -this.size * 0.5, this.size * 0.8, this.size * 1.5);
ellipse(0, -this.size, this.size * 0.6, this.size);
// Add a yellow core
fill(60, 100, 100, currentAlpha * 1.2); // Yellow, slightly brighter
ellipse(0, 0, this.size * 0.6, this.size);
} else if (this.isLightning) {
// Draw lightning bolt
stroke(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
strokeWeight(2);
line(-this.size / 2, -this.size / 2, this.size / 2, this.size / 2);
line(this.size / 2, -this.size / 2, -this.size / 2, this.size / 2);
line(0, -this.size / 2, 0, this.size / 2);
line(-this.size / 2, 0, this.size / 2, 0);
} else if (this.icon) {
// Draw image icon or custom shape function
if (typeof this.icon === 'function') {
this.icon(this.size); // Call drawing function
} else if (this.icon instanceof p5.Image) {
imageMode(CENTER);
image(this.icon, 0, 0, this.size, this.size); // Draw image
}
} else {
// Default: draw a circle
ellipse(0, 0, this.size);
}

pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ParticleSystem Class ===
class ParticleSystem {
constructor(icon, color, sizeFactor, isFlame, isLightning) {
this.particles = [];
this.icon = icon;
this.color = color;
this.sizeFactor = sizeFactor || 1;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
}

addParticles(x, y, count, speedFactor, colorOverride) {
for (let i = 0; i < count; i++) {
let angle = random(PI); // Emit upwards
let speed = random(1, 3) * speedFactor;
let vx = speed * cos(angle);
let vy = -speed * sin(angle); // Negative for upward motion
let size = random(10, 20) * this.sizeFactor;
let particleColor = colorOverride || this.color;
this.particles.push(new Particle(x, y, vx, vy, size, particleColor, this.icon, this.isFlame, this.isLightning));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
}

display() {
for (let particle of this.particles) {
particle.display();
}
}
}

// === TickerTape Class ===
class TickerTape {
constructor() {
this.y = height * 0.95;
this.headlines = [
"FIRST AMERICAN POPE",
"SOLAR OVERTAKES COAL",
"GREEN TURTLE RECOVERY",
"BLUE GHOST LANDS ON MOON",
"BEYONCÉ'S COWBOY CARTER GRAMMY WIN",
"COLOSSAL SQUID FILMED IN WILD",
"TAYLOR SWIFT & TRAVIS KELCE ENGAGED",
"GPT-5 LAUNCHES",
"$1.5T AI INVESTMENT BOOM",
"BITCOIN HITS $126K ATH",
"KENDRICK'S 'NOT LIKE US' WINS SONG OF YEAR",
"LA WILDFIRES DEVASTATE REGION"
];
this.scrollSpeed = 1;
this.xOffsets = [];
this.setupHeadlines();
}

setupHeadlines() {
push();
textFont(robotoRegular);
textSize(width * 0.02);
let currentX = width;
for (let headline of this.headlines) {
this.xOffsets.push(currentX);
currentX += textWidth(headline + " • ") + random(50, 150); // Add spacing
}
pop();
}

reset() {
this.xOffsets = [];
this.setupHeadlines();
}

update() {
for (let i = 0; i < this.xOffsets.length; i++) {
this.xOffsets[i] -= this.scrollSpeed;
// Loop headlines when they go off screen
if (this.xOffsets[i] < -textWidth(this.headlines[i] + " • ")) {
// Find the rightmost headline and place this one after it
let maxRight = 0;
for (let j = 0; j < this.xOffsets.length; j++) {
maxRight = max(maxRight, this.xOffsets[j] + textWidth(this.headlines[j] + " • "));
}
this.xOffsets[i] = maxRight + random(50, 150);
}
}
}

display() {
push();
fill(champagne);
textFont(robotoRegular);
textSize(width * 0.02);
textAlign(LEFT, CENTER);
for (let i = 0; i < this.xOffsets.length; i++) {
text(this.headlines[i] + " • ", this.xOffsets[i], this.y);
}
pop();
}
}

// === Countdown Class ===
class Countdown {
constructor() {
this.reset();
}

reset() {
this.number = 10;
this.x = width / 2;
this.y = height / 2;
this.size = min(width, height) * 0.15;
this.state = PRE_DROP; // PRE_DROP, COUNTING, FLASHING
this.iconIndex = 0; // Index for current icon
this.flashTimer = 0;
this.countdownDelay = 60; // Frames delay between numbers
this.countdownTimer = this.countdownDelay;
}

startCountdown() {
this.state = COUNTING;
this.number = 10;
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
}

update() {
if (this.state === COUNTING) {
this.countdownTimer--;
if (this.countdownTimer <= 0) {
this.number--;
if (this.number > 0) {
this.state = FLASHING;
this.iconIndex = 10 - this.number; // Match countdown number to icon index (10 -> 0, 1 -> 9)
this.flashTimer = 60; // Flash for 1 second
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
} else {
this.state = PRE_DROP; // Countdown finished
}
this.countdownTimer = this.countdownDelay;
}
} else if (this.state === FLASHING) {
this.flashTimer--;
if (this.flashTimer <= 0) {
this.state = COUNTING;
}
}
}

display() {
if (currentState === DROPPING && this.state !== PRE_DROP) {
push();
translate(this.x, this.y);

// Draw glowing effect
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 30;
drawingContext.shadowColor = color(gold);

textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(this.size);
fill(gold);
text(this.number, 0, 0);

// Draw flashback icon if flashing
if (this.state === FLASHING && countdownIcons[this.iconIndex]) {
let iconSize = this.size * 0.6;
let iconAlpha = map(this.flashTimer, 0, 60, 0, 100); // Fade in/out
push();
translate(0, -this.size * 0.8); // Position above number
fill(hue(gold), saturation(gold), brightness(gold), iconAlpha);
noStroke();
if (typeof countdownIcons[this.iconIndex] === 'function') {
countdownIcons[this.iconIndex](iconSize);
} else if (countdownIcons[this.iconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(countdownIcons[this.iconIndex], 0, 0, iconSize, iconSize);
}
pop();
}

pop();
}
}
}

// === Confetti Class ===
class Confetti {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = random(-5, 5);
this.vy = random(-10, -3);
this.rot = random(TWO_PI);
this.rotSpeed = random(-0.1, 0.1);
this.size = random(5, 15);
this.color = random([color(seaGreen), color(gold), color(midnightBlue)]);
this.lifetime = 120; // Lasts for 2 seconds
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.2; // Gravity
this.rot += this.rotSpeed;
this.lifetime--;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rot);
fill(this.color);
noStroke();
rectMode(CENTER);
rect(0, 0, this.size, this.size / 2);
pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ConfettiSystem Class ===
class ConfettiSystem {
constructor() {
this.confetti = [];
}

addConfetti(x, y) {
this.confetti.push(new Confetti(x, y));
}

update() {
for (let i = this.confetti.length - 1; i >= 0; i--) {
this.confetti[i].update();
if (this.confetti[i].isDead()) {
this.confetti.splice(i, 1);
}
}
}

display() {
for (let c of this.confetti) {
c.display();
}
}
}

// === FireworkExplosion Class ===
class FireworkExplosion {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
this.lifetime = 120; // 2 seconds
this.initParticles();
if (!isMuted) fireworksSynth.triggerAttackRelease(["C5", "E5", "G5"], "4n");
}

initParticles() {
let numParticles = random(50, 100);
for (let i = 0; i < numParticles; i++) {
let angle = random(TWO_PI);
let speed = random(1, 5);
let vx = speed * cos(angle);
let vy = speed * sin(angle);
let size = random(2, 5);
this.particles.push(new Particle(this.x, this.y, vx, vy, size, this.color));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
this.lifetime--;
}

display() {
for (let p of this.particles) {
p.display();
}
}

isDead() {
return this.lifetime <= 0 && this.particles.length === 0;
}
}

// === Firework Class ===
class Firework {
constructor(x, y, angle) {
this.x = x;
this.y = y;
this.vy = random(-10, -5); // Launch speed
this.vx = random(-2, 2); // Slight horizontal drift
this.color = random([color(magenta), color(gold), color(seaGreen), color(silver)]);
this.explosions = [];
this.state = 'launch'; // 'launch', 'explode', 'dead'
this.fuseTime = random(60, 120); // Time before explosion
this.angle = angle || -PI / 2; // Default upwards
}

update() {
if (this.state === 'launch') {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // Gravity slows launch
this.fuseTime--;
if (this.fuseTime <= 0 || this.vy >= 0) { // Explode when fuse runs out or rocket starts falling
this.state = 'explode';
this.explosions.push(new FireworkExplosion(this.x, this.y, this.color));
}
} else if (this.state === 'explode') {
for (let i = this.explosions.length - 1; i >= 0; i--) {
this.explosions[i].update();
if (this.explosions[i].isDead()) {
this.explosions.splice(i, 1);
}
}
if (this.explosions.length === 0) {
this.state = 'dead';
}
}
}

display() {
if (this.state === 'launch') {
push();
translate(this.x, this.y);
rotate(this.angle + PI / 2); // Orient rocket upwards
fill(this.color);
triangle(-5, 0, 5, 0, 0, -20); // Simple rocket shape
fill(gold);
ellipse(0, 5, 10, 10); // Rocket base
pop();
} else if (this.state === 'explode') {
for (let e of this.explosions) {
e.display();
}
}
}

isDead() {
return this.state === 'dead';
}
}

// === FireworkSystem Class ===
class FireworkSystem {
constructor() {
this.fireworks = [];
}

addFirework(x, y, angle) {
this.fireworks.push(new Firework(x, y, angle));
}

update() {
for (let i = this.fireworks.length - 1; i >= 0; i--) {
this.fireworks[i].update();
if (this.fireworks[i].isDead()) {
this.fireworks.splice(i, 1);
}
}
}

display() {
for (let f of this.fireworks) {
f.display();
}
}
}
```

---

### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025 Rewind Ball Drop</title>
<!-- p5.js library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Tone.js library for audio -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script>
<!-- Link to your custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Link to your sketch.js file -->
<script src="sketch.js"></script>
</body>
</html>
```

---

### `style.css`

```css
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
}

canvas {
display: block; /* Remove extra space below canvas */
}

/* Style for slider and button */
input[type="range"] {
width: 150px;
height: 5px;
background: #c9a227; /* Champagne */
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-appearance: none;
appearance: none;
border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffd700; /* Gold */
cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffd700; /* Gold */
cursor: pointer;
}

button {
background-color: #0a1628; /* Midnight Blue */
color: #ffd700; /* Gold */
border: 2px solid #ffd700;
padding: 5px 10px;
font-family: 'Montserrat', sans-serif; /* Use your chosen font */
font-weight: bold;
cursor: pointer;
border-radius: 5px;
outline: none;
-webkit-transition: .2s;
transition: background-color .2s, color .2s;
}

button:hover {
background-color: #ffd700; /* Gold */
color: #0a1628; /* Midnight Blue */
}
```

---

### Explanation and How to Use:

1. **Open the Sketch:** Apply these three files to your project. The `index.html` file loads p5.js, Tone.js, and your `sketch.js` file. Open `index.html` in a web browser.
2. **Start the Drop:** The sketch will initially display a "Click or Tap to Start" message. Click or tap anywhere on the canvas to begin the ball drop and countdown.
3. **Ball Descent:** The ball will descend with an eased motion, cycling through simple graphic representations of the 2025 iconic moments you listed. As it drops, particles (Bitcoin, musical notes, flames, lightning bolts) will emit from its base.
4. **Countdown:** A large, glowing countdown (10 down to 1) will appear in the center of the screen. Each number will briefly show a flashback icon.
5. **Midnight Explosion:** When the ball reaches the bottom and the countdown finishes, "2026" will burst onto the screen, accompanied by a shower of confetti and fireworks.
6. **Interactive Features:**
* **Drop Speed Slider:** Adjust the slider in the top-left corner to control how fast the ball drops.
* **Mute Button:** Click the "Mute" button next to the slider to toggle the audio on/off.
* **Extra Fireworks:** Once the explosion starts, click or tap anywhere on the canvas to launch additional fireworks.
7. **Customizing Ball & Particle Icons:**
* In `sketch.js`, inside the `preload()` function, you'll find sections for `ballIcons`, `bitcoinIcon`, `musicNoteIcon`, and `countdownIcons`.
* Currently, these are defined as functions that draw simple p5.js shapes (rectangles, ellipses, triangles).
* To use actual images, you would replace these drawing functions with `loadImage('path/to/your/image.png')` calls. Make sure your images are in the same directory as your sketch or provide correct URLs.
* Then, in the respective `display()` methods (e.g., `Ball.display()`, `Particle.display()`, `Countdown.display()`), you would use `imageMode(CENTER); image(yourImage, 0, 0, width, height);` instead of calling the drawing function.
8. **Sound Integration:** Tone.js is included, and basic sound effects for the countdown beep and fireworks are implemented. The `isMuted` variable and `toggleMute()` function control all Tone.js output.
9. **Color Palette:** The sketch uses the specified color palette for all elements, creating a cohesive visual style.
10. **State Management:** The `currentState` variable (`PRE_DROP`, `DROPPING`, `EXPLOSION`) ensures that different parts of the sketch are active at the correct times, creating a clear narrative flow.

This sketch provides a robust framework for your "2025 Rewind Ball Drop." Have fun customizing it with your actual imagery and fine-tuning the animations!

You're encountering a `ReferenceError` because the constants `COUNTING` and `FLASHING` were used in your `Countdown` class without being declared globally. You correctly declared `PRE_DROP`, `DROPPING`, and `EXPLOSION`, but missed these two states.

I've added `COUNTING` and `FLASHING` to your global `const` declarations in `sketch.js`, assigning them unique integer values.

Here's the corrected `sketch.js` file:

---

### `sketch.js` (Corrected)

```js
// ============================================================
// 2025 Rewind Ball Drop - New Year's Eve Sketch
// Concept: A glittering Times Square-style ball drops as midnight approaches,
// cycling through iconic visual moments from 2025. When the ball reaches
// the bottom, confetti explodes with "2026" and fireworks burst.
// ============================================================

// === Global Variables ===
let ball;
let particleSystems = [];
let tickerTape;
let countdownTimer;
let confettiSystem;
let fireworkSystem;
let ballDropSpeed = 0.005; // Default drop speed
let dropSpeedSlider;
let muteButton;
let isMuted = false;

// Fonts
let montserratBold; // For "2026" and countdown numbers
let robotoRegular; // For ticker tape

// Color Palette
const midnightBlue = '#0a1628';
const gold = '#ffd700';
const champagne = '#c9a227';
const magenta = '#ff00ff';
const seaGreen = '#2ecc71';
const silver = '#c0c0c0';

// Sketch States
const PRE_DROP = 0;
const DROPPING = 1;
const EXPLOSION = 2;
const COUNTING = 3; // Added this constant
const FLASHING = 4; // Added this constant
let currentState = PRE_DROP;

// Ball Icons (Placeholders - replace with image loading)
let ballIcons = []; // Array to hold p5.Image objects or functions for drawing icons
const ICON_CHANGE_INTERVAL = 300; // Frames between icon changes

// Particle Icon Placeholders
let bitcoinIcon; // Placeholder for Bitcoin symbol
let musicNoteIcon; // Placeholder for Music Note symbol

// Countdown Icon Placeholders
let countdownIcons = []; // Array to hold p5.Image objects or functions for drawing icons for countdown flashbacks

// Audio (Optional - using Tone.js)
let fireworksSynth;
let countdownBeep;

// === Preload Assets ===
function preload() {
// Load Fonts from Fontsource CDN
// Montserrat Bold for main text and countdown
montserratBold = loadFont('https://unpkg.com/@fontsource/montserrat@latest/files/montserrat-latin-700-normal.woff');
// Roboto Regular for ticker tape
robotoRegular = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');

// --- Ball Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// In a real sketch, you would load p5.Image objects like this:
// ballIcons[0] = loadImage('path/to/blue_ghost.png');
// ballIcons[1] = loadImage('path/to/green_turtle.png');
// ...and then draw them in the Ball.display() method using image()

ballIcons = [
// 0: Blue Ghost lunar lander silhouette
(size) => {
fill(silver);
noStroke();
triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3);
rectMode(CENTER);
rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 1: Green turtle
(size) => {
fill(seaGreen);
noStroke();
ellipse(0, 0, size * 0.7, size * 0.5); // Body
ellipse(0, -size * 0.2, size * 0.3, size * 0.3); // Head
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 1
rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 2
},
// 2: Solar panels
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
rect(0, 0, size * 0.8, size * 0.6);
fill(midnightBlue);
rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta);
strokeWeight(2);
line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25);
line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15);
line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 3: Cowboy hat
(size) => {
fill(champagne);
noStroke();
ellipse(0, size * 0.2, size * 0.8, size * 0.3); // Brim
rectMode(CENTER);
rect(0, -size * 0.1, size * 0.5, size * 0.4, 5); // Crown
fill(gold);
rect(0, size * 0.05, size * 0.5, size * 0.1); // Band
},
// 4: Colossal squid tentacle
(size) => {
fill(silver);
noStroke();
rectMode(CORNER);
beginShape();
vertex(-size * 0.2, -size * 0.4);
bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4);
bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4);
endShape(CLOSE);
fill(gold);
ellipse(-size * 0.1, -size * 0.2, size * 0.1);
ellipse(size * 0.1, 0, size * 0.1);
ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold);
noStroke();
rectMode(CENTER);
// Main key
ellipse(0, -size * 0.2, size * 0.2, size * 0.2); // Ring
rect(0, 0, size * 0.05, size * 0.4); // Shaft
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); // Bit
// Cross key
rect(0, 0, size * 0.4, size * 0.05);
rect(0, 0, size * 0.05, size * 0.4);
// USA flag detail
fill(255);
rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15);
fill(255, 0, 0);
rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 6: Football + heart (Taylor Swift & Travis Kelce engaged)
(size) => {
fill(139, 69, 19); // Brown
noStroke();
ellipse(0, 0, size * 0.6, size * 0.3); // Football
fill(255);
rectMode(CENTER);
rect(0, 0, size * 0.4, size * 0.05); // Laces
rect(0, -size * 0.05, size * 0.05, size * 0.05);
rect(0, size * 0.05, size * 0.05, size * 0.05);
fill(255, 0, 0); // Red heart
beginShape();
vertex(0, size * 0.2);
bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2);
bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2);
endShape(CLOSE);
},
// 7: AI circuit patterns (GPT-5, $1.5T AI investment boom)
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
for (let i = 0; i < 5; i++) {
rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1);
}
stroke(magenta);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4),
random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4));
}
}
];

// --- Particle Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// bitcoinIcon = loadImage('path/to/bitcoin.png');
// musicNoteIcon = loadImage('path/to/music_note.png');
bitcoinIcon = (size) => {
fill(gold);
noStroke();
rectMode(CENTER);
rect(0, 0, size, size);
fill(0);
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(size * 0.8);
text('₿', 0, 0);
};
musicNoteIcon = (size) => {
fill(255);
noStroke();
ellipse(0, size * 0.2, size * 0.5, size * 0.3);
rectMode(CENTER);
rect(size * 0.15, -size * 0.05, size * 0.1, size * 0.5);
line(size * 0.15, -size * 0.3, size * 0.4, -size * 0.3);
};

// --- Countdown Icons (Replace with your actual images) ---
// For each number from 10 down to 1, define an icon or drawing function
// countdownIcons[0] = loadImage('path/to/icon_for_10.png');
// countdownIcons[1] = loadImage('path/to/icon_for_9.png');
// ...
countdownIcons = [
// 10: Blue Ghost lunar lander
(size) => {
fill(silver); noStroke(); triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3); rectMode(CENTER); rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 9: Green turtle
(size) => {
fill(seaGreen); noStroke(); ellipse(0, 0, size * 0.7, size * 0.5); ellipse(0, -size * 0.2, size * 0.3, size * 0.3);
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5);
},
// 8: Solar panels
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.8, size * 0.6); fill(midnightBlue); rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta); strokeWeight(2); line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25); line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15); line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 7: Cowboy hat
(size) => {
fill(champagne); noStroke(); ellipse(0, size * 0.2, size * 0.8, size * 0.3); rectMode(CENTER); rect(0, -size * 0.1, size * 0.5, size * 0.4, 5);
fill(gold); rect(0, size * 0.05, size * 0.5, size * 0.1);
},
// 6: Colossal squid tentacle
(size) => {
fill(silver); noStroke(); rectMode(CORNER); beginShape(); vertex(-size * 0.2, -size * 0.4); bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4); bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4); endShape(CLOSE);
fill(gold); ellipse(-size * 0.1, -size * 0.2, size * 0.1); ellipse(size * 0.1, 0, size * 0.1); ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold); noStroke(); rectMode(CENTER); ellipse(0, -size * 0.2, size * 0.2, size * 0.2); rect(0, 0, size * 0.05, size * 0.4);
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); rect(0, 0, size * 0.4, size * 0.05); rect(0, 0, size * 0.05, size * 0.4);
fill(255); rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15); fill(255, 0, 0); rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 4: Football + heart
(size) => {
fill(139, 69, 19); noStroke(); ellipse(0, 0, size * 0.6, size * 0.3); fill(255); rectMode(CENTER); rect(0, 0, size * 0.4, size * 0.05);
rect(0, -size * 0.05, size * 0.05, size * 0.05); rect(0, size * 0.05, size * 0.05, size * 0.05); fill(255, 0, 0); beginShape();
vertex(0, size * 0.2); bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2); bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2); endShape(CLOSE);
},
// 3: AI circuit patterns
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); for (let i = 0; i < 5; i++) { rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1); }
stroke(magenta); strokeWeight(2); for (let i = 0; i < 10; i++) { line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4)); }
},
// 2: Confetti (generic celebration)
(size) => {
fill(gold); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.6, size * 0.6);
fill(seaGreen); rect(-size * 0.15, -size * 0.15, size * 0.3, size * 0.3);
fill(magenta); rect(size * 0.15, size * 0.15, size * 0.3, size * 0.3);
},
// 1: Firework (generic explosion)
(size) => {
fill(gold); noStroke(); ellipse(0, 0, size * 0.8, size * 0.8);
fill(magenta); ellipse(-size * 0.2, -size * 0.2, size * 0.3, size * 0.3);
fill(seaGreen); ellipse(size * 0.2, size * 0.2, size * 0.3, size * 0.3);
}
];

// --- Audio Setup (Tone.js) ---
// Create a PolySynth for fireworks
fireworksSynth = new Tone.PolySynth(Tone.Synth, {
oscillator: { type: "square" },
envelope: { attack: 0.05, decay: 0.2, sustain: 0.1, release: 0.5 },
volume: -10
}).toDestination();

// Create a SimpleSynth for countdown beep
countdownBeep = new Tone.Synth({
oscillator: { type: "sine" },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.1 },
volume: -10
}).toDestination();
}

// === Setup Function ===
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100); // Using HSB for easier color manipulation
noStroke();

// Initialize main objects
ball = new Ball();
tickerTape = new TickerTape();
countdownTimer = new Countdown();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();

// Initialize particle systems
particleSystems.push(new ParticleSystem(bitcoinIcon, color(gold), 0.5)); // Bitcoin particles
particleSystems.push(new ParticleSystem(musicNoteIcon, color(255), 0.5)); // Music notes
particleSystems.push(new ParticleSystem(null, color(20, 100, 100), 0.8, true)); // Flame particles
particleSystems.push(new ParticleSystem(null, color(120, 100, 100), 0.6, false, true)); // Lightning bolts

// Create UI elements
createUI();
}

// === Draw Function ===
function draw() {
// Background: Starry NYC night sky
background(midnightBlue);

// Update and display ticker tape
tickerTape.update();
tickerTape.display();

switch (currentState) {
case PRE_DROP:
// Display initial "Happy New Year!" or "Get Ready!" message
displayPreDropMessage();
break;

case DROPPING:
// Update and display ball
ball.update();
ball.display();

// Update and display particles
for (let ps of particleSystems) {
ps.update();
ps.display();
}

// Update and display countdown
countdownTimer.update();
countdownTimer.display();

// Check for state transition to EXPLOSION
if (ball.dropProgress >= 1) {
currentState = EXPLOSION;
initExplosion();
}
break;

case EXPLOSION:
// Display "2026"
display2026();

// Update and display confetti
confettiSystem.update();
confettiSystem.display();

// Update and display fireworks
fireworkSystem.update();
fireworkSystem.display();

// Optionally, transition back to PRE_DROP after some time
if (frameCount % 600 === 0) { // After about 10 seconds of explosion
resetSketch();
}
break;
}
}

// === UI Elements ===
function createUI() {
// Slider for ball drop speed
dropSpeedSlider = createSlider(0.001, 0.01, ballDropSpeed, 0.0005);
dropSpeedSlider.position(10, 10);
dropSpeedSlider.style('width', '150px');
dropSpeedSlider.input(() => {
ballDropSpeed = dropSpeedSlider.value();
if (currentState === DROPPING) ball.dropSpeed = ballDropSpeed;
});

// Mute button
muteButton = createButton('Mute');
muteButton.position(180, 10);
muteButton.mousePressed(toggleMute);
}

function toggleMute() {
isMuted = !isMuted;
muteButton.html(isMuted ? 'Unmute' : 'Mute');
Tone.Destination.mute = isMuted; // Mute/unmute all Tone.js audio
}

// === Mouse Press Interaction (Launch extra fireworks) ===
function mousePressed() {
if (currentState === EXPLOSION) {
fireworkSystem.addFirework(mouseX, mouseY, 0); // Launch a firework at mouse position
} else if (currentState === PRE_DROP) {
// Start the ball drop on click/tap
currentState = DROPPING;
ball.startDrop();
countdownTimer.startCountdown();
}
}

// === State-Specific Displays ===
function displayPreDropMessage() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.08);
fill(gold);
text("Click or Tap to Start", width / 2, height / 2 - height * 0.1);
textSize(width * 0.04);
fill(silver);
text("2025 Rewind Ball Drop", width / 2, height / 2);
pop();
}

function initExplosion() {
// Generate lots of confetti
for (let i = 0; i < 500; i++) {
confettiSystem.addConfetti(width / 2, height * 0.9);
}
// Launch initial fireworks
for (let i = 0; i < 5; i++) {
fireworkSystem.addFirework(random(width * 0.2, width * 0.8), height, random(-PI / 4, -3 * PI / 4));
}
}

function display2026() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.15);
fill(gold);
text("2026", width / 2, height / 2);
pop();
}

function resetSketch() {
currentState = PRE_DROP;
ball.reset();
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem(); // Clear confetti
fireworkSystem = new FireworkSystem(); // Clear fireworks
// Clear all particle systems
for (let ps of particleSystems) {
ps.particles = [];
}
}

// === Window Resized Function ===
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
ball.reset(); // Recenter ball
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();
// Adjust UI element positions if necessary
dropSpeedSlider.position(10, 10);
muteButton.position(180, 10);
}

// === Ball Class ===
class Ball {
constructor() {
this.reset();
}

reset() {
this.x = width / 2;
this.y = height * 0.15; // Starting position at the top
this.size = min(width, height) * 0.2;
this.targetY = height * 0.9; // Target position at the bottom
this.dropProgress = 0; // 0 to 1 for easing
this.dropSpeed = ballDropSpeed;
this.currentIconIndex = 0;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
this.rotation = 0;
}

startDrop() {
this.dropProgress = 0;
this.dropSpeed = ballDropSpeed;
}

update() {
if (this.dropProgress < 1) {
// Eased descent
this.dropProgress = min(this.dropProgress + this.dropSpeed, 1);
// Using a cubic ease-in-out function for smooth acceleration and deceleration
let easedProgress = this.easeInOutCubic(this.dropProgress);
this.y = lerp(height * 0.15, this.targetY, easedProgress);

this.rotation += TWO_PI / 360; // Gentle rotation

// Cycle ball icons
this.iconChangeTimer--;
if (this.iconChangeTimer <= 0) {
this.currentIconIndex = (this.currentIconIndex + 1) % ballIcons.length;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
}

// Generate particles based on ball's position
if (frameCount % 10 === 0) { // Generate particles every 10 frames
let numParticles = 5;
let speedFactor = map(this.dropProgress, 0, 1, 0.5, 2); // Particles speed up as ball drops
particleSystems[0].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(gold)); // Bitcoin
particleSystems[1].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(255)); // Music notes
particleSystems[2].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(20, 100, 100, 100)); // Flames
particleSystems[3].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(120, 100, 100, 100)); // Lightning bolts
}
}
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

// Draw disco ball texture
const numFacets = 30; // Number of facets around the ball
const facetSize = this.size * 0.1;
const radius = this.size / 2;

for (let i = 0; i < numFacets; i++) {
let angle1 = map(i, 0, numFacets, 0, TWO_PI);
let angle2 = map(i + 1, 0, numFacets, 0, TWO_PI);

let x1 = radius * cos(angle1);
let y1 = radius * sin(angle1);
let x2 = radius * cos(angle2);
let y2 = radius * sin(angle2);

// Create a gradient effect for sparkle
let c1 = color(silver);
let c2 = color(silver);
let c3 = color(gold);

// Randomly choose a color for each facet to simulate sparkle
let r = random(1);
if (r < 0.2) {
c1 = color(magenta);
c2 = color(magenta);
c3 = color(silver);
} else if (r < 0.4) {
c1 = color(seaGreen);
c2 = color(seaGreen);
c3 = color(silver);
} else if (r < 0.6) {
c1 = color(gold);
c2 = color(gold);
c3 = color(silver);
}


// Draw a "facet" (a small square or rectangle)
rectMode(CENTER);
fill(c1);
rect(x1, y1, facetSize, facetSize);

// Draw a small highlight
fill(255, 50);
ellipse(x1 + random(-facetSize / 4, facetSize / 4), y1 + random(-facetSize / 4, facetSize / 4), facetSize * random(0.2, 0.5));
}

// Overlay current icon
push();
fill(midnightBlue);
noStroke();
ellipse(0, 0, this.size * 0.7); // Dark circle behind icon for contrast
fill(255);
noStroke();
let iconSize = this.size * 0.5;
if (ballIcons[this.currentIconIndex]) {
if (typeof ballIcons[this.currentIconIndex] === 'function') {
ballIcons[this.currentIconIndex](iconSize); // Call drawing function
} else if (ballIcons[this.currentIconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(ballIcons[this.currentIconIndex], 0, 0, iconSize, iconSize); // Draw image
}
}
pop();

pop();
}

// Easing function: Cubic ease-in-out
easeInOutCubic(t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2;
return 0.5 * (t * t * t + 2);
}
}

// === Particle Class ===
class Particle {
constructor(x, y, vx, vy, size, color, icon, isFlame, isLightning) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.size = size;
this.color = color;
this.icon = icon;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
this.lifetime = 255; // For alpha fading
this.rotation = random(TWO_PI);
this.rotationSpeed = random(-0.1, 0.1);
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.05; // Gravity
this.lifetime -= 5;
this.rotation += this.rotationSpeed;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

let currentAlpha = map(this.lifetime, 0, 255, 0, 100);
fill(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
noStroke();

if (this.isFlame) {
// Draw flame shape
ellipse(0, 0, this.size, this.size * 2);
ellipse(0, -this.size * 0.5, this.size * 0.8, this.size * 1.5);
ellipse(0, -this.size, this.size * 0.6, this.size);
// Add a yellow core
fill(60, 100, 100, currentAlpha * 1.2); // Yellow, slightly brighter
ellipse(0, 0, this.size * 0.6, this.size);
} else if (this.isLightning) {
// Draw lightning bolt
stroke(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
strokeWeight(2);
line(-this.size / 2, -this.size / 2, this.size / 2, this.size / 2);
line(this.size / 2, -this.size / 2, -this.size / 2, this.size / 2);
line(0, -this.size / 2, 0, this.size / 2);
line(-this.size / 2, 0, this.size / 2, 0);
} else if (this.icon) {
// Draw image icon or custom shape function
if (typeof this.icon === 'function') {
this.icon(this.size); // Call drawing function
} else if (this.icon instanceof p5.Image) {
imageMode(CENTER);
image(this.icon, 0, 0, this.size, this.size); // Draw image
}
} else {
// Default: draw a circle
ellipse(0, 0, this.size);
}

pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ParticleSystem Class ===
class ParticleSystem {
constructor(icon, color, sizeFactor, isFlame, isLightning) {
this.particles = [];
this.icon = icon;
this.color = color;
this.sizeFactor = sizeFactor || 1;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
}

addParticles(x, y, count, speedFactor, colorOverride) {
for (let i = 0; i < count; i++) {
let angle = random(PI); // Emit upwards
let speed = random(1, 3) * speedFactor;
let vx = speed * cos(angle);
let vy = -speed * sin(angle); // Negative for upward motion
let size = random(10, 20) * this.sizeFactor;
let particleColor = colorOverride || this.color;
this.particles.push(new Particle(x, y, vx, vy, size, particleColor, this.icon, this.isFlame, this.isLightning));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
}

display() {
for (let particle of this.particles) {
particle.display();
}
}
}

// === TickerTape Class ===
class TickerTape {
constructor() {
this.y = height * 0.95;
this.headlines = [
"FIRST AMERICAN POPE",
"SOLAR OVERTAKES COAL",
"GREEN TURTLE RECOVERY",
"BLUE GHOST LANDS ON MOON",
"BEYONCÉ'S COWBOY CARTER GRAMMY WIN",
"COLOSSAL SQUID FILMED IN WILD",
"TAYLOR SWIFT & TRAVIS KELCE ENGAGED",
"GPT-5 LAUNCHES",
"$1.5T AI INVESTMENT BOOM",
"BITCOIN HITS $126K ATH",
"KENDRICK'S 'NOT LIKE US' WINS SONG OF YEAR",
"LA WILDFIRES DEVASTATE REGION"
];
this.scrollSpeed = 1;
this.xOffsets = [];
this.setupHeadlines();
}

setupHeadlines() {
push();
textFont(robotoRegular);
textSize(width * 0.02);
let currentX = width;
for (let headline of this.headlines) {
this.xOffsets.push(currentX);
currentX += textWidth(headline + " • ") + random(50, 150); // Add spacing
}
pop();
}

reset() {
this.xOffsets = [];
this.setupHeadlines();
}

update() {
for (let i = 0; i < this.xOffsets.length; i++) {
this.xOffsets[i] -= this.scrollSpeed;
// Loop headlines when they go off screen
if (this.xOffsets[i] < -textWidth(this.headlines[i] + " • ")) {
// Find the rightmost headline and place this one after it
let maxRight = 0;
for (let j = 0; j < this.xOffsets.length; j++) {
maxRight = max(maxRight, this.xOffsets[j] + textWidth(this.headlines[j] + " • "));
}
this.xOffsets[i] = maxRight + random(50, 150);
}
}
}

display() {
push();
fill(champagne);
textFont(robotoRegular);
textSize(width * 0.02);
textAlign(LEFT, CENTER);
for (let i = 0; i < this.xOffsets.length; i++) {
text(this.headlines[i] + " • ", this.xOffsets[i], this.y);
}
pop();
}
}

// === Countdown Class ===
class Countdown {
constructor() {
this.reset();
}

reset() {
this.number = 10;
this.x = width / 2;
this.y = height / 2;
this.size = min(width, height) * 0.15;
this.state = PRE_DROP; // PRE_DROP, COUNTING, FLASHING
this.iconIndex = 0; // Index for current icon
this.flashTimer = 0;
this.countdownDelay = 60; // Frames delay between numbers
this.countdownTimer = this.countdownDelay;
}

startCountdown() {
this.state = COUNTING;
this.number = 10;
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
}

update() {
if (this.state === COUNTING) {
this.countdownTimer--;
if (this.countdownTimer <= 0) {
this.number--;
if (this.number > 0) {
this.state = FLASHING;
this.iconIndex = 10 - this.number; // Match countdown number to icon index (10 -> 0, 1 -> 9)
this.flashTimer = 60; // Flash for 1 second
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
} else {
this.state = PRE_DROP; // Countdown finished
}
this.countdownTimer = this.countdownDelay;
}
} else if (this.state === FLASHING) {
this.flashTimer--;
if (this.flashTimer <= 0) {
this.state = COUNTING;
}
}
}

display() {
if (currentState === DROPPING && this.state !== PRE_DROP) {
push();
translate(this.x, this.y);

// Draw glowing effect
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 30;
drawingContext.shadowColor = color(gold);

textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(this.size);
fill(gold);
text(this.number, 0, 0);

// Draw flashback icon if flashing
if (this.state === FLASHING && countdownIcons[this.iconIndex]) {
let iconSize = this.size * 0.6;
let iconAlpha = map(this.flashTimer, 0, 60, 0, 100); // Fade in/out
push();
translate(0, -this.size * 0.8); // Position above number
fill(hue(gold), saturation(gold), brightness(gold), iconAlpha);
noStroke();
if (typeof countdownIcons[this.iconIndex] === 'function') {
countdownIcons[this.iconIndex](iconSize);
} else if (countdownIcons[this.iconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(countdownIcons[this.iconIndex], 0, 0, iconSize, iconSize);
}
pop();
}

pop();
}
}
}

// === Confetti Class ===
class Confetti {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = random(-5, 5);
this.vy = random(-10, -3);
this.rot = random(TWO_PI);
this.rotSpeed = random(-0.1, 0.1);
this.size = random(5, 15);
this.color = random([color(seaGreen), color(gold), color(midnightBlue)]);
this.lifetime = 120; // Lasts for 2 seconds
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.2; // Gravity
this.rot += this.rotSpeed;
this.lifetime--;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rot);
fill(this.color);
noStroke();
rectMode(CENTER);
rect(0, 0, this.size, this.size / 2);
pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ConfettiSystem Class ===
class ConfettiSystem {
constructor() {
this.confetti = [];
}

addConfetti(x, y) {
this.confetti.push(new Confetti(x, y));
}

update() {
for (let i = this.confetti.length - 1; i >= 0; i--) {
this.confetti[i].update();
if (this.confetti[i].isDead()) {
this.confetti.splice(i, 1);
}
}
}

display() {
for (let c of this.confetti) {
c.display();
}
}
}

// === FireworkExplosion Class ===
class FireworkExplosion {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
this.lifetime = 120; // 2 seconds
this.initParticles();
if (!isMuted) fireworksSynth.triggerAttackRelease(["C5", "E5", "G5"], "4n");
}

initParticles() {
let numParticles = random(50, 100);
for (let i = 0; i < numParticles; i++) {
let angle = random(TWO_PI);
let speed = random(1, 5);
let vx = speed * cos(angle);
let vy = speed * sin(angle);
let size = random(2, 5);
this.particles.push(new Particle(this.x, this.y, vx, vy, size, this.color));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
this.lifetime--;
}

display() {
for (let p of this.particles) {
p.display();
}
}

isDead() {
return this.lifetime <= 0 && this.particles.length === 0;
}
}

// === Firework Class ===
class Firework {
constructor(x, y, angle) {
this.x = x;
this.y = y;
this.vy = random(-10, -5); // Launch speed
this.vx = random(-2, 2); // Slight horizontal drift
this.color = random([color(magenta), color(gold), color(seaGreen), color(silver)]);
this.explosions = [];
this.state = 'launch'; // 'launch', 'explode', 'dead'
this.fuseTime = random(60, 120); // Time before explosion
this.angle = angle || -PI / 2; // Default upwards
}

update() {
if (this.state === 'launch') {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // Gravity slows launch
this.fuseTime--;
if (this.fuseTime <= 0 || this.vy >= 0) { // Explode when fuse runs out or rocket starts falling
this.state = 'explode';
this.explosions.push(new FireworkExplosion(this.x, this.y, this.color));
}
} else if (this.state === 'explode') {
for (let i = this.explosions.length - 1; i >= 0; i--) {
this.explosions[i].update();
if (this.explosions[i].isDead()) {
this.explosions.splice(i, 1);
}
}
if (this.explosions.length === 0) {
this.state = 'dead';
}
}
}

display() {
if (this.state === 'launch') {
push();
translate(this.x, this.y);
rotate(this.angle + PI / 2); // Orient rocket upwards
fill(this.color);
triangle(-5, 0, 5, 0, 0, -20); // Simple rocket shape
fill(gold);
ellipse(0, 5, 10, 10); // Rocket base
pop();
} else if (this.state === 'explode') {
for (let e of this.explosions) {
e.display();
}
}
}

isDead() {
return this.state === 'dead';
}
}

// === FireworkSystem Class ===
class FireworkSystem {
constructor() {
this.fireworks = [];
}

addFirework(x, y, angle) {
this.fireworks.push(new Firework(x, y, angle));
}

update() {
for (let i = this.fireworks.length - 1; i >= 0; i--) {
this.fireworks[i].update();
if (this.fireworks[i].isDead()) {
this.fireworks.splice(i, 1);
}
}
}

display() {
for (let f of this.fireworks) {
f.display();
}
}
}
```

You're right! It looks like the countdown timer and the ball drop are not perfectly synchronized, and the ball is reaching the bottom before the countdown hits zero.

This is happening because the ball's `dropProgress` is based on a fixed `ballDropSpeed`, while the countdown's `number` is decremented based on a `countdownDelay` in frames. They are independent.

To fix this, we need to link the ball's drop progress directly to the countdown. Since the countdown goes from 10 down to 1 (10 steps), we can make the ball's drop progress `1/10` of its total descent for each countdown step.

Here's how I'll modify the `update()` methods of both the `Ball` and `Countdown` classes to achieve this synchronization:

1. **Countdown.update():**
* I'll remove the `state = FLASHING` and `flashTimer` logic here. Instead, the `Countdown` class will simply update its `number` based on the ball's `dropProgress`.
* It will still trigger the beep sound when the number changes.
* The `Countdown` will set its internal `number` based on the ball's position, ensuring they are always in sync.

2. **Ball.update():**
* The ball's `y` position will still be calculated using the `easeInOutCubic` function to maintain the smooth acceleration/deceleration.
* The `ballDropSpeed` will now effectively control how quickly the entire sequence (ball drop + countdown) completes.

3. **setup() and resetSketch():**
* The `countdownTimer.startCountdown()` call in `mousePressed()` will become redundant, as the `Countdown` will implicitly start when the `DROPPING` state begins and the ball starts moving. I'll remove this call.
* `resetSketch()` will ensure `countdownTimer.reset()` brings it back to 10.

Here's the revised `sketch.js` with these synchronization changes:

---

### `sketch.js` (Synchronization Fix)

```js
// ============================================================
// 2025 Rewind Ball Drop - New Year's Eve Sketch
// Concept: A glittering Times Square-style ball drops as midnight approaches,
// cycling through iconic visual moments from 2025. When the ball reaches
// the bottom, confetti explodes with "2026" and fireworks burst.
// ============================================================

// === Global Variables ===
let ball;
let particleSystems = [];
let tickerTape;
let countdownTimer;
let confettiSystem;
let fireworkSystem;
let ballDropSpeed = 0.005; // Default drop speed
let dropSpeedSlider;
let muteButton;
let isMuted = false;

// Fonts
let montserratBold; // For "2026" and countdown numbers
let robotoRegular; // For ticker tape

// Color Palette
const midnightBlue = '#0a1628';
const gold = '#ffd700';
const champagne = '#c9a227';
const magenta = '#ff00ff';
const seaGreen = '#2ecc71';
const silver = '#c0c0c0';

// Sketch States
const PRE_DROP = 0;
const DROPPING = 1;
const EXPLOSION = 2;
const COUNTING = 3; // Added this constant
const FLASHING = 4; // Added this constant
let currentState = PRE_DROP;

// Ball Icons (Placeholders - replace with image loading)
let ballIcons = []; // Array to hold p5.Image objects or functions for drawing icons
const ICON_CHANGE_INTERVAL = 300; // Frames between icon changes

// Particle Icon Placeholders
let bitcoinIcon; // Placeholder for Bitcoin symbol
let musicNoteIcon; // Placeholder for Music Note symbol

// Countdown Icon Placeholders
let countdownIcons = []; // Array to hold p5.Image objects or functions for drawing icons for countdown flashbacks

// Audio (Optional - using Tone.js)
let fireworksSynth;
let countdownBeep;

// === Preload Assets ===
function preload() {
// Load Fonts from Fontsource CDN
// Montserrat Bold for main text and countdown
montserratBold = loadFont('https://unpkg.com/@fontsource/montserrat@latest/files/montserrat-latin-700-normal.woff');
// Roboto Regular for ticker tape
robotoRegular = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');

// --- Ball Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// In a real sketch, you would load p5.Image objects like this:
// ballIcons[0] = loadImage('path/to/blue_ghost.png');
// ballIcons[1] = loadImage('path/to/green_turtle.png');
// ...and then draw them in the Ball.display() method using image()

ballIcons = [
// 0: Blue Ghost lunar lander silhouette
(size) => {
fill(silver);
noStroke();
triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3);
rectMode(CENTER);
rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 1: Green turtle
(size) => {
fill(seaGreen);
noStroke();
ellipse(0, 0, size * 0.7, size * 0.5); // Body
ellipse(0, -size * 0.2, size * 0.3, size * 0.3); // Head
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 1
rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 2
},
// 2: Solar panels
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
rect(0, 0, size * 0.8, size * 0.6);
fill(midnightBlue);
rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta);
strokeWeight(2);
line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25);
line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15);
line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 3: Cowboy hat
(size) => {
fill(champagne);
noStroke();
ellipse(0, size * 0.2, size * 0.8, size * 0.3); // Brim
rectMode(CENTER);
rect(0, -size * 0.1, size * 0.5, size * 0.4, 5); // Crown
fill(gold);
rect(0, size * 0.05, size * 0.5, size * 0.1); // Band
},
// 4: Colossal squid tentacle
(size) => {
fill(silver);
noStroke();
rectMode(CORNER);
beginShape();
vertex(-size * 0.2, -size * 0.4);
bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4);
bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4);
endShape(CLOSE);
fill(gold);
ellipse(-size * 0.1, -size * 0.2, size * 0.1);
ellipse(size * 0.1, 0, size * 0.1);
ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold);
noStroke();
rectMode(CENTER);
// Main key
ellipse(0, -size * 0.2, size * 0.2, size * 0.2); // Ring
rect(0, 0, size * 0.05, size * 0.4); // Shaft
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); // Bit
// Cross key
rect(0, 0, size * 0.4, size * 0.05);
rect(0, 0, size * 0.05, size * 0.4);
// USA flag detail
fill(255);
rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15);
fill(255, 0, 0);
rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 6: Football + heart (Taylor Swift & Travis Kelce engaged)
(size) => {
fill(139, 69, 19); // Brown
noStroke();
ellipse(0, 0, size * 0.6, size * 0.3); // Football
fill(255);
rectMode(CENTER);
rect(0, 0, size * 0.4, size * 0.05); // Laces
rect(0, -size * 0.05, size * 0.05, size * 0.05);
rect(0, size * 0.05, size * 0.05, size * 0.05);
fill(255, 0, 0); // Red heart
beginShape();
vertex(0, size * 0.2);
bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2);
bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2);
endShape(CLOSE);
},
// 7: AI circuit patterns (GPT-5, $1.5T AI investment boom)
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
for (let i = 0; i < 5; i++) {
rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1);
}
stroke(magenta);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4),
random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4));
}
}
];

// --- Particle Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// bitcoinIcon = loadImage('path/to/bitcoin.png');
// musicNoteIcon = loadImage('path/to/music_note.png');
bitcoinIcon = (size) => {
fill(gold);
noStroke();
rectMode(CENTER);
rect(0, 0, size, size);
fill(0);
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(size * 0.8);
text('₿', 0, 0);
};
musicNoteIcon = (size) => {
fill(255);
noStroke();
ellipse(0, size * 0.2, size * 0.5, size * 0.3);
rectMode(CENTER);
rect(size * 0.15, -size * 0.05, size * 0.1, size * 0.5);
line(size * 0.15, -size * 0.3, size * 0.4, -size * 0.3);
};

// --- Countdown Icons (Replace with your actual images) ---
// For each number from 10 down to 1, define an icon or drawing function
// countdownIcons[0] = loadImage('path/to/icon_for_10.png');
// countdownIcons[1] = loadImage('path/to/icon_for_9.png');
// ...
countdownIcons = [
// 10: Blue Ghost lunar lander
(size) => {
fill(silver); noStroke(); triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3); rectMode(CENTER); rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 9: Green turtle
(size) => {
fill(seaGreen); noStroke(); ellipse(0, 0, size * 0.7, size * 0.5); ellipse(0, -size * 0.2, size * 0.3, size * 0.3);
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5);
},
// 8: Solar panels
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.8, size * 0.6); fill(midnightBlue); rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta); strokeWeight(2); line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25); line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15); line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 7: Cowboy hat
(size) => {
fill(champagne); noStroke(); ellipse(0, size * 0.2, size * 0.8, size * 0.3); rectMode(CENTER); rect(0, -size * 0.1, size * 0.5, size * 0.4, 5);
fill(gold); rect(0, size * 0.05, size * 0.5, size * 0.1);
},
// 6: Colossal squid tentacle
(size) => {
fill(silver); noStroke(); rectMode(CORNER); beginShape(); vertex(-size * 0.2, -size * 0.4); bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4); bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4); endShape(CLOSE);
fill(gold); ellipse(-size * 0.1, -size * 0.2, size * 0.1); ellipse(size * 0.1, 0, size * 0.1); ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold); noStroke(); rectMode(CENTER); ellipse(0, -size * 0.2, size * 0.2, size * 0.2); rect(0, 0, size * 0.05, size * 0.4);
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); rect(0, 0, size * 0.4, size * 0.05); rect(0, 0, size * 0.05, size * 0.4);
fill(255); rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15); fill(255, 0, 0); rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 4: Football + heart
(size) => {
fill(139, 69, 19); noStroke(); ellipse(0, 0, size * 0.6, size * 0.3); fill(255); rectMode(CENTER); rect(0, 0, size * 0.4, size * 0.05);
rect(0, -size * 0.05, size * 0.05, size * 0.05); rect(0, size * 0.05, size * 0.05, size * 0.05); fill(255, 0, 0); beginShape();
vertex(0, size * 0.2); bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2); bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2); endShape(CLOSE);
},
// 3: AI circuit patterns
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); for (let i = 0; i < 5; i++) { rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1); }
stroke(magenta); strokeWeight(2); for (let i = 0; i < 10; i++) { line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4)); }
},
// 2: Confetti (generic celebration)
(size) => {
fill(gold); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.6, size * 0.6);
fill(seaGreen); rect(-size * 0.15, -size * 0.15, size * 0.3, size * 0.3);
fill(magenta); rect(size * 0.15, size * 0.15, size * 0.3, size * 0.3);
},
// 1: Firework (generic explosion)
(size) => {
fill(gold); noStroke(); ellipse(0, 0, size * 0.8, size * 0.8);
fill(magenta); ellipse(-size * 0.2, -size * 0.2, size * 0.3, size * 0.3);
fill(seaGreen); ellipse(size * 0.2, size * 0.2, size * 0.3, size * 0.3);
}
];

// --- Audio Setup (Tone.js) ---
// Create a PolySynth for fireworks
fireworksSynth = new Tone.PolySynth(Tone.Synth, {
oscillator: { type: "square" },
envelope: { attack: 0.05, decay: 0.2, sustain: 0.1, release: 0.5 },
volume: -10
}).toDestination();

// Create a SimpleSynth for countdown beep
countdownBeep = new Tone.Synth({
oscillator: { type: "sine" },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.1 },
volume: -10
}).toDestination();
}

// === Setup Function ===
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100); // Using HSB for easier color manipulation
noStroke();

// Initialize main objects
ball = new Ball();
tickerTape = new TickerTape();
countdownTimer = new Countdown();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();

// Initialize particle systems
particleSystems.push(new ParticleSystem(bitcoinIcon, color(gold), 0.5)); // Bitcoin particles
particleSystems.push(new ParticleSystem(musicNoteIcon, color(255), 0.5)); // Music notes
particleSystems.push(new ParticleSystem(null, color(20, 100, 100), 0.8, true)); // Flame particles
particleSystems.push(new ParticleSystem(null, color(120, 100, 100), 0.6, false, true)); // Lightning bolts

// Create UI elements
createUI();
}

// === Draw Function ===
function draw() {
// Background: Starry NYC night sky
background(midnightBlue);

// Update and display ticker tape
tickerTape.update();
tickerTape.display();

switch (currentState) {
case PRE_DROP:
// Display initial "Happy New Year!" or "Get Ready!" message
displayPreDropMessage();
break;

case DROPPING:
// Update and display ball
ball.update();
ball.display();

// Update and display particles
for (let ps of particleSystems) {
ps.update();
ps.display();
}

// Update and display countdown (now driven by ball's dropProgress)
countdownTimer.update(ball.dropProgress);
countdownTimer.display();

// Check for state transition to EXPLOSION
if (ball.dropProgress >= 1) {
currentState = EXPLOSION;
initExplosion();
}
break;

case EXPLOSION:
// Display "2026"
display2026();

// Update and display confetti
confettiSystem.update();
confettiSystem.display();

// Update and display fireworks
fireworkSystem.update();
fireworkSystem.display();

// Optionally, transition back to PRE_DROP after some time
if (frameCount % 600 === 0) { // After about 10 seconds of explosion
resetSketch();
}
break;
}
}

// === UI Elements ===
function createUI() {
// Slider for ball drop speed
dropSpeedSlider = createSlider(0.001, 0.01, ballDropSpeed, 0.0005);
dropSpeedSlider.position(10, 10);
dropSpeedSlider.style('width', '150px');
dropSpeedSlider.input(() => {
ballDropSpeed = dropSpeedSlider.value();
if (currentState === DROPPING) ball.dropSpeed = ballDropSpeed;
});

// Mute button
muteButton = createButton('Mute');
muteButton.position(180, 10);
muteButton.mousePressed(toggleMute);
}

function toggleMute() {
isMuted = !isMuted;
muteButton.html(isMuted ? 'Unmute' : 'Mute');
Tone.Destination.mute = isMuted; // Mute/unmute all Tone.js audio
}

// === Mouse Press Interaction (Launch extra fireworks) ===
function mousePressed() {
if (currentState === EXPLOSION) {
fireworkSystem.addFirework(mouseX, mouseY, 0); // Launch a firework at mouse position
} else if (currentState === PRE_DROP) {
// Start the ball drop on click/tap
currentState = DROPPING;
ball.startDrop();
// countdownTimer.startCountdown(); // Removed: Countdown now implicitly starts with ball.update()
}
}

// === State-Specific Displays ===
function displayPreDropMessage() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.08);
fill(gold);
text("Click or Tap to Start", width / 2, height / 2 - height * 0.1);
textSize(width * 0.04);
fill(silver);
text("2025 Rewind Ball Drop", width / 2, height / 2);
pop();
}

function initExplosion() {
// Generate lots of confetti
for (let i = 0; i < 500; i++) {
confettiSystem.addConfetti(width / 2, height * 0.9);
}
// Launch initial fireworks
for (let i = 0; i < 5; i++) {
fireworkSystem.addFirework(random(width * 0.2, width * 0.8), height, random(-PI / 4, -3 * PI / 4));
}
}

function display2026() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.15);
fill(gold);
text("2026", width / 2, height / 2);
pop();
}

function resetSketch() {
currentState = PRE_DROP;
ball.reset();
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem(); // Clear confetti
fireworkSystem = new FireworkSystem(); // Clear fireworks
// Clear all particle systems
for (let ps of particleSystems) {
ps.particles = [];
}
}

// === Window Resized Function ===
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
ball.reset(); // Recenter ball
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();
// Adjust UI element positions if necessary
dropSpeedSlider.position(10, 10);
muteButton.position(180, 10);
}

// === Ball Class ===
class Ball {
constructor() {
this.reset();
}

reset() {
this.x = width / 2;
this.y = height * 0.15; // Starting position at the top
this.size = min(width, height) * 0.2;
this.targetY = height * 0.9; // Target position at the bottom
this.dropProgress = 0; // 0 to 1 for easing
this.dropSpeed = ballDropSpeed;
this.currentIconIndex = 0;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
this.rotation = 0;
}

startDrop() {
this.dropProgress = 0;
this.dropSpeed = ballDropSpeed;
}

update() {
if (this.dropProgress < 1) {
// Eased descent
this.dropProgress = min(this.dropProgress + this.dropSpeed, 1);
// Using a cubic ease-in-out function for smooth acceleration and deceleration
let easedProgress = this.easeInOutCubic(this.dropProgress);
this.y = lerp(height * 0.15, this.targetY, easedProgress);

this.rotation += TWO_PI / 360; // Gentle rotation

// Cycle ball icons
this.iconChangeTimer--;
if (this.iconChangeTimer <= 0) {
this.currentIconIndex = (this.currentIconIndex + 1) % ballIcons.length;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
}

// Generate particles based on ball's position
if (frameCount % 10 === 0) { // Generate particles every 10 frames
let numParticles = 5;
let speedFactor = map(this.dropProgress, 0, 1, 0.5, 2); // Particles speed up as ball drops
particleSystems[0].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(gold)); // Bitcoin
particleSystems[1].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(255)); // Music notes
particleSystems[2].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(20, 100, 100, 100)); // Flames
particleSystems[3].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(120, 100, 100, 100)); // Lightning bolts
}
}
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

// Draw disco ball texture
const numFacets = 30; // Number of facets around the ball
const facetSize = this.size * 0.1;
const radius = this.size / 2;

for (let i = 0; i < numFacets; i++) {
let angle1 = map(i, 0, numFacets, 0, TWO_PI);
let angle2 = map(i + 1, 0, numFacets, 0, TWO_PI);

let x1 = radius * cos(angle1);
let y1 = radius * sin(angle1);
let x2 = radius * cos(angle2);
let y2 = radius * sin(angle2);

// Create a gradient effect for sparkle
let c1 = color(silver);
let c2 = color(silver);
let c3 = color(gold);

// Randomly choose a color for each facet to simulate sparkle
let r = random(1);
if (r < 0.2) {
c1 = color(magenta);
c2 = color(magenta);
c3 = color(silver);
} else if (r < 0.4) {
c1 = color(seaGreen);
c2 = color(seaGreen);
c3 = color(silver);
} else if (r < 0.6) {
c1 = color(gold);
c2 = color(gold);
c3 = color(silver);
}


// Draw a "facet" (a small square or rectangle)
rectMode(CENTER);
fill(c1);
rect(x1, y1, facetSize, facetSize);

// Draw a small highlight
fill(255, 50);
ellipse(x1 + random(-facetSize / 4, facetSize / 4), y1 + random(-facetSize / 4, facetSize / 4), facetSize * random(0.2, 0.5));
}

// Overlay current icon
push();
fill(midnightBlue);
noStroke();
ellipse(0, 0, this.size * 0.7); // Dark circle behind icon for contrast
fill(255);
noStroke();
let iconSize = this.size * 0.5;
if (ballIcons[this.currentIconIndex]) {
if (typeof ballIcons[this.currentIconIndex] === 'function') {
ballIcons[this.currentIconIndex](iconSize); // Call drawing function
} else if (ballIcons[this.currentIconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(ballIcons[this.currentIconIndex], 0, 0, iconSize, iconSize); // Draw image
}
}
pop();

pop();
}

// Easing function: Cubic ease-in-out
easeInOutCubic(t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2;
return 0.5 * (t * t * t + 2);
}
}

// === Particle Class ===
class Particle {
constructor(x, y, vx, vy, size, color, icon, isFlame, isLightning) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.size = size;
this.color = color;
this.icon = icon;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
this.lifetime = 255; // For alpha fading
this.rotation = random(TWO_PI);
this.rotationSpeed = random(-0.1, 0.1);
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.05; // Gravity
this.lifetime -= 5;
this.rotation += this.rotationSpeed;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

let currentAlpha = map(this.lifetime, 0, 255, 0, 100);
fill(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
noStroke();

if (this.isFlame) {
// Draw flame shape
ellipse(0, 0, this.size, this.size * 2);
ellipse(0, -this.size * 0.5, this.size * 0.8, this.size * 1.5);
ellipse(0, -this.size, this.size * 0.6, this.size);
// Add a yellow core
fill(60, 100, 100, currentAlpha * 1.2); // Yellow, slightly brighter
ellipse(0, 0, this.size * 0.6, this.size);
} else if (this.isLightning) {
// Draw lightning bolt
stroke(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
strokeWeight(2);
line(-this.size / 2, -this.size / 2, this.size / 2, this.size / 2);
line(this.size / 2, -this.size / 2, -this.size / 2, this.size / 2);
line(0, -this.size / 2, 0, this.size / 2);
line(-this.size / 2, 0, this.size / 2, 0);
} else if (this.icon) {
// Draw image icon or custom shape function
if (typeof this.icon === 'function') {
this.icon(this.size); // Call drawing function
} else if (this.icon instanceof p5.Image) {
imageMode(CENTER);
image(this.icon, 0, 0, this.size, this.size); // Draw image
}
} else {
// Default: draw a circle
ellipse(0, 0, this.size);
}

pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ParticleSystem Class ===
class ParticleSystem {
constructor(icon, color, sizeFactor, isFlame, isLightning) {
this.particles = [];
this.icon = icon;
this.color = color;
this.sizeFactor = sizeFactor || 1;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
}

addParticles(x, y, count, speedFactor, colorOverride) {
for (let i = 0; i < count; i++) {
let angle = random(PI); // Emit upwards
let speed = random(1, 3) * speedFactor;
let vx = speed * cos(angle);
let vy = -speed * sin(angle); // Negative for upward motion
let size = random(10, 20) * this.sizeFactor;
let particleColor = colorOverride || this.color;
this.particles.push(new Particle(x, y, vx, vy, size, particleColor, this.icon, this.isFlame, this.isLightning));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
}

display() {
for (let particle of this.particles) {
particle.display();
}
}
}

// === TickerTape Class ===
class TickerTape {
constructor() {
this.y = height * 0.95;
this.headlines = [
"FIRST AMERICAN POPE",
"SOLAR OVERTAKES COAL",
"GREEN TURTLE RECOVERY",
"BLUE GHOST LANDS ON MOON",
"BEYONCÉ'S COWBOY CARTER GRAMMY WIN",
"COLOSSAL SQUID FILMED IN WILD",
"TAYLOR SWIFT & TRAVIS KELCE ENGAGED",
"GPT-5 LAUNCHES",
"$1.5T AI INVESTMENT BOOM",
"BITCOIN HITS $126K ATH",
"KENDRICK'S 'NOT LIKE US' WINS SONG OF YEAR",
"LA WILDFIRES DEVASTATE REGION"
];
this.scrollSpeed = 1;
this.xOffsets = [];
this.setupHeadlines();
}

setupHeadlines() {
push();
textFont(robotoRegular);
textSize(width * 0.02);
let currentX = width;
for (let headline of this.headlines) {
this.xOffsets.push(currentX);
currentX += textWidth(headline + " • ") + random(50, 150); // Add spacing
}
pop();
}

reset() {
this.xOffsets = [];
this.setupHeadlines();
}

update() {
for (let i = 0; i < this.xOffsets.length; i++) {
this.xOffsets[i] -= this.scrollSpeed;
// Loop headlines when they go off screen
if (this.xOffsets[i] < -textWidth(this.headlines[i] + " • ")) {
// Find the rightmost headline and place this one after it
let maxRight = 0;
for (let j = 0; j < this.xOffsets.length; j++) {
maxRight = max(maxRight, this.xOffsets[j] + textWidth(this.headlines[j] + " • "));
}
this.xOffsets[i] = maxRight + random(50, 150);
}
}
}

display() {
push();
fill(champagne);
textFont(robotoRegular);
textSize(width * 0.02);
textAlign(LEFT, CENTER);
for (let i = 0; i < this.xOffsets.length; i++) {
text(this.headlines[i] + " • ", this.xOffsets[i], this.y);
}
pop();
}
}

// === Countdown Class ===
class Countdown {
constructor() {
this.reset();
}

reset() {
this.number = 10;
this.x = width / 2;
this.y = height / 2;
this.size = min(width, height) * 0.15;
this.state = PRE_DROP; // PRE_DROP, COUNTING, FLASHING
this.iconIndex = 0; // Index for current icon
this.flashTimer = 0;
this.lastNumber = 11; // To track when the number changes
}

// Modified update function to take ball's dropProgress
update(dropProgress) {
if (dropProgress < 1) {
this.state = COUNTING;
// Map dropProgress (0 to 1) to countdown numbers (10 to 1)
// We want dropProgress 0 to be 10, dropProgress ~0.9 to be 1
let newNumber = max(1, floor(10 - dropProgress * 9));

if (newNumber !== this.number) {
this.lastNumber = this.number; // Store old number for icon selection
this.number = newNumber;
this.state = FLASHING;
// Icon index for flashback: 10 -> 0, 9 -> 1, ..., 1 -> 9
this.iconIndex = 10 - this.lastNumber;
this.flashTimer = 60; // Flash for 1 second
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
}
} else {
this.state = PRE_DROP; // Countdown finished
}

if (this.state === FLASHING) {
this.flashTimer--;
if (this.flashTimer <= 0) {
this.state = COUNTING;
}
}
}

display() {
if (currentState === DROPPING && this.state !== PRE_DROP) {
push();
translate(this.x, this.y);

// Draw glowing effect
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 30;
drawingContext.shadowColor = color(gold);

textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(this.size);
fill(gold);
text(this.number, 0, 0);

// Draw flashback icon if flashing
if (this.state === FLASHING && countdownIcons[this.iconIndex]) {
let iconSize = this.size * 0.6;
let iconAlpha = map(this.flashTimer, 0, 60, 0, 100); // Fade in/out
push();
translate(0, -this.size * 0.8); // Position above number
fill(hue(gold), saturation(gold), brightness(gold), iconAlpha);
noStroke();
if (typeof countdownIcons[this.iconIndex] === 'function') {
countdownIcons[this.iconIndex](iconSize);
} else if (countdownIcons[this.iconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(countdownIcons[this.iconIndex], 0, 0, iconSize, iconSize);
}
pop();
}

pop();
}
}
}

// === Confetti Class ===
class Confetti {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = random(-5, 5);
this.vy = random(-10, -3);
this.rot = random(TWO_PI);
this.rotSpeed = random(-0.1, 0.1);
this.size = random(5, 15);
this.color = random([color(seaGreen), color(gold), color(midnightBlue)]);
this.lifetime = 120; // Lasts for 2 seconds
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.2; // Gravity
this.rot += this.rotSpeed;
this.lifetime--;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rot);
fill(this.color);
noStroke();
rectMode(CENTER);
rect(0, 0, this.size, this.size / 2);
pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ConfettiSystem Class ===
class ConfettiSystem {
constructor() {
this.confetti = [];
}

addConfetti(x, y) {
this.confetti.push(new Confetti(x, y));
}

update() {
for (let i = this.confetti.length - 1; i >= 0; i--) {
this.confetti[i].update();
if (this.confetti[i].isDead()) {
this.confetti.splice(i, 1);
}
}
}

display() {
for (let c of this.confetti) {
c.display();
}
}
}

// === FireworkExplosion Class ===
class FireworkExplosion {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
this.lifetime = 120; // 2 seconds
this.initParticles();
if (!isMuted) fireworksSynth.triggerAttackRelease(["C5", "E5", "G5"], "4n");
}

initParticles() {
let numParticles = random(50, 100);
for (let i = 0; i < numParticles; i++) {
let angle = random(TWO_PI);
let speed = random(1, 5);
let vx = speed * cos(angle);
let vy = speed * sin(angle);
let size = random(2, 5);
this.particles.push(new Particle(this.x, this.y, vx, vy, size, this.color));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
this.lifetime--;
}

display() {
for (let p of this.particles) {
p.display();
}
}

isDead() {
return this.lifetime <= 0 && this.particles.length === 0;
}
}

// === Firework Class ===
class Firework {
constructor(x, y, angle) {
this.x = x;
this.y = y;
this.vy = random(-10, -5); // Launch speed
this.vx = random(-2, 2); // Slight horizontal drift
this.color = random([color(magenta), color(gold), color(seaGreen), color(silver)]);
this.explosions = [];
this.state = 'launch'; // 'launch', 'explode', 'dead'
this.fuseTime = random(60, 120); // Time before explosion
this.angle = angle || -PI / 2; // Default upwards
}

update() {
if (this.state === 'launch') {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // Gravity slows launch
this.fuseTime--;
if (this.fuseTime <= 0 || this.vy >= 0) { // Explode when fuse runs out or rocket starts falling
this.state = 'explode';
this.explosions.push(new FireworkExplosion(this.x, this.y, this.color));
}
} else if (this.state === 'explode') {
for (let i = this.explosions.length - 1; i >= 0; i--) {
this.explosions[i].update();
if (this.explosions[i].isDead()) {
this.explosions.splice(i, 1);
}
}
if (this.explosions.length === 0) {
this.state = 'dead';
}
}
}

display() {
if (this.state === 'launch') {
push();
translate(this.x, this.y);
rotate(this.angle + PI / 2); // Orient rocket upwards
fill(this.color);
triangle(-5, 0, 5, 0, 0, -20); // Simple rocket shape
fill(gold);
ellipse(0, 5, 10, 10); // Rocket base
pop();
} else if (this.state === 'explode') {
for (let e of this.explosions) {
e.display();
}
}
}

isDead() {
return this.state === 'dead';
}
}

// === FireworkSystem Class ===
class FireworkSystem {
constructor() {
this.fireworks = [];
}

addFirework(x, y, angle) {
this.fireworks.push(new Firework(x, y, angle));
}

update() {
for (let i = this.fireworks.length - 1; i >= 0; i--) {
this.fireworks[i].update();
if (this.fireworks[i].isDead()) {
this.fireworks.splice(i, 1);
}
}
}

display() {
for (let f of this.fireworks) {
f.display();
}
}
}
```

You're right, the countdown and the ball's descent are not currently synchronized, leading to the countdown not reaching 0 before the ball hits the bottom.

The issue stems from the `Countdown` class having its own independent frame-based timer (`countdownTimer`), while the `Ball` class descends based on its `dropProgress` variable. To fix this, we need to make the countdown's number directly dependent on the ball's `dropProgress`.

Here's how I've adjusted the `sketch.js` file:

1. **`Countdown.update()` Modified:**
* Removed the internal `countdownTimer` and `countdownDelay`.
* Now takes `dropProgress` as an argument.
* Calculates the current countdown number by mapping `dropProgress` (0 to 1) to the range 10 down to 1 (`floor(10 - dropProgress * 9)`).
* It only triggers the "flashing" state and the beep when the calculated number *actually changes*, ensuring a smooth and synchronized countdown.
2. **`draw()` Adjusted:**
* Passes `ball.dropProgress` to `countdownTimer.update()`.
3. **`mousePressed()` Adjusted:**
* Removed the explicit call to `countdownTimer.startCountdown()` because the countdown will now implicitly start updating as soon as the ball begins its descent and `dropProgress` is no longer 0.
4. **`Countdown.reset()` Adjusted:**
* Added `this.lastNumber = 11;` to ensure the first number change (from 10) is detected correctly when the sketch resets.

These changes ensure that the countdown number perfectly aligns with the ball's descent, hitting 1 just as the ball reaches the bottom.

---

### `sketch.js` (Corrected)

```js
// ============================================================
// 2025 Rewind Ball Drop - New Year's Eve Sketch
// Concept: A glittering Times Square-style ball drops as midnight approaches,
// cycling through iconic visual moments from 2025. When the ball reaches
// the bottom, confetti explodes with "2026" and fireworks burst.
// ============================================================

// === Global Variables ===
let ball;
let particleSystems = [];
let tickerTape;
let countdownTimer;
let confettiSystem;
let fireworkSystem;
let ballDropSpeed = 0.005; // Default drop speed
let dropSpeedSlider;
let muteButton;
let isMuted = false;

// Fonts
let montserratBold; // For "2026" and countdown numbers
let robotoRegular; // For ticker tape

// Color Palette
const midnightBlue = '#0a1628';
const gold = '#ffd700';
const champagne = '#c9a227';
const magenta = '#ff00ff';
const seaGreen = '#2ecc71';
const silver = '#c0c0c0';

// Sketch States
const PRE_DROP = 0;
const DROPPING = 1;
const EXPLOSION = 2;
const COUNTING = 3; // Added this constant
const FLASHING = 4; // Added this constant
let currentState = PRE_DROP;

// Ball Icons (Placeholders - replace with image loading)
let ballIcons = []; // Array to hold p5.Image objects or functions for drawing icons
const ICON_CHANGE_INTERVAL = 300; // Frames between icon changes

// Particle Icon Placeholders
let bitcoinIcon; // Placeholder for Bitcoin symbol
let musicNoteIcon; // Placeholder for Music Note symbol

// Countdown Icon Placeholders
let countdownIcons = []; // Array to hold p5.Image objects or functions for drawing icons for countdown flashbacks

// Audio (Optional - using Tone.js)
let fireworksSynth;
let countdownBeep;

// === Preload Assets ===
function preload() {
// Load Fonts from Fontsource CDN
// Montserrat Bold for main text and countdown
montserratBold = loadFont('https://unpkg.com/@fontsource/montserrat@latest/files/montserrat-latin-700-normal.woff');
// Roboto Regular for ticker tape
robotoRegular = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');

// --- Ball Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// In a real sketch, you would load p5.Image objects like this:
// ballIcons[0] = loadImage('path/to/blue_ghost.png');
// ballIcons[1] = loadImage('path/to/green_turtle.png');
// ...and then draw them in the Ball.display() method using image()

ballIcons = [
// 0: Blue Ghost lunar lander silhouette
(size) => {
fill(silver);
noStroke();
triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3);
rectMode(CENTER);
rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 1: Green turtle
(size) => {
fill(seaGreen);
noStroke();
ellipse(0, 0, size * 0.7, size * 0.5); // Body
ellipse(0, -size * 0.2, size * 0.3, size * 0.3); // Head
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 1
rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); // Leg 2
},
// 2: Solar panels
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
rect(0, 0, size * 0.8, size * 0.6);
fill(midnightBlue);
rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta);
strokeWeight(2);
line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25);
line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15);
line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 3: Cowboy hat
(size) => {
fill(champagne);
noStroke();
ellipse(0, size * 0.2, size * 0.8, size * 0.3); // Brim
rectMode(CENTER);
rect(0, -size * 0.1, size * 0.5, size * 0.4, 5); // Crown
fill(gold);
rect(0, size * 0.05, size * 0.5, size * 0.1); // Band
},
// 4: Colossal squid tentacle
(size) => {
fill(silver);
noStroke();
rectMode(CORNER);
beginShape();
vertex(-size * 0.2, -size * 0.4);
bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4);
bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4);
endShape(CLOSE);
fill(gold);
ellipse(-size * 0.1, -size * 0.2, size * 0.1);
ellipse(size * 0.1, 0, size * 0.1);
ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold);
noStroke();
rectMode(CENTER);
// Main key
ellipse(0, -size * 0.2, size * 0.2, size * 0.2); // Ring
rect(0, 0, size * 0.05, size * 0.4); // Shaft
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); // Bit
// Cross key
rect(0, 0, size * 0.4, size * 0.05);
rect(0, 0, size * 0.05, size * 0.4);
// USA flag detail
fill(255);
rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15);
fill(255, 0, 0);
rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 6: Football + heart (Taylor Swift & Travis Kelce engaged)
(size) => {
fill(139, 69, 19); // Brown
noStroke();
ellipse(0, 0, size * 0.6, size * 0.3); // Football
fill(255);
rectMode(CENTER);
rect(0, 0, size * 0.4, size * 0.05); // Laces
rect(0, -size * 0.05, size * 0.05, size * 0.05);
rect(0, size * 0.05, size * 0.05, size * 0.05);
fill(255, 0, 0); // Red heart
beginShape();
vertex(0, size * 0.2);
bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2);
bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2);
endShape(CLOSE);
},
// 7: AI circuit patterns (GPT-5, $1.5T AI investment boom)
(size) => {
fill(magenta);
noStroke();
rectMode(CENTER);
for (let i = 0; i < 5; i++) {
rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1);
}
stroke(magenta);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4),
random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4));
}
}
];

// --- Particle Icons (Replace with your actual images) ---
// For demonstration, I'm using functions that draw simple shapes.
// bitcoinIcon = loadImage('path/to/bitcoin.png');
// musicNoteIcon = loadImage('path/to/music_note.png');
bitcoinIcon = (size) => {
fill(gold);
noStroke();
rectMode(CENTER);
rect(0, 0, size, size);
fill(0);
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(size * 0.8);
text('₿', 0, 0);
};
musicNoteIcon = (size) => {
fill(255);
noStroke();
ellipse(0, size * 0.2, size * 0.5, size * 0.3);
rectMode(CENTER);
rect(size * 0.15, -size * 0.05, size * 0.1, size * 0.5);
line(size * 0.15, -size * 0.3, size * 0.4, -size * 0.3);
};

// --- Countdown Icons (Replace with your actual images) ---
// For each number from 10 down to 1, define an icon or drawing function
// countdownIcons[0] = loadImage('path/to/icon_for_10.png');
// countdownIcons[1] = loadImage('path/to/icon_for_9.png');
// ...
countdownIcons = [
// 10: Blue Ghost lunar lander
(size) => {
fill(silver); noStroke(); triangle(-size * 0.4, size * 0.2, size * 0.4, size * 0.2, 0, -size * 0.4);
ellipse(0, size * 0.1, size * 0.6, size * 0.3); rectMode(CENTER); rect(0, size * 0.4, size * 0.2, size * 0.2);
},
// 9: Green turtle
(size) => {
fill(seaGreen); noStroke(); ellipse(0, 0, size * 0.7, size * 0.5); ellipse(0, -size * 0.2, size * 0.3, size * 0.3);
rect(-size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5); rect(size * 0.2, size * 0.15, size * 0.15, size * 0.25, 5);
},
// 8: Solar panels
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.8, size * 0.6); fill(midnightBlue); rect(0, 0, size * 0.7, size * 0.5);
stroke(magenta); strokeWeight(2); line(-size * 0.35, -size * 0.25, size * 0.35, -size * 0.25); line(-size * 0.35, -size * 0.05, size * 0.35, -size * 0.05);
line(-size * 0.35, size * 0.15, size * 0.35, size * 0.15); line(-size * 0.35, size * 0.35, size * 0.35, size * 0.35);
},
// 7: Cowboy hat
(size) => {
fill(champagne); noStroke(); ellipse(0, size * 0.2, size * 0.8, size * 0.3); rectMode(CENTER); rect(0, -size * 0.1, size * 0.5, size * 0.4, 5);
fill(gold); rect(0, size * 0.05, size * 0.5, size * 0.1);
},
// 6: Colossal squid tentacle
(size) => {
fill(silver); noStroke(); rectMode(CORNER); beginShape(); vertex(-size * 0.2, -size * 0.4); bezierVertex(-size * 0.3, -size * 0.2, -size * 0.3, size * 0.2, -size * 0.2, size * 0.4);
vertex(size * 0.2, size * 0.4); bezierVertex(size * 0.3, size * 0.2, size * 0.3, -size * 0.2, size * 0.2, -size * 0.4); endShape(CLOSE);
fill(gold); ellipse(-size * 0.1, -size * 0.2, size * 0.1); ellipse(size * 0.1, 0, size * 0.1); ellipse(-size * 0.1, size * 0.2, size * 0.1);
},
// 5: Vatican keys with USA flag
(size) => {
fill(gold); noStroke(); rectMode(CENTER); ellipse(0, -size * 0.2, size * 0.2, size * 0.2); rect(0, 0, size * 0.05, size * 0.4);
rect(size * 0.05, size * 0.15, size * 0.1, size * 0.1); rect(0, 0, size * 0.4, size * 0.05); rect(0, 0, size * 0.05, size * 0.4);
fill(255); rect(size * 0.1, -size * 0.1, size * 0.2, size * 0.15); fill(255, 0, 0); rect(size * 0.1, 0, size * 0.2, size * 0.05);
rect(size * 0.1, size * 0.05, size * 0.2, size * 0.05);
},
// 4: Football + heart
(size) => {
fill(139, 69, 19); noStroke(); ellipse(0, 0, size * 0.6, size * 0.3); fill(255); rectMode(CENTER); rect(0, 0, size * 0.4, size * 0.05);
rect(0, -size * 0.05, size * 0.05, size * 0.05); rect(0, size * 0.05, size * 0.05, size * 0.05); fill(255, 0, 0); beginShape();
vertex(0, size * 0.2); bezierVertex(size * 0.2, 0, size * 0.4, 0, size * 0.2, -size * 0.2); bezierVertex(0, -size * 0.4, -size * 0.2, -size * 0.2, -size * 0.4, 0);
bezierVertex(-size * 0.2, 0, 0, size * 0.2, 0, size * 0.2); endShape(CLOSE);
},
// 3: AI circuit patterns
(size) => {
fill(magenta); noStroke(); rectMode(CENTER); for (let i = 0; i < 5; i++) { rect(random(-size * 0.3, size * 0.3), random(-size * 0.3, size * 0.3), size * 0.1, size * 0.1); }
stroke(magenta); strokeWeight(2); for (let i = 0; i < 10; i++) { line(random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4), random(-size * 0.4, size * 0.4)); }
},
// 2: Confetti (generic celebration)
(size) => {
fill(gold); noStroke(); rectMode(CENTER); rect(0, 0, size * 0.6, size * 0.6);
fill(seaGreen); rect(-size * 0.15, -size * 0.15, size * 0.3, size * 0.3);
fill(magenta); rect(size * 0.15, size * 0.15, size * 0.3, size * 0.3);
},
// 1: Firework (generic explosion)
(size) => {
fill(gold); noStroke(); ellipse(0, 0, size * 0.8, size * 0.8);
fill(magenta); ellipse(-size * 0.2, -size * 0.2, size * 0.3, size * 0.3);
fill(seaGreen); ellipse(size * 0.2, size * 0.2, size * 0.3, size * 0.3);
}
];

// --- Audio Setup (Tone.js) ---
// Create a PolySynth for fireworks
fireworksSynth = new Tone.PolySynth(Tone.Synth, {
oscillator: { type: "square" },
envelope: { attack: 0.05, decay: 0.2, sustain: 0.1, release: 0.5 },
volume: -10
}).toDestination();

// Create a SimpleSynth for countdown beep
countdownBeep = new Tone.Synth({
oscillator: { type: "sine" },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.1 },
volume: -10
}).toDestination();
}

// === Setup Function ===
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100); // Using HSB for easier color manipulation
noStroke();

// Initialize main objects
ball = new Ball();
tickerTape = new TickerTape();
countdownTimer = new Countdown();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();

// Initialize particle systems
particleSystems.push(new ParticleSystem(bitcoinIcon, color(gold), 0.5)); // Bitcoin particles
particleSystems.push(new ParticleSystem(musicNoteIcon, color(255), 0.5)); // Music notes
particleSystems.push(new ParticleSystem(null, color(20, 100, 100), 0.8, true)); // Flame particles
particleSystems.push(new ParticleSystem(null, color(120, 100, 100), 0.6, false, true)); // Lightning bolts

// Create UI elements
createUI();
}

// === Draw Function ===
function draw() {
// Background: Starry NYC night sky
background(midnightBlue);

// Update and display ticker tape
tickerTape.update();
tickerTape.display();

switch (currentState) {
case PRE_DROP:
// Display initial "Happy New Year!" or "Get Ready!" message
displayPreDropMessage();
break;

case DROPPING:
// Update and display ball
ball.update();
ball.display();

// Update and display particles
for (let ps of particleSystems) {
ps.update();
ps.display();
}

// Update and display countdown (now driven by ball's dropProgress)
countdownTimer.update(ball.dropProgress);
countdownTimer.display();

// Check for state transition to EXPLOSION
if (ball.dropProgress >= 1) {
currentState = EXPLOSION;
initExplosion();
}
break;

case EXPLOSION:
// Display "2026"
display2026();

// Update and display confetti
confettiSystem.update();
confettiSystem.display();

// Update and display fireworks
fireworkSystem.update();
fireworkSystem.display();

// Optionally, transition back to PRE_DROP after some time
if (frameCount % 600 === 0) { // After about 10 seconds of explosion
resetSketch();
}
break;
}
}

// === UI Elements ===
function createUI() {
// Slider for ball drop speed
dropSpeedSlider = createSlider(0.001, 0.01, ballDropSpeed, 0.0005);
dropSpeedSlider.position(10, 10);
dropSpeedSlider.style('width', '150px');
dropSpeedSlider.input(() => {
ballDropSpeed = dropSpeedSlider.value();
if (currentState === DROPPING) ball.dropSpeed = ballDropSpeed;
});

// Mute button
muteButton = createButton('Mute');
muteButton.position(180, 10);
muteButton.mousePressed(toggleMute);
}

function toggleMute() {
isMuted = !isMuted;
muteButton.html(isMuted ? 'Unmute' : 'Mute');
Tone.Destination.mute = isMuted; // Mute/unmute all Tone.js audio
}

// === Mouse Press Interaction (Launch extra fireworks) ===
function mousePressed() {
if (currentState === EXPLOSION) {
fireworkSystem.addFirework(mouseX, mouseY, 0); // Launch a firework at mouse position
} else if (currentState === PRE_DROP) {
// Start the ball drop on click/tap
currentState = DROPPING;
ball.startDrop();
// countdownTimer.startCountdown(); // Removed: Countdown now implicitly starts with ball.update()
}
}

// === State-Specific Displays ===
function displayPreDropMessage() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.08);
fill(gold);
text("Click or Tap to Start", width / 2, height / 2 - height * 0.1);
textSize(width * 0.04);
fill(silver);
text("2025 Rewind Ball Drop", width / 2, height / 2);
pop();
}

function initExplosion() {
// Generate lots of confetti
for (let i = 0; i < 500; i++) {
confettiSystem.addConfetti(width / 2, height * 0.9);
}
// Launch initial fireworks
for (let i = 0; i < 5; i++) {
fireworkSystem.addFirework(random(width * 0.2, width * 0.8), height, random(-PI / 4, -3 * PI / 4));
}
}

function display2026() {
push();
textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(width * 0.15);
fill(gold);
text("2026", width / 2, height / 2);
pop();
}

function resetSketch() {
currentState = PRE_DROP;
ball.reset();
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem(); // Clear confetti
fireworkSystem = new FireworkSystem(); // Clear fireworks
// Clear all particle systems
for (let ps of particleSystems) {
ps.particles = [];
}
}

// === Window Resized Function ===
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
ball.reset(); // Recenter ball
tickerTape.reset();
countdownTimer.reset();
confettiSystem = new ConfettiSystem();
fireworkSystem = new FireworkSystem();
// Adjust UI element positions if necessary
dropSpeedSlider.position(10, 10);
muteButton.position(180, 10);
}

// === Ball Class ===
class Ball {
constructor() {
this.reset();
}

reset() {
this.x = width / 2;
this.y = height * 0.15; // Starting position at the top
this.size = min(width, height) * 0.2;
this.targetY = height * 0.9; // Target position at the bottom
this.dropProgress = 0; // 0 to 1 for easing
this.dropSpeed = ballDropSpeed;
this.currentIconIndex = 0;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
this.rotation = 0;
}

startDrop() {
this.dropProgress = 0;
this.dropSpeed = ballDropSpeed;
}

update() {
if (this.dropProgress < 1) {
// Eased descent
this.dropProgress = min(this.dropProgress + this.dropSpeed, 1);
// Using a cubic ease-in-out function for smooth acceleration and deceleration
let easedProgress = this.easeInOutCubic(this.dropProgress);
this.y = lerp(height * 0.15, this.targetY, easedProgress);

this.rotation += TWO_PI / 360; // Gentle rotation

// Cycle ball icons
this.iconChangeTimer--;
if (this.iconChangeTimer <= 0) {
this.currentIconIndex = (this.currentIconIndex + 1) % ballIcons.length;
this.iconChangeTimer = ICON_CHANGE_INTERVAL;
}

// Generate particles based on ball's position
if (frameCount % 10 === 0) { // Generate particles every 10 frames
let numParticles = 5;
let speedFactor = map(this.dropProgress, 0, 1, 0.5, 2); // Particles speed up as ball drops
particleSystems[0].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(gold)); // Bitcoin
particleSystems[1].addParticles(this.x, this.y + this.size / 2, numParticles, speedFactor, color(255)); // Music notes
particleSystems[2].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(20, 100, 100, 100)); // Flames
particleSystems[3].addParticles(this.x, this.y + this.size / 2, numParticles / 2, speedFactor, color(120, 100, 100, 100)); // Lightning bolts
}
}
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

// Draw disco ball texture
const numFacets = 30; // Number of facets around the ball
const facetSize = this.size * 0.1;
const radius = this.size / 2;

for (let i = 0; i < numFacets; i++) {
let angle1 = map(i, 0, numFacets, 0, TWO_PI);
let angle2 = map(i + 1, 0, numFacets, 0, TWO_PI);

let x1 = radius * cos(angle1);
let y1 = radius * sin(angle1);
let x2 = radius * cos(angle2);
let y2 = radius * sin(angle2);

// Create a gradient effect for sparkle
let c1 = color(silver);
let c2 = color(silver);
let c3 = color(gold);

// Randomly choose a color for each facet to simulate sparkle
let r = random(1);
if (r < 0.2) {
c1 = color(magenta);
c2 = color(magenta);
c3 = color(silver);
} else if (r < 0.4) {
c1 = color(seaGreen);
c2 = color(seaGreen);
c3 = color(silver);
} else if (r < 0.6) {
c1 = color(gold);
c2 = color(gold);
c3 = color(silver);
}


// Draw a "facet" (a small square or rectangle)
rectMode(CENTER);
fill(c1);
rect(x1, y1, facetSize, facetSize);

// Draw a small highlight
fill(255, 50);
ellipse(x1 + random(-facetSize / 4, facetSize / 4), y1 + random(-facetSize / 4, facetSize / 4), facetSize * random(0.2, 0.5));
}

// Overlay current icon
push();
fill(midnightBlue);
noStroke();
ellipse(0, 0, this.size * 0.7); // Dark circle behind icon for contrast
fill(255);
noStroke();
let iconSize = this.size * 0.5;
if (ballIcons[this.currentIconIndex]) {
if (typeof ballIcons[this.currentIconIndex] === 'function') {
ballIcons[this.currentIconIndex](iconSize); // Call drawing function
} else if (ballIcons[this.currentIconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(ballIcons[this.currentIconIndex], 0, 0, iconSize, iconSize); // Draw image
}
}
pop();

pop();
}

// Easing function: Cubic ease-in-out
easeInOutCubic(t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2;
return 0.5 * (t * t * t + 2);
}
}

// === Particle Class ===
class Particle {
constructor(x, y, vx, vy, size, color, icon, isFlame, isLightning) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.size = size;
this.color = color;
this.icon = icon;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
this.lifetime = 255; // For alpha fading
this.rotation = random(TWO_PI);
this.rotationSpeed = random(-0.1, 0.1);
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.05; // Gravity
this.lifetime -= 5;
this.rotation += this.rotationSpeed;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rotation);

let currentAlpha = map(this.lifetime, 0, 255, 0, 100);
fill(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
noStroke();

if (this.isFlame) {
// Draw flame shape
ellipse(0, 0, this.size, this.size * 2);
ellipse(0, -this.size * 0.5, this.size * 0.8, this.size * 1.5);
ellipse(0, -this.size, this.size * 0.6, this.size);
// Add a yellow core
fill(60, 100, 100, currentAlpha * 1.2); // Yellow, slightly brighter
ellipse(0, 0, this.size * 0.6, this.size);
} else if (this.isLightning) {
// Draw lightning bolt
stroke(hue(this.color), saturation(this.color), brightness(this.color), currentAlpha);
strokeWeight(2);
line(-this.size / 2, -this.size / 2, this.size / 2, this.size / 2);
line(this.size / 2, -this.size / 2, -this.size / 2, this.size / 2);
line(0, -this.size / 2, 0, this.size / 2);
line(-this.size / 2, 0, this.size / 2, 0);
} else if (this.icon) {
// Draw image icon or custom shape function
if (typeof this.icon === 'function') {
this.icon(this.size); // Call drawing function
} else if (this.icon instanceof p5.Image) {
imageMode(CENTER);
image(this.icon, 0, 0, this.size, this.size); // Draw image
}
} else {
// Default: draw a circle
ellipse(0, 0, this.size);
}

pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ParticleSystem Class ===
class ParticleSystem {
constructor(icon, color, sizeFactor, isFlame, isLightning) {
this.particles = [];
this.icon = icon;
this.color = color;
this.sizeFactor = sizeFactor || 1;
this.isFlame = isFlame || false;
this.isLightning = isLightning || false;
}

addParticles(x, y, count, speedFactor, colorOverride) {
for (let i = 0; i < count; i++) {
let angle = random(PI); // Emit upwards
let speed = random(1, 3) * speedFactor;
let vx = speed * cos(angle);
let vy = -speed * sin(angle); // Negative for upward motion
let size = random(10, 20) * this.sizeFactor;
let particleColor = colorOverride || this.color;
this.particles.push(new Particle(x, y, vx, vy, size, particleColor, this.icon, this.isFlame, this.isLightning));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
}

display() {
for (let particle of this.particles) {
particle.display();
}
}
}

// === TickerTape Class ===
class TickerTape {
constructor() {
this.y = height * 0.95;
this.headlines = [
"FIRST AMERICAN POPE",
"SOLAR OVERTAKES COAL",
"GREEN TURTLE RECOVERY",
"BLUE GHOST LANDS ON MOON",
"BEYONCÉ'S COWBOY CARTER GRAMMY WIN",
"COLOSSAL SQUID FILMED IN WILD",
"TAYLOR SWIFT & TRAVIS KELCE ENGAGED",
"GPT-5 LAUNCHES",
"$1.5T AI INVESTMENT BOOM",
"BITCOIN HITS $126K ATH",
"KENDRICK'S 'NOT LIKE US' WINS SONG OF YEAR",
"LA WILDFIRES DEVASTATE REGION"
];
this.scrollSpeed = 1;
this.xOffsets = [];
this.setupHeadlines();
}

setupHeadlines() {
push();
textFont(robotoRegular);
textSize(width * 0.02);
let currentX = width;
for (let headline of this.headlines) {
this.xOffsets.push(currentX);
currentX += textWidth(headline + " • ") + random(50, 150); // Add spacing
}
pop();
}

reset() {
this.xOffsets = [];
this.setupHeadlines();
}

update() {
for (let i = 0; i < this.xOffsets.length; i++) {
this.xOffsets[i] -= this.scrollSpeed;
// Loop headlines when they go off screen
if (this.xOffsets[i] < -textWidth(this.headlines[i] + " • ")) {
// Find the rightmost headline and place this one after it
let maxRight = 0;
for (let j = 0; j < this.xOffsets.length; j++) {
maxRight = max(maxRight, this.xOffsets[j] + textWidth(this.headlines[j] + " • "));
}
this.xOffsets[i] = maxRight + random(50, 150);
}
}
}

display() {
push();
fill(champagne);
textFont(robotoRegular);
textSize(width * 0.02);
textAlign(LEFT, CENTER);
for (let i = 0; i < this.xOffsets.length; i++) {
text(this.headlines[i] + " • ", this.xOffsets[i], this.y);
}
pop();
}
}

// === Countdown Class ===
class Countdown {
constructor() {
this.reset();
}

reset() {
this.number = 10;
this.x = width / 2;
this.y = height / 2;
this.size = min(width, height) * 0.15;
this.state = PRE_DROP; // PRE_DROP, COUNTING, FLASHING
this.iconIndex = 0; // Index for current icon
this.flashTimer = 0;
this.lastNumber = 11; // To track when the number changes (set to 11 to trigger first 10)
}

// Modified update function to take ball's dropProgress
update(dropProgress) {
if (dropProgress < 1) {
this.state = COUNTING;
// Map dropProgress (0 to 1) to countdown numbers (10 to 1)
// We want dropProgress 0 to be 10, dropProgress ~0.9 to be 1
let newNumber = max(1, floor(10 - dropProgress * 9));

if (newNumber !== this.number) {
this.lastNumber = this.number; // Store old number for icon selection
this.number = newNumber;
this.state = FLASHING;
// Icon index for flashback: 10 -> 0, 9 -> 1, ..., 1 -> 9
this.iconIndex = 10 - this.lastNumber;
this.flashTimer = 60; // Flash for 1 second (approx 1 second at 60fps)
if (!isMuted) countdownBeep.triggerAttackRelease("C4", "8n");
}
} else {
this.state = PRE_DROP; // Countdown finished
}

if (this.state === FLASHING) {
this.flashTimer--;
if (this.flashTimer <= 0) {
this.state = COUNTING;
}
}
}

display() {
if (currentState === DROPPING && this.state !== PRE_DROP) {
push();
translate(this.x, this.y);

// Draw glowing effect
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 30;
drawingContext.shadowColor = color(gold);

textAlign(CENTER, CENTER);
textFont(montserratBold);
textSize(this.size);
fill(gold);
text(this.number, 0, 0);

// Draw flashback icon if flashing
if (this.state === FLASHING && countdownIcons[this.iconIndex]) {
let iconSize = this.size * 0.6;
let iconAlpha = map(this.flashTimer, 0, 60, 0, 100); // Fade in/out over 1 second
push();
translate(0, -this.size * 0.8); // Position above number
fill(hue(gold), saturation(gold), brightness(gold), iconAlpha);
noStroke();
if (typeof countdownIcons[this.iconIndex] === 'function') {
countdownIcons[this.iconIndex](iconSize);
} else if (countdownIcons[this.iconIndex] instanceof p5.Image) {
imageMode(CENTER);
image(countdownIcons[this.iconIndex], 0, 0, iconSize, iconSize);
}
pop();
}

pop();
}
}
}

// === Confetti Class ===
class Confetti {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = random(-5, 5);
this.vy = random(-10, -3);
this.rot = random(TWO_PI);
this.rotSpeed = random(-0.1, 0.1);
this.size = random(5, 15);
this.color = random([color(seaGreen), color(gold), color(midnightBlue)]);
this.lifetime = 120; // Lasts for 2 seconds
}

update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.2; // Gravity
this.rot += this.rotSpeed;
this.lifetime--;
}

display() {
push();
translate(this.x, this.y);
rotate(this.rot);
fill(this.color);
noStroke();
rectMode(CENTER);
rect(0, 0, this.size, this.size / 2);
pop();
}

isDead() {
return this.lifetime <= 0;
}
}

// === ConfettiSystem Class ===
class ConfettiSystem {
constructor() {
this.confetti = [];
}

addConfetti(x, y) {
this.confetti.push(new Confetti(x, y));
}

update() {
for (let i = this.confetti.length - 1; i >= 0; i--) {
this.confetti[i].update();
if (this.confetti[i].isDead()) {
this.confetti.splice(i, 1);
}
}
}

display() {
for (let c of this.confetti) {
c.display();
}
}
}

// === FireworkExplosion Class ===
class FireworkExplosion {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
this.lifetime = 120; // 2 seconds
this.initParticles();
if (!isMuted) fireworksSynth.triggerAttackRelease(["C5", "E5", "G5"], "4n");
}

initParticles() {
let numParticles = random(50, 100);
for (let i = 0; i < numParticles; i++) {
let angle = random(TWO_PI);
let speed = random(1, 5);
let vx = speed * cos(angle);
let vy = speed * sin(angle);
let size = random(2, 5);
this.particles.push(new Particle(this.x, this.y, vx, vy, size, this.color));
}
}

update() {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
this.lifetime--;
}

display() {
for (let p of this.particles) {
p.display();
}
}

isDead() {
return this.lifetime <= 0 && this.particles.length === 0;
}
}

// === Firework Class ===
class Firework {
constructor(x, y, angle) {
this.x = x;
this.y = y;
this.vy = random(-10, -5); // Launch speed
this.vx = random(-2, 2); // Slight horizontal drift
this.color = random([color(magenta), color(gold), color(seaGreen), color(silver)]);
this.explosions = [];
this.state = 'launch'; // 'launch', 'explode', 'dead'
this.fuseTime = random(60, 120); // Time before explosion
this.angle = angle || -PI / 2; // Default upwards
}

update() {
if (this.state === 'launch') {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // Gravity slows launch
this.fuseTime--;
if (this.fuseTime <= 0 || this.vy >= 0) { // Explode when fuse runs out or rocket starts falling
this.state = 'explode';
this.explosions.push(new FireworkExplosion(this.x, this.y, this.color));
}
} else if (this.state === 'explode') {
for (let i = this.explosions.length - 1; i >= 0; i--) {
this.explosions[i].update();
if (this.explosions[i].isDead()) {
this.explosions.splice(i, 1);
}
}
if (this.explosions.length === 0) {
this.state = 'dead';
}
}
}

display() {
if (this.state === 'launch') {
push();
translate(this.x, this.y);
rotate(this.angle + PI / 2); // Orient rocket upwards
fill(this.color);
triangle(-5, 0, 5, 0, 0, -20); // Simple rocket shape
fill(gold);
ellipse(0, 5, 10, 10); // Rocket base
pop();
} else if (this.state === 'explode') {
for (let e of this.explosions) {
e.display();
}
}
}

isDead() {
return this.state === 'dead';
}
}

// === FireworkSystem Class ===
class FireworkSystem {
constructor() {
this.fireworks = [];
}

addFirework(x, y, angle) {
this.fireworks.push(new Firework(x, y, angle));
}

update() {
for (let i = this.fireworks.length - 1; i >= 0; i--) {
this.fireworks[i].update();
if (this.fireworks[i].isDead()) {
this.fireworks.splice(i, 1);
}
}
}

display() {
for (let f of this.fireworks) {
f.display();
}
}
}
```

---
The `index.html` and `style.css` files remain unchanged from the previous version.

### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025 Rewind Ball Drop</title>
<!-- p5.js library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Tone.js library for audio -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script>
<!-- Link to your custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Link to your sketch.js file -->
<script src="sketch.js"></script>
</body>
</html>
```

### `style.css`

```css
body {
margin: 0;
padding: 0;
overflow: hidden;
}

canvas {
display: block; /* Remove extra space below canvas */
}

html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
}

/* Style for slider and button */
input[type="range"] {
width: 150px;
height: 5px;
background: #c9a227; /* Champagne */
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-appearance: none;
appearance: none;
border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffd700; /* Gold */
cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffd700; /* Gold */
cursor: pointer;
}

button {
background-color: #0a1628; /* Midnight Blue */
color: #ffd700; /* Gold */
border: 2px solid #ffd700;
padding: 5px 10px;
font-family: 'Montserrat', sans-serif; /* Use your chosen font */
font-weight: bold;
cursor: pointer;
border-radius: 5px;
outline: none;
-webkit-transition: .2s;
transition: background-color .2s, color .2s;
}

button:hover {
background-color: #ffd700; /* Gold */
color: #0a1628; /* Midnight Blue */
}
```