|
const G = 1.5e-3, // Controls overall simulation speed |
|
TRAIL_LENGTH = 250, // # simulation samples |
|
TRAIL_MAX_ALPHA = 0.5, // trail opacity upper limit |
|
TRAIL_THICKNESS = 0.08; // relative to body's diameter |
|
|
|
const width = window.innerWidth, height = window.innerHeight; |
|
|
|
let bodyDistortion = 1, |
|
lockOn, |
|
zoomLevel = 1, |
|
au = d3.scaleLinear() // Astronomical unit |
|
.range([0, Math.min(width, height)]); |
|
|
|
// Size canvas |
|
d3.select('#canvas') |
|
.attr('width', width) |
|
.attr('height', height) |
|
.call(d3.zoom() |
|
.scaleExtent([1, 1e6]) |
|
.on('zoom', function() { |
|
zoomed(d3.event.transform.k); |
|
}) |
|
); |
|
|
|
const forceSim = d3.forceSimulation() |
|
.alphaDecay(0) |
|
.velocityDecay(0) |
|
.force('gravity', d3.forceMagnetic() |
|
.id(d => d.id) |
|
.charge(node => node.mass) |
|
) |
|
.on('tick', ticked); |
|
|
|
// |
|
|
|
function ticked() { |
|
const TAU = 2*Math.PI, |
|
F = 1e8; // Scale factor, to prevent bug of (scaled) arcs with r<0.002 from disappearing |
|
|
|
const ctx = d3.select('#canvas') |
|
.attr('width', width) // Wipe it |
|
.attr('height', height) |
|
.node().getContext('2d'); |
|
|
|
// 0,0 at canvas center |
|
ctx.translate(width/2, height/2); |
|
|
|
// Apply zoom |
|
if (zoomLevel) { |
|
ctx.scale(zoomLevel/F, zoomLevel/F); |
|
} |
|
|
|
// Lock on body |
|
if (lockOn) { |
|
ctx.translate(-lockOn.x*F, -lockOn.y*F); |
|
} |
|
|
|
const nodes = forceSim.nodes(); |
|
for (let i=0; i<nodes.length; i++) { |
|
const node = nodes[i], |
|
r = Math.min(node.name==='sun'?2:Infinity, node.r * bodyDistortion), |
|
color = chroma(node.color); |
|
|
|
ctx.fillStyle = color.css(); |
|
ctx.beginPath(); |
|
ctx.arc(node.x*F, node.y*F, r*F, 0, TAU); |
|
ctx.fill(); |
|
|
|
// Add orbit trails |
|
const relAlpha = TRAIL_MAX_ALPHA/node.trail.length, |
|
trailR = r*TRAIL_THICKNESS*F, |
|
rgb = color.rgb().join(','); |
|
|
|
for (let idx=0, len=node.trail.length; idx<len; idx++) { |
|
const pnt = node.trail[idx]; |
|
|
|
ctx.fillStyle = `rgba(${rgb},${(idx+1)*relAlpha})`; |
|
ctx.beginPath(); |
|
ctx.arc(pnt[0]*F, pnt[1]*F, trailR, 0, TAU); |
|
//ctx.fillRect(pnt[0], pnt[1], trailR, trailR); // rects have better performance than arcs |
|
ctx.fill(); |
|
|
|
} |
|
|
|
// Push current coords to trail buffer |
|
node.trail.push([node.x, node.y]); |
|
if (node.trail.length > TRAIL_LENGTH) node.trail.shift(); |
|
} |
|
} |
|
|
|
function zoomed(newZoomLevel=zoomLevel) { |
|
const changeRatio = zoomLevel/newZoomLevel, |
|
sqrtChangeRatio = Math.sqrt(changeRatio); |
|
|
|
zoomLevel = newZoomLevel; |
|
d3.select('#au-100px-scale').text(Math.round(au.invert(100) / zoomLevel * 1000) / 1000); |
|
|
|
// Slow down motion on zoom-in |
|
forceSim.stop(); |
|
forceSim.force('gravity').strength(forceSim.force('gravity').strength()()*changeRatio); |
|
forceSim.nodes().forEach(d => { |
|
d.vx *= sqrtChangeRatio; |
|
d.vy *= sqrtChangeRatio; |
|
}); |
|
forceSim.restart(); |
|
} |
|
|
|
function load(jsonFile) { |
|
d3.json(jsonFile, (error, bodies) => { |
|
const maxDistance = d3.max(bodies.map(d => d3.max(d.satellites.map(s => d.distance + s.distance)))); |
|
au.domain([0, maxDistance * 2.1]); |
|
zoomed(); // Display scale |
|
|
|
const pxG = G * Math.pow(au(1), 3); // in cube of AUs |
|
|
|
forceSim.nodes(parseBodies(bodies)) |
|
.force('gravity').strength(pxG); |
|
|
|
// Add lock radio buttons |
|
const bodyLock = d3.select('#bodylock').selectAll('div') |
|
.data(forceSim.nodes()).enter().append('div'); |
|
|
|
lockOn = forceSim.nodes()[0]; // Lock on first body |
|
|
|
bodyLock.append('input') |
|
.attr('type', 'radio') |
|
.attr('name', 'bodylock') |
|
.attr('id', d => `bodylock-${d.name}`) |
|
.attr('value', d => d.name) |
|
.attr('checked', d => d.name === 'sun' ? true : null) |
|
.on("change", function() { |
|
forceSim.nodes().some(d => { |
|
if (d.name === this.value) { |
|
lockOn = d; |
|
return true; |
|
} |
|
}); |
|
}); |
|
|
|
bodyLock.append('label') |
|
.attr('for', d => `bodylock-${d.name}`) |
|
.style('color', d => d.color) |
|
.text(d => `${d.symbol?`${d.symbol} `:''}${d.name}`); |
|
|
|
// |
|
|
|
function parseBodies(bodies, parentMass = 0, posOffset = [0,0], velocityOffset = [0,0]) { |
|
return [].concat(...bodies.map(body => { |
|
const ang = (body.phase || (Math.random() * 360)) * Math.PI/180, // Random init angle if not specified (to prevent aligned init forces from distorting orbits) |
|
x = posOffset[0] + au(body.distance) * Math.sin(ang), |
|
y = posOffset[1] - au(body.distance) * Math.cos(ang), |
|
relVelocity = (body.distance ? Math.sqrt(pxG * parentMass / au(body.distance)): 0) * (body.factorV || 1), // orbital velocity: sqrt(GM/d) |
|
vx = velocityOffset[0] + relVelocity * Math.cos(ang), |
|
vy = velocityOffset[1] + relVelocity * Math.sin(ang); |
|
|
|
return [{ |
|
name: body.name, |
|
symbol: body.symbol || null, |
|
color: body.color || 'darkgrey', |
|
r: au(body.r || Math.cbrt(body.mass)), |
|
mass: body.mass, // mass in solar masses |
|
x: x, // radius, distance & velocity in AUs |
|
y: y, |
|
vx: vx, |
|
vy: vy, |
|
trail: [] // Store previous positions |
|
}, |
|
...parseBodies(body.satellites || [], body.mass, [x,y], [vx,vy]) |
|
] |
|
})); |
|
} |
|
}); |
|
} |
|
|
|
// Event handlers |
|
function onBodyDistortionChange(dist) { |
|
bodyDistortion = dist; |
|
d3.select('#bodydistortion-val').text(dist); |
|
} |
