67 lines
1.3 KiB
JavaScript
67 lines
1.3 KiB
JavaScript
|
|
const WIDTH = 800;
|
|
const HEIGHT = 800;
|
|
const NCRITTERS = 100;
|
|
|
|
const pointer = { x: 0, y: 0 };
|
|
|
|
const svg = document.getElementsByTagName("svg")[0];
|
|
|
|
svg.addEventListener(
|
|
"pointermove",
|
|
(e) => {
|
|
pointer.x = e.clientX;
|
|
pointer.y = e.clientY;
|
|
},
|
|
false
|
|
);
|
|
|
|
class Critter {
|
|
constructor() {
|
|
this.x = Math.random() * WIDTH;
|
|
this.y = Math.random() * HEIGHT;
|
|
this.vx = Math.random() * 0.1 - 0.05;
|
|
this.vy = Math.random() * 0.1 - 0.05;
|
|
this.status = "go";
|
|
this.init();
|
|
this.update();
|
|
}
|
|
init() {
|
|
this.elt = document.createElement("circle");
|
|
this.elt.setAttribute("fill", "blue");
|
|
this.elt.setAttribute("r", 10);
|
|
this.elt.setAttribute("opacity", "50%");
|
|
svg.addChild(this.elt);
|
|
}
|
|
update() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
this.elt.setAttribute("cx", this.x);
|
|
this.elt.setAttribute("cy", this.y);
|
|
}
|
|
}
|
|
|
|
const critters = [];
|
|
|
|
for( let i = 0; i++; i < NCRITTERS) {
|
|
critters.push(new Critter);
|
|
}
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
const rect = svg.getBoundingClientRect();
|
|
const x = pointer.x - rect.left;
|
|
const y = pointer.y - rect.top;
|
|
for( const c of critters ) {
|
|
c.update();
|
|
}
|
|
}
|
|
|
|
animate();
|
|
|
|
|
|
|