fireworknighthamrdsky/index.js

This JavaScript code generates a simple animation of fireworks bursting in the night sky on a canvas element in a web browser.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class FireworkParticle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.radius = 2;
    this.velocity = {
      x: Math.random() * 6 - 3,
      y: Math.random() * 6 - 3
    };
    this.alpha = 1;
  }
  update() {
    this.x += this.velocity.x;
    this.y += this.velocity.y;
    this.alpha -= 0.01;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.alpha;
    ctx.fill();
    ctx.closePath();
  }
}

function createFirework(x, y) {
  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
  for (let i = 0; i < 50; i++) {
    const particle = new FireworkParticle(x, y, colors[Math.floor(Math.random() * colors.length)]);
    fireworks.push(particle);
  }
}

const fireworks = [];
window.addEventListener('click', (event) => {
  createFirework(event.clientX, event.clientY);
});

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  fireworks.forEach((firework, index) => {
    firework.update();
    firework.draw();
    if (firework.alpha <= 0) {
      fireworks.splice(index, 1);
    }
  });
  requestAnimationFrame(animate);
}

animate();

// Additional functionality starts here

// Function to randomly generate firework explosions
function randomFireworks() {
  const randomX = Math.random() * canvas.width;
  const randomY = Math.random() * canvas.height;
  createFirework(randomX, randomY);
}

function drawRandomShape() {
  const shapes = ['circle', 'rectangle', 'triangle'];
  const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
  switch (randomShape) {
    case 'circle':
      ctx.beginPath();
      ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 50, 0, Math.PI * 2);
      ctx.fillStyle = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;
      ctx.fill();
      ctx.closePath();
      break;
    case 'rectangle':
      ctx.fillStyle = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;
      ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, Math.random() * 100);
      break;
    case 'triangle':
      ctx.beginPath();
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.fillStyle = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;
      ctx.fill();
      ctx.closePath();
      break;
  }
}

function randomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function randomPosition() {
  return {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height
  };
}

function drawRandomLine() {
  ctx.beginPath();
  ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
  ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
  ctx.strokeStyle = randomColor();
  ctx.stroke();
  ctx.closePath();
}

function drawRandomText() {
  const texts = ['Hello', 'World', 'JavaScript', 'Canvas', 'Random'];
  const randomText = texts[Math.floor(Math.random() * texts.length)];
  ctx.font = `${Math.random() * 50}px Arial`;
  ctx.fillStyle = randomColor();
  ctx.fillText(randomText, Math.random() * canvas.width, Math.random() * canvas.height);
}

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generateRandomColor() {
  const randomR = generateRandomNumber(0, 255);
  const randomG = generateRandomNumber(0, 255);
  const randomB = generateRandomNumber(0, 255);
  return `rgb(${randomR},${randomG},${randomB})`;
}

function drawRandomRectangles() {
  for (let i = 0; i < 10; i++) {
    const randomX = generateRandomNumber(0, canvas.width);
    const randomY = generateRandomNumber(0, canvas.height);
    const randomWidth = generateRandomNumber(10, 100);
    const randomHeight = generateRandomNumber(10, 100);
    const randomColor = generateRandomColor();
    ctx.fillStyle = randomColor;
    ctx.fillRect(randomX, randomY, randomWidth, randomHeight);
  }
}

function drawRandomCircles() {
  for (let i = 0; i < 10; i++) {
    const randomX = generateRandomNumber(0, canvas.width);
    const randomY = generateRandomNumber(0, canvas.height);
    const randomRadius = generateRandomNumber(5, 50);
    const randomColor = generateRandomColor();
    ctx.beginPath();
    ctx.arc(randomX, randomY, randomRadius, 0, Math.PI * 2);
    ctx.fillStyle = randomColor;
    ctx.fill();
    ctx.closePath();
  }
}

function drawRandomLines() {
  for (let i = 0; i < 10; i++) {
    const startX = generateRandomNumber(0, canvas.width);
    const startY = generateRandomNumber(0, canvas.height);
    const endX = generateRandomNumber(0, canvas.width);
    const endY = generateRandomNumber(0, canvas.height);
    const randomColor = generateRandomColor();
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = randomColor;
    ctx.stroke();
    ctx.closePath();
  }
}

function drawRandomText() {
  const texts = ['Hello', 'World', 'JavaScript', 'Canvas', 'Random', 'Text'];
  ctx.font = '20px Arial';
  for (let i = 0; i < texts.length; i++) {
    const randomX = generateRandomNumber(0, canvas.width);
    const randomY = generateRandomNumber(0, canvas.height);
    const randomColor = generateRandomColor();
    ctx.fillStyle = randomColor;
    ctx.fillText(texts[i], randomX, randomY);
  }
}

function rotateCanvas() {
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(Math.PI / 180);
  ctx.translate(-canvas.width / 2, -canvas.height / 2);
}

function shakeCanvas() {
  const intensity = 10;
  canvas.style.transform = `translate(${intensity * (Math.random() - 0.5)}px, ${intensity * (Math.random() - 0.5)}px)`;
}

function randomColor() {
  return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
}

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

function drawRandomShapetest() {
  const shape = Math.random() > 0.5 ? 'rectangle' : 'circle';
  ctx.fillStyle = randomColor();
  if (shape === 'rectangle') {
    const width = Math.random() * 100;
    const height = Math.random() * 100;
    const x = Math.random() * (canvas.width - width);
    const y = Math.random() * (canvas.height - height);
    ctx.fillRect(x, y, width, height);
  } else {
    const radius = Math.random() * 50;
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }
}