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!