JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

CSS

html, body, canvas {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

JavaScript

var VELOCITY = 2;
var PARTICLES = 400;

var mouse = {
    x: 0,
    y: 0
};
var particles = [];
var colors = ["#000000", "#FF0000", "#FFFF00"];
var canvas = document.getElementById('projector');
var context;
var last = 0;
var mouseOver;

if (canvas && canvas.getContext) {
    context = canvas.getContext('2d');
    context.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);

    for (var i = 0; i < PARTICLES; i++) {
        particles.push({
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            vx: ((Math.random() * (VELOCITY * 2)) - VELOCITY),
            vy: ((Math.random() * (VELOCITY * 2)) - VELOCITY),
            size: 1 + Math.random() * 3,
            color: colors[Math.floor(Math.random() * colors.length)]
        });
    }

    Initialize();
}

function Initialize() {
    canvas.addEventListener('mousemove', MouseMove, false);
    window.addEventListener('mousedown', MouseDown, false);
    window.addEventListener('resize', ResizeCanvas, false);
    canvas.addEventListener('mouseover', MouseOver, false);
    canvas.addEventListener('mouseout', MouseOut, false);

    ResizeCanvas();
    window.requestAnimationFrame(TimeUpdate);
}

function TimeUpdate(timestamp) {
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);

    var len = particles.length;
    var particle;

    for (var i = 0; i < len; i++) {
        particle = particles[i];
        var timeDiff = Math.min(200, (timestamp - last));

        if (!particle.frozen) {
            particle.x += timeDiff * particle.vx / 50;
            particle.y += timeDiff * particle.vy / 50;

            if (particle.x > window.innerWidth || particle.x < 0) {
                particle.vx *= -1;
                particle.x = particle.x > 0 ? window.innerWidth : 0;
            }

            if (particle.y > window.innerHeight || particle.y < 0) {
                particle.vy *= -1;
                particle.y = particle.y > 0 ?...