`data/artifacts/0ac1af2eaed4/gemma3-12b.html`

134 lines
<!DOCTYPE html>
<html><head>
<title>Fireworks Simulator</title>
<style>
body { margin: 0; overflow: hidden; background-color: black }
canvas { display: block }
</style>
</head><body>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let fireworks = [];
const numFireworks = 10; // Adjust for density

class Firework {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = canvas.height;
    this.angle = Math.random() * Math.PI * 2;
    this.speed = Math.random() * 5 + 3;
    this.gravity = 0.1;
    this.friction = 0.98;
    this.particles = [];
    this.lifespan = 100;
  }

  launch() {
    this.velocity = { x: Math.cos(this.angle) * this.speed, y: -Math.sin(this.angle) * this.speed };
  }

  update() {
    if (!this.launched) return;
    this.velocity.x *= this.friction;
    this.velocity.y += this.gravity;
    this.x += this.velocity.x;
    this.y += this.velocity.y;
    this.lifespan--;

    if (this.lifespan <= 0) {
      this.explode();
      return true; // Signal to remove the firework
    }
    return false;
  }

  explode() {
    const particleCount = Math.floor(Math.random() * 30 + 30);
    for (let i = 0; i < particleCount; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = Math.random() * 2 + 1;
      this.particles.push({ x: this.x, y: this.y, angle, speed });
    }
  }

  draw() {
    if (!this.launched) return;

    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
  }

  drawParticles() {
      for (let i = 0; i < this.particles.length; i++) {
          const particle = this.particles[i];
          particle.angle += Math.random()*0.05 - 0.025; // slight random drift
          particle.speed *= 0.98;

          ctx.beginPath();
          ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
          ctx.fill();

          particle.x += Math.cos(particle.angle) * particle.speed;
          particle.y += -Math.sin(particle.angle) * particle.speed;
      }
  }
}


function init() {
    for (let i = 0; i < numFireworks; i++) {
        fireworks.push(new Firework());
    }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < fireworks.length; i++) {
    const firework = fireworks[i];
    if (firework.update()) {
        fireworks.splice(i, 1); // Remove expired/exploded fireworks
        i--;
      continue;
    }

    firework.draw();
    firework.drawParticles();
  }

  requestAnimationFrame(draw);
}


canvas.addEventListener('click', () => {
  const newFirework = new Firework();
  newFirework.launch();
  fireworks.push(newFirework);
});



function autoShow() {
    setInterval(() => {
        const newFirework = new Firework();
        newFirework.launch();
        fireworks.push(newFirework);
    }, 1500); // Adjust interval as needed
}

init();
draw();
autoShow();


</script>
</body></html>