I have this working as is but is in a “birds eye view” looking down.
I was thinking about adding a z field for each Body element to simulate the depth of it being closer or further away from the “view point”.
That got me thinking of how to simulate a “view point” to draw the perspective of how close or far the planets are during their orbit.
Would it be possible with what I have now to “transform” this into a 3D perspective. I have seen people create rotating bodies like planets with a 2D canvas, but how could that translate into several bodies rotating and revolving?
var canvas, width, height, ctx;
var bodies = [];
canvas = document.getElementById("space-time");
document.addEventListener("DOMContentLoaded", function(event) {
init();
});
function init(){
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((this.width / 2), (this.height / 2) - 525, 125, 0, 20, 30, "#ec4899", true));
bodies.push(new Body((this.width / 2), (this.height / 2) + 450, 200, 0, 5, 20, "#7e22ce", true));
bodies.push(new Body((this.width / 2), (this.height / 2) - 300, 250, 0, 2, 15, "#1d4ed8", true));
bodies.push(new Body((this.width / 2), (this.height / 2) + 200, 300, 0, 1, 10, "#22c55e", true));
bodies.push(new Body((this.width / 2), (this.height / 2) - 125, 400, 0, 1, 5, "#b91c1c", true));
bodies.push(new Body(this.width / 2, this.height / 2, 0, 0, 1000000, 50, "#f97316", 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 = y;
this.v = v;
this.a = angle;
this.r = radius;
this.c = color;
this.t = hasTail;
this.vx = v * Math.cos(angle);
this.vy = v * Math.sin(angle);
this.m = mass;
this.radius = radius;
this.color = color;
this.ax = 0;
this.ay = 0;
if(hasTail){
this.tail = new Tail(30);
}
this.update = function(dt){
this.vx += this.ax * dt;
this.vy += this.ay * dt;
this.x += this.vx * dt;
this.y += this.vy * dt;
this.ax = 0;
this.ay = 0;
if(this.tail){
this.tail.addPoint({x: this.x, y: this.y});
}
}
this.draw = function(ctx){
ctx.strokeStyle = this.color;
ctx.fillStyle = this.color;
ctx.shadowColor = this.color;
ctx.shadowBlur = 5;
if(this.tail){
this.tail.draw(ctx);
}
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 6.28);
ctx.fill();
}
}
function Tail(maxLength){
this.points = [];
this.maxLength = maxLength;
this.addPoint = point => {
this.points = [point].concat(this.points).slice(0, this.maxLength);
}
this.draw = function(ctx){
for(var i = 1; i < this.points.length; i++){
ctx.beginPath();
if(i < maxLength - 20){
ctx.globalAlpha = (this.maxLength - i) / 20;
}
ctx.moveTo(this.points[i - 1].x, this.points[i - 1].y);
ctx.lineTo(this.points[i].x, this.points[i].y);
ctx.stroke();
}
ctx.globalAplha = 1;
}
}#space-time {
background-color: black;
width: 100%;
}<canvas id="space-time"canvas></canvas>