You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
random-stuff/square-law gravity - physic...

67 lines
2.6 KiB

<!DOCTYPE html>
<meta charset="utf8">
<canvas id="canvas-but-good" width=768 height=768></canvas>
<div id="info"></div>
<script>
const canv = document.getElementById("canvas-but-good")
const info = document.getElementById("info")
const centerX = canv.width / 2
const centerY = canv.height / 2
const scale = 0.5
const G = 0.1
const vzero = [0, 0]
const vadd = ([a, b], [c, d]) => [a + c, b + d]
const vscale = (a, [b, c]) => [a * b, a * c]
const vsub = (a, b) => vadd(vscale(-1, a), b)
const vmag = ([a, b]) => Math.hypot(a, b)
const vnorm = v => vscale(1 / vmag(v), v)
const vsum = vs => vs.reduce(vadd, vzero)
const objects = [] /*[
{ x: [0.5, 0.25], v: vzero, m: 1 },
{ x: [-0.25, -0.5], v: vzero, m: 0.5 },
{ x: [0.25, 0.75], v: vzero, m: 2 }
]*/
for (let i = 0; i < (4 * Math.PI); i += Math.PI / 12) {
objects.push({ x: [ Math.cos(i), Math.sin(i) ], v: vzero, m: Math.exp(Math.random() - 0.5) })
}
const ctx = canv.getContext("2d")
let previousTimestamp = null
function step(timestamp) {
const previousPreviousTimestamp = previousTimestamp
previousTimestamp = timestamp
if (!timestamp) {
return
}
const timestep = (timestamp - previousPreviousTimestamp) / 1000
ctx.fillStyle = "black"
ctx.fillRect(0, 0, canv.width, canv.height)
var i = 0
for (const object of objects) {
object.x = vadd(object.x, vscale(timestep, object.v))
const F = vsum(objects.filter(x => x !== object).map(x =>
vscale(G * (object.m * x.m) * (vmag(vsub(object.x, x.x)) ** 2), vnorm(vsub(object.x, x.x)))
))
object.v = vadd(object.v, vscale(timestep, vscale(1 / object.m, F)))
//console.log(F, object.x, object.v)
ctx.beginPath()
const disp = vscale(scale, object.x)
ctx.arc(centerX + disp[0] * centerX, centerY + disp[1] * centerY, 4 * Math.cbrt(object.m), 0, 2 * Math.PI, false)
ctx.fillStyle = `hsl(${i * 73}deg, 100%, 60%)`
ctx.fill()
i++
}
const E_k = objects.map(x => 1/2 * x.m * vmag(x.v) ** 2).reduce((a, b) => a + b)
// extra division by 2 due to double-counting
const E_p = objects.map(o1 => objects.filter(o2 => o2 !== o1).map(o2 => 1/6 * o1.m * o2.m * G * (vmag(vsub(o1.x, o2.x)) ** 3)).reduce((a, b) => a + b)).reduce((a, b) => a + b)
info.innerHTML = `E<sub>k</sub>=${E_k.toFixed(2)}<br>E<sub>p</sub>=${E_p.toFixed(2)}<br>sum=${E_k+E_p}`
requestAnimationFrame(step)
}
requestAnimationFrame(step)
</script>