JSFiddle - React, Tailwind, and code Playground

JavaScript

var canvas, context;
var particles = [];
var lastPosition = null;

var dampingFactor = 0.013;
var springConstant = 0.00275;
var playerInfluenceFactor = 0.5;

init();
animate();

function init() {

    canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;

    context = canvas.getContext('2d');

    document.body.appendChild(canvas);
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            var particle = {
                velocity: {
                    x: 0,
                    y: 0
                },
                position: {
                    x: x * 50 + (Math.random() * 30),
                    y: y * 50 + (Math.random() * 30)
                }
            }
            particle.origin = {
                x: particle.position.x,
                y: particle.position.y
            };
            particles.push(particle);
        }
    }
    document.onmousemove = mouseMove;
}

function animate() {
    requestAnimationFrame(animate);
    draw();
}

function length(vector) {
    return Math.sqrt((vector.x * vector.x) + (vector.y * vector.y));
}

function mouseMove(event) {
    var currentPosition = {
        x: event.clientX,
        y: event.clientY
    };
    if (lastPosition != null) {
        for (var i = 0; i < particles.length; i++) {
            var particle = particles[i];

            var deltaVelocityX = -lastPosition.x + currentPosition.x;
            var deltaVelocityY = -lastPosition.y + currentPosition.y;

            var distanceToPlayerVector = {
                x: currentPosition.x - particle.position.x,
                y: currentPosition.y - particle.position.y
            };
            var distanceToPlayer = length(distanceToPlayerVector);
            var playerInfluenceFactor = 0.5;
            particle.velocity.x = particle.velocity.x + ((playerInfluenceFactor * deltaVelocityX) + particle.velocity.x) * (1 / distanceToPlayer);
            particle.velocity.y =...