Creative Canvas Animations

Let's dive into the world of creative coding with HTML5 Canvas and create mesmerizing animations!

The Magic of Canvas

Canvas allows you to draw graphics, create animations, and build interactive experiences directly in the browser.

Particle Animation

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
    this.radius = Math.random() * 3 + 1;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#00ffff';
    ctx.fill();
  }
}

const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push(new Particle(
    Math.random() * canvas.width,
    Math.random() * canvas.height
  ));
}

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

  particles.forEach(particle => {
    particle.update();
    particle.draw();
  });

  requestAnimationFrame(animate);
}

animate();

Cool Effects to Try

• Particle systems: Create flowing particles
• Generative art: Mathematical patterns
• Interactive visualizations: Mouse-responsive effects
• Fractal patterns: Beautiful recursive shapes

Tips for Vibe Coding

1. Experiment freely - there's no "right" answer
2. Use colors that pop
3. Add randomness for organic feels
4. Make it interactive
5. Have fun!

Get creative and make the web more beautiful!