JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<div id="center">
    <canvas id="canvas" width="300" height="300">your browser doesn't support canvas, you should use chrome. <a href="http://www.google.com/chrome/" target="blank">Download it here</a></canvas>
    
    <p>move your mouse</p>
</div>
<script>
    var mouseX = 0, mouseY = 0;
    var canvas, c;
    $(function(){
    
    
    
    
    canvas = $("#canvas");
    
    var offset = canvas.offset();
    
    canvas = canvas[0];
    
    c = canvas.getContext("2d");
    
    
    $(document).mousemove(function(e){
    // recalculate offset if the canvas might move around the page (relative position counts here)
    mouseX = e.pageX - offset.left;
    mouseY = e.pageY - offset.top;
    // console.log(mouseX);
    });
    
    setup();
    
    setInterval(draw, 30);
    });
</script>

CSS

body,html{
    margin : 0;
    padding : 0; 
    background-color : #333;
    font-family : sans-serif;
    font-size : 11px;
    color : white; 
    
}

#center{
    position : relative;
    width : 300px;
    height : 300px;
    margin-top: 10px;
    margin-left : auto;
    margin-right : auto; 
}

p{
    margin : 5px;   
}

JavaScript

var movers = [];
var moverNum = 20;

function setup() {
    c.fillStyle = "black";
    c.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < moverNum; i++) {
        movers.push(new Mover(150,150));
    }
}

function draw() {
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < moverNum; i++) {
        movers[i].render();
    }
}


function Mover(xp, yp) {
    var dx = xp,
        x = xp;
    var dy = yp,
        y = yp;
    var px = xp,
        py = yp;
    var vx = 0,
        vy = 0;
    

    this.render = function() {

        if (parseInt(Math.random() * 30) == 1) {
            var r = Math.random() * 100;
            var theta = Math.random() * Math.PI * 2;
            dx = canvas.width / 2 + r * Math.cos(theta);
            dy = canvas.height / 2 + r * Math.sin(theta);
        }
        x += vx;
        y += vy;

        vx = (vx - (x - dx) / 87) / 1.1;
        vy = (vy - (y - dy) / 87) / 1.2;

       // console.log(x);
        c.save();

        c.translate(x, y);
        
        
        c.rotate(Math.atan2(vy, vx));
        
        c.strokeStyle = "rgba(255,255,255, 0.1)";
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(-10, 0);
        c.stroke();

        c.fillStyle =  "rgb(155,0,"+parseInt(100 + vx*10)+")";
        c.fillRect(-5, -5, 10, 10);
        
        c.restore();
        
       

    }
}