JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sun"></div>
<div id="earth"></div>
CSS
#sun {
position: absolute;
top: 50%;
left: 50%;
height: 50px;
width: 50px;
background-color: #f80;
border-radius: 50%;
box-shadow: 0 0 50px #fa0;
}
#earth {
position: absolute;
top: 30%;
left: 30%;
height: 30px;
width: 30px;
background-color: #0aa;
border-radius: 50%;
}
JavaScript
var elements = [
{
"id": "earth",
"mass": 30,
"left": 30,
"top": 30,
"hSpeed": 300,
"vSpeed": -300
}, {
"id": "sun",
"mass": 5000,
"left": 50,
"top": 50,
"hSpeed": 0,
"vSpeed": 0
}];
var intervalTime = 10;
var intervalID;
var getDistance = function(x1, y1, x2, y2) {
// h^2 = x^2 + y^2
var xD = x1 - x2;
var yD = y1 - y2;
var hSq = xD * xD + yD * yD;
return Math.sqrt(hSq);
};
var getXPortion = function(val, x1, y1, x2, y2) {
var hD = getDistance(x1, y1, x2, y2);
var xD = x2 - x1;
if ((hD == 0) || (xD == 0) || (val == 0)) {
return 0;
}
return val / hD * xD;
};
var getYPortion = function(val, x1, y1, x2, y2) {
var hD = getDistance(x1, y1, x2, y2);
var yD = y2 - y1;
if ((hD == 0) || (yD == 0) || (val == 0)) {
return 0;
}
return val / hD * yD;
};
var animateWorld = function() {
// Calculate the change in speed for each element
// based on the gravity of all the other elements
var i = 0;
var j = 0;
var dist = 0;
var mass = 0;
var grav = 0;
var change = 0;
var chX = 0;
var chY = 0;
for (i in elements) {
for (j in elements) {
if (i != j) {
dist = getDistance(
elements[i].left,
elements[i].top,
elements[j].left,
elements[j].top
);
mass = elements[i].mass * elements[j].mass;
grav = dist == 0 ? 0 : mass / (dist * dist);
change = grav / elements[i].mass;
elements[i].hSpeed += getXPortion(
change,
elements[i].left,
elements[i].top,
elements[j].left
// Calculate the new position for each element
// based on the...