Get started with flocks.js CDN

MIT licensed

Flocks.js is a lightweight library for creating animated flocking behaviors in web projects.

Tags:
  • state
  • react
  • react.js
  • flux
  • flocks
  • flocks.js
  • flock
  • StoneCypher
  • app
  • application
  • application layer
  • om
  • cortex
  • crap.js

Stable version

Copied!

How to start using flocks.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with flocks.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/flocks.js/1.6.1/flocks.min.js"></script>
  <style>
    #birds div {
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="birds"></div>
  <script>
    const flockSize = 100;
    const birds = [];

    function createBird(x, y) {
      const bird = document.createElement('div');
      bird.style.left = `${x}px`;
      bird.style.top = `${y}px`;
      document.getElementById('birds').appendChild(bird);
      birds.push(bird);
    }

    function setup() {
      const canvas = document.createElement('canvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      const flock = new Flock(birds, {
        separation: 100,
        alignment: 100,
        cohesion: 100,
        maxSpeed: 3,
        minSpeed: 1,
        randomMaxSpeed: 1,
        randomMinSpeed: 0.5,
        separationDistance: 50,
        maxForce: 0.03,
        color: () => 'rgba(255, 255, 255, 0.1)'
      });

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        flock.update();
        flock.boids.forEach((bird, index) => {
          ctx.fillStyle = bird.color();
          ctx.fillRect(bird.position.x, bird.position.y, 20, 20);
        });
        requestAnimationFrame(draw);
      }

      draw();

      window.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        flock.attract(new Vector(mouseX, mouseY), 1);
      });

      window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });

      for (let i = 0; i < flockSize; i++) {
        createBird(Math.random() * window.innerWidth, Math.random() * window.innerHeight);
      }
    }

    setup();
  </script>
</body>
</html>
Copied!
Copied!

All versions