JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

*{margin:0;padding:0;width:100%;height: 100%;background:black}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var t0 = Date.now();

canvas.width = 600;
canvas.height = 600;

context.fillStyle = "rgba(0, 0, 0, 0.15)";
context.strokeStyle = "#ff0000";
context.lineWidth = 1;

function Agent(x, y, pos, color) {
    this.x = x;
    this.y = y;
    this.w0 = 0.5 * Math.PI * pos + (0.25 * Math.PI);
    this.color = color;
    this.strength = 300;
    this.angle = Math.random() * 2 - 1;
}

Agent.prototype.draw = function() {
    var x1 = this.x;
    var y1 = this.y;
    var w0 = (this.angle * 0.25 * Math.PI) + this.w0;
    var x2 = x1 - Math.sin(w0) * this.strength;
    var y2 = y1 + Math.cos(w0) * this.strength;
    
    context.strokeStyle = this.color;
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    
    this.angle += (Math.random() * 2 - 1) * 0.1;
    
    this.angle = Math.max(-1, Math.min(this.angle, +1));
};

var agents = [];

agents.push(new Agent(0, 0, 3, "#ff6666"));
agents.push(new Agent(0, 600, 2, "#ffff66"));
agents.push(new Agent(600, 0, 0, "#66ff66"));
agents.push(new Agent(600, 600, 1, "#6666ff"));

function animation() {
    var t1 = Date.now();
    if (t1 - t0 > 1000 / 30) {
        _animation(t1);
        t0 = t1;
    }
    requestAnimationFrame(animation);
}

function _animation(t) {
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    agents.forEach(function(agent) {
        agent.draw();
    });
}

requestAnimationFrame(animation);