JSFiddle - React, Tailwind, and code Playground

by Grabow

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Solar System AJ</title>
</head>
<body onload="init();">
    <canvas id="space-time"></canvas>
</body>
<script src="orbit.js"></script>
</html>

CSS

body {
    margin: 0;
    border: 0;
}
#space-time {
    background-color: #1a1a1c;
}

JavaScript

var canvas, width, height, ctx;

var bodies = [];

function init(){
    canvas = document.getElementById("space-time");
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');

    createBodies();

    setInterval(function(){
        updateSystem();
        updateBodies(0.01);
        ctx.clearRect(0, 0, width, height);
        drawBodies();
    }, 10);
}

function createBodies(){
    // bodies.push(new Body(100, 300, 250, Math.PI / 2, 10, 5));
    // bodies.push(new Body(150, 300, 250, Math.PI / 2, 10, 5));
    // bodies.push(new Body(300, 150, 300, 0, 1, 3));
    // bodies.push(new Body(350, 150, 300, 0, 1, 3));
    bodies.push(new Body((this.width / 2) - 250, (this.height / 2) - 300, 200, 0, 1, 10, "#14c71d", true));
    bodies.push(new Body((this.width / 2) + 100, (this.height / 2) + 100, 350, 0, 1, 5, "#de2d16", true));
    bodies.push(new Body(this.width / 2, this.height / 2, 0, 0, 1000000, 30, "#FF8501", false)); //sun
}

function drawBodies(){
    for(var i = 0; i < bodies.length; i++){
        bodies[i].draw(ctx);
    }
}

function updateBodies(dt){
    for(var i = 0; i < bodies.length; i++){
        bodies[i].update(dt);
    }
}

function updateSystem(){
    var G = 10;
    for(var i = 0; i < bodies.length; i++){
        for(var j = 0; j < bodies.length; j++){
            if(i === j) continue;
            var b1 = bodies[i];
            var b2 = bodies[j];

            var dist = Math.sqrt((b1.x - b2.x) * (b1.x - b2.x) + (b1.y - b2.y) * (b1.y - b2.y));
            var force = G * (b1.m * b2.m) / dist / dist;
            var nx = (b2.x - b1.x) / dist;
            var ny = (b2.y - b1.y) / dist;

            b1.ax += nx * force / b1.m;
            b1.ay += ny * force / b1.m;

            b2.ax -= nx * force / b2.m;
            b2.ay -= ny * force / b2.m;
        }
    }
}

function Body(x, y, v, angle, mass, radius, color, hasTail){
    this.x = x;
    this.y =...