CIT (Club d'Informatique et Télécoms) offers free courses taught by INPT students across various tech domains. Our Web Development cell is dedicated to bringing your ideas to life through code - from concept to creation.

CIT Web Development Hub

Learn • Build • Collaborate


# 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

```javascript
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!


Explore fun and interactive animations using HTML5 Canvas