JSFiddle - React, Tailwind, and code Playground

by Paolo Salvagione

HTML

<canvas width="500" height="500"></canvas>

JavaScript

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    walkers = [];

var Walker = function(start, vector, wildness, color) {
    this.pos = start;
    this.vector = vector;
    this.wildness = wildness;
};

Walker.prototype.draw = function(ctx) {
    ctx.save();
    ctx.fillStyle = this.color;
    ctx.arc(this.pos.x, this.pos.y, this.wildness * 10, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};

Walker.prototype.move = function() {
    this.pos.x += this.vector.x;
    this.pos.y += this.vector.y;
};

var count = 100;
for (var i = 0; i < count; i++) {
    var walker = new Walker(
        {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height
        },
        {
            x: -2 + Math.random() * 4,
            y: -2 + Math.random() * 4
        },
        .1 + Math.random(),
        "hsl(" + [i / (count - 1) * 360, "100%", "50%" + ")");
    walkers.push(walker);
}

setInterval(draw, 10);

function draw() {
    walkers.forEach(function(walker) {
        walker.move();
        walker.draw(context);
    });
}