fireworks/index.html at main · fullstackceo/fireworks

568 lines (475 loc) · 16 KB
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Realistic Random Fireworks</title>
    <style>
      :root {
        --glass: rgba(20, 20, 30, 0.75);
        --border: rgba(255, 255, 255, 0.1);
        --accent: #ff0055;
        --text: #eeeeee;
        box-sizing: border-box;
        user-select: none;
        -webkit-user-select: none;
      body {
        margin: 0;
        overflow: hidden;
        background-color: #000;
        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: var(--text);
      canvas {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      /* Instructions and Buttons */
      .instructions {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
        pointer-events: none;
        z-index: 5;
      .control-btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 10;
        padding: 10px 15px;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid var(--border);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      #autoFireBtn {
        background: var(--glass);
        color: white;
      #autoFireBtn.active {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 15px var(--accent);
      #autoFireBtn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.1);
    </style>
    <canvas id="canvas"></canvas>
    <button id="autoFireBtn" class="control-btn active">Auto Fire: ON</button>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const autoFireBtn = document.getElementById("autoFireBtn");
      // Config - fixed but serving as base for randomization
      let cw = window.innerWidth;
      let ch = window.innerHeight;
      const config = {
        // These are now fixed base values, randomness is applied inside classes
        baseGravity: 0.12,
        baseFriction: 0.96,
        trail: 0.15, // Opacity of the background clear rect (0.05=long trail, 0.5=short trail)
        autoFire: true,
        autoTimer: 0,
        autoInterval: 40,
        soundEnabled: true,
        starCount: 150,
        // --- Sky dynamics for continuous color change ---
        skyHue: 220,
        skySaturation: 100,
        skyLightness: 3,
        skyMaxLightness: 5, // Max lightness (subtle midnight blue)
        skyMinLightness: 1, // Min lightness (closer to pure black)
        skyCycleSpeed: 0.005, // 10x slower transition for subtlety
      // --- AUDIO SYSTEM ---
      const Sound = {
        ctx: null,
        init: function () {
          if (!this.ctx) {
            // Initialize or resume audio context
            this.ctx = new (window.AudioContext || window.webkitAudioContext)();
          if (this.ctx.state === "suspended") {
            this.ctx.resume();
        playExplosion: function () {
          // Ensure audio is enabled and context is available
          if (!config.soundEnabled || !this.ctx) return;
          // Audio generation logic remains the same (noise burst)
          const duration = 1.0;
          const bufferSize = this.ctx.sampleRate * duration;
          const buffer = this.ctx.createBuffer(
            bufferSize,
            this.ctx.sampleRate
          const data = buffer.getChannelData(0);
          for (let i = 0; i < bufferSize; i++) {
            data[i] = Math.random() * 2 - 1;
          const noise = this.ctx.createBufferSource();
          noise.buffer = buffer;
          const filter = this.ctx.createBiquadFilter();
          filter.type = "lowpass";
          filter.frequency.value = 1000;
          const gain = this.ctx.createGain();
          noise.connect(filter);
          filter.connect(gain);
          gain.connect(this.ctx.destination);
          // Volume envelope
          gain.gain.setValueAtTime(0.2, this.ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(
            this.ctx.currentTime + duration
          noise.start(this.ctx.currentTime);
      // Arrays to store active objects
      let fireworks = [];
      let particles = [];
      let stars = [];
      // Initialize Canvas
      canvas.width = cw;
      canvas.height = ch;
      // Helpers
      const random = (min, max) => Math.random() * (max - min) + min;
      const dist = (x1, y1, x2, y2) =>
        Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
      // Resize Handler
      window.addEventListener("resize", () => {
        cw = window.innerWidth;
        ch = window.innerHeight;
        canvas.width = cw;
        canvas.height = ch;
        initStars();
      // UI Logic (simplified)
      autoFireBtn.addEventListener("click", () => {
        config.autoFire = !config.autoFire;
        autoFireBtn.classList.toggle("active");
        autoFireBtn.innerText = `Auto Fire: ${config.autoFire ? "ON" : "OFF"}`;
        // Initialize sound context on first click interaction
        Sound.init();
      // Auto-off timer removed as per user request
      // --- CLASSES ---
      class Star {
        constructor() {
          this.x = random(0, cw);
          this.y = random(0, ch / 1.5);
          this.radius = random(0.5, 1.5);
          this.alpha = random(0.2, 0.8);
          this.decay = random(0.005, 0.02);
          this.direction = 1;
        update() {
          this.alpha += this.decay * this.direction;
          if (this.alpha <= 0.1 || this.alpha >= 0.9) {
            this.direction *= -1;
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
          ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
          ctx.fill();
      class Firework {
        constructor(sx, sy, tx, ty) {
          this.x = sx;
          this.y = sy;
          this.sx = sx;
          this.sy = sy;
          this.tx = tx;
          this.ty = ty;
          this.distanceToTarget = dist(sx, sy, tx, ty);
          this.distanceTraveled = 0;
          this.coordinates = [];
          this.coordinateCount = 3;
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          // Randomize speed and acceleration for varied ascents
          this.speed = random(1.8, 2.5);
          this.acceleration = random(1.04, 1.06);
          this.brightness = random(50, 70);
          this.targetRadius = 1;
          // Random hue for all fireworks
          this.hue = random(0, 360);
        update(index) {
          this.coordinates.pop();
          this.coordinates.unshift([this.x, this.y]);
          if (this.targetRadius < 8) {
            this.targetRadius += 0.3;
          } else {
            this.targetRadius = 1;
          this.speed *= this.acceleration;
          const vx =
            Math.cos(Math.atan2(this.ty - this.sy, this.tx - this.sx)) *
            this.speed;
          const vy =
            Math.sin(Math.atan2(this.ty - this.sy, this.tx - this.sx)) *
            this.speed;
          this.distanceTraveled = dist(
            this.sx,
            this.sy,
            this.x + vx,
            this.y + vy
          if (this.distanceTraveled >= this.distanceToTarget) {
            // Reached target - explode
            createParticles(this.tx, this.ty, this.hue);
            fireworks.splice(index, 1);
          } else {
            this.x += vx;
            this.y += vy;
        draw() {
          ctx.beginPath();
          ctx.moveTo(
            this.coordinates[this.coordinates.length - 1][0],
            this.coordinates[this.coordinates.length - 1][1]
          ctx.lineTo(this.x, this.y);
          ctx.strokeStyle = `hsl(${this.hue}, 100%, ${this.brightness}%)`;
          ctx.stroke();
          // Draw target indicator (fades quickly)
          ctx.beginPath();
          ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
          ctx.stroke();
      class Particle {
        constructor(x, y, hue, explosionSpeed) {
          this.x = x;
          this.y = y;
          this.coordinates = [];
          this.coordinateCount = 5;
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          const angle = random(0, Math.PI * 2);
          // Particle speed based on explosion force, plus minor random variation
          const speed = random(explosionSpeed * 0.7, explosionSpeed * 1.3);
          this.vx = Math.cos(angle) * speed;
          this.vy = Math.sin(angle) * speed;
          // Individual particle physics variation (realistic wobble/fall)
          this.friction = random(
            config.baseFriction * 0.98,
            config.baseFriction * 1.02
          this.gravity = random(
            config.baseGravity * 0.9,
            config.baseGravity * 1.1
          // VASTLY RANDOMIZED BRIGHTNESS (40% to 90%)
          this.hue = random(hue - 20, hue + 20);
          this.brightness = random(40, 90);
          this.alpha = 1;
          this.decay = random(0.01, 0.03);
        update(index) {
          this.coordinates.pop();
          this.coordinates.unshift([this.x, this.y]);
          this.vx *= this.friction;
          this.vy *= this.friction;
          this.vy += this.gravity;
          this.x += this.vx;
          this.y += this.vy;
          this.alpha -= this.decay;
          if (this.alpha <= this.decay) {
            particles.splice(index, 1);
        draw() {
          ctx.beginPath();
          ctx.moveTo(
            this.coordinates[this.coordinates.length - 1][0],
            this.coordinates[this.coordinates.length - 1][1]
          ctx.lineTo(this.x, this.y);
          ctx.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;
          ctx.stroke();
      function createParticles(x, y, hue) {
        Sound.playExplosion();
        // VASTLY RANDOMIZED SIZE (30 to 250 particles)
        let count = Math.floor(random(30, 250));
        // Randomize explosion force/expansion speed
        const explosionSpeed = random(10, 20);
        while (count--) {
          particles.push(new Particle(x, y, hue, explosionSpeed));
      // --- BACKGROUND FUNCTIONS (Dynamic Sky, Moon, NO Mountains) ---
      function drawBackground() {
        // Use config values for a subtle, dynamic midnight blue
        const hue = config.skyHue;
        const sat = config.skySaturation;
        const light = config.skyLightness;
        // Stop 1: Near ground/horizon (Darkest blue)
        const color1 = `hsla(${hue}, ${sat}%, ${Math.max(1, light)}%, 0.95)`;
        // Stop 2: Mid sky color (Subtle blue/black transition)
        const color2 = `hsla(${hue}, ${sat}%, ${light}%, 0.95)`;
        // Stop 3: Sky overhead (Closest to pure black)
        const color3 = `hsla(0, 0%, ${Math.max(0, light * 0.1)}%, 1.0)`;
        const gradient = ctx.createRadialGradient(
          cw / 2,
          ch * 1.2,
          cw * 0.1,
          cw / 2,
          ch * 0.8,
          cw * 1.5
        gradient.addColorStop(0, color1);
        gradient.addColorStop(0.5, color2);
        gradient.addColorStop(1, color3);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, cw, ch);
      function drawMoon() {
        // Position and size (already adjusted and kept as is)
        const x = cw * 0.9;
        const y = ch * 0.1;
        const radius = 25;
        // Reverted to previous brighter color
        const color = "rgba(230, 230, 255, 0.9)";
        ctx.globalCompositeOperation = "source-over";
        // Reverted to previous brighter and less diffused glow
        ctx.shadowColor = "rgba(255, 255, 255, 0.8)";
        ctx.shadowBlur = 25;
        // Draw the moon disc
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        ctx.fillStyle = color;
        ctx.fill();
        // Add a slight crater/texture effect (simple shape)
        ctx.shadowBlur = 0; // Turn off glow for internal details
        // Reverted to previous crater colors/sizes
        ctx.fillStyle = "rgba(180, 180, 200, 0.2)";
        ctx.beginPath();
        ctx.arc(x - 5, y - 5, 8, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(x + 10, y + 10, 5, 0, Math.PI * 2);
        ctx.fill();
        // IMPORTANT: Reset the shadow after the moon is completely drawn
        ctx.shadowBlur = 0;
      function initStars() {
        stars = [];
        for (let i = 0; i < config.starCount; i++) {
          stars.push(new Star());
      // --- MAIN LOOP ---
      function loop() {
        requestAnimationFrame(loop);
        // --- Sky color dynamics for continuous transition ---
        // Slowly cycle lightness (breathing effect between dark blue and black)
        config.skyLightness += config.skyCycleSpeed;
        // Simple cycle logic for lightness
        if (
          config.skyLightness >= config.skyMaxLightness ||
          config.skyLightness <= config.skyMinLightness
          config.skyCycleSpeed *= -1; // Reverse direction
        // Draw background and stars
        ctx.globalCompositeOperation = "source-over";
        drawBackground();
        // Draw the moon
        drawMoon();
        let k = stars.length;
        while (k--) {
          stars[k].update();
          stars[k].draw();
        // Apply the trail fading effect
        // Note: This is drawn over everything EXCEPT the fireworks/particles (which use 'lighter' composite mode)
        ctx.fillStyle = `rgba(0, 0, 0, ${config.trail})`;
        ctx.fillRect(0, 0, cw, ch);
        // Lighter blending mode for the particles (makes them glow)
        ctx.globalCompositeOperation = "lighter";
        // Update Fireworks
        let i = fireworks.length;
        while (i--) {
          fireworks[i].draw();
          fireworks[i].update(i);
        // Update Particles
        let j = particles.length;
        while (j--) {
          particles[j].draw();
          particles[j].update(j);
        // Auto Fire Logic (Highly randomized timing)
        if (config.autoFire) {
          config.autoTimer++;
          if (config.autoTimer >= config.autoInterval) {
            // Launch from bottom center-ish to random spot in top half
            const sx = cw / 2 + random(-200, 200);
            const sy = ch;
            const tx = random(cw * 0.1, cw * 0.9);
            const ty = random(ch * 0.1, ch * 0.5);
            fireworks.push(new Firework(sx, sy, tx, ty));
            config.autoTimer = 0;
            // Wide range for realistic timing (approx 0.5s to 3s between launches)
            config.autoInterval = random(30, 180);
      // --- INTERACTIONS ---
      // Mouse/Touch Click
      canvas.addEventListener("mousedown", (e) => {
        e.preventDefault();
        Sound.init();
        const sx = cw / 2;
        const sy = ch;
        fireworks.push(new Firework(sx, sy, e.clientX, e.clientY));
      // Basic Touch support
      canvas.addEventListener(
        "touchstart",
        (e) => {
          e.preventDefault();
          Sound.init();
          const sx = cw / 2;
          const sy = ch;
          for (let i = 0; i < e.touches.length; i++) {
            fireworks.push(
              new Firework(sx, sy, e.touches[i].clientX, e.touches[i].clientY)
        { passive: false }
      // Start
      initStars();
      loop();
    </script>
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
