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();