JSFiddle - React, Tailwind, and code Playground

by michelpm

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Spheres</title>
</head>
<body>
    <canvas id="target" width="500" height="500">
    </canvas>
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
    width: 100%;
}
canvas
{
    display: block;
}
#target
{
    background: #001022;
}

JavaScript

var canvas = $("#target");
var context = canvas.get(0).getContext("2d");

var canvasWidth = canvas.width();
var canvasHeight = canvas.height();

$(window).resize(resizeCanvas);

function resizeCanvas() {
    canvas.attr("width", $(window).get(0).innerWidth);
    canvas.attr("height", $(window).get(0).innerHeight);

    canvasWidth = canvas.width();
    canvasHeight = canvas.height();
};

var Sphere = function (x, y, radius, mass, vX, vY) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.mass = mass;

    this.vX = vX;
    this.vY = vY;

    this.updatePosition = function () {
        this.x += this.vX;
        this.y += this.vY;
    };

    this.checkBoundaryCollision = function () {
        if (this.x - this.radius < 0) {
            this.x = this.radius;
            this.vX *= -1;
        } else if (this.x + this.radius > canvasWidth) {
            this.x = canvasWidth - this.radius;
            this.vX *= -1;
        }

        if (this.y - this.radius < 0) {
            this.y = this.radius;
            this.vY *= -1;
        } else if (this.y + this.radius > canvasHeight) {
            this.y = canvasHeight - this.radius;
            this.vY *= -1;
        }
    }
}

resizeCanvas();

var spheresLength = 20;
var spheres = new Array();
function loadContent() {
    for (var i = 0; i < spheresLength; i++) {
        var x = 20 + (Math.random() * (canvasWidth - 40));
        var y = 20 + (Math.random() * (canvasHeight - 40));

        var radius = 5 + Math.random() * 10;
        var mass = radius / 2;

        var vX = Math.random() * 4 - 2;
        var vY = Math.random() * 4 - 2;

        spheres.push(new Sphere(x, y, radius, mass, vX, vY));
    };
    animate();
}
loadContent();

function animate() {
    update();
    draw();
    setTimeout(animate, 33);
}


function update() {
    for (var i = 0; i < spheresLength; i++) {
        var sphere1 = spheres[i];

        for (var j = i + 1; j < spheresLength; j++) {
            var sphere2 =...