diff options
Diffstat (limited to 'script.js')
| -rw-r--r-- | script.js | 57 |
1 files changed, 35 insertions, 22 deletions
@@ -7,23 +7,37 @@ document.querySelectorAll("svg").forEach(function(svg) { }) let rad = 10 // Stroke radius -let size = 200 // SVG width and height let A = [] // Objects -let cnt = 0 -let rowsize = Math.floor(window.innerWidth / 1.1 / size) +let idcnt = 0 +let ix = 0 +let iy = 0 +let ny = 0 document.querySelectorAll("svg").forEach(function(svg) { - // Move objects so they aren't overlapping - svg.style.left = 1.1 * size * (cnt % rowsize) + "px" - svg.style.top = 1.1 * size * Math.floor(cnt / rowsize) + "px" - cnt++ + // Position objects so they aren't overlapping + if (ix + svg.width.baseVal.value > window.innerWidth) { + ix = 0 + iy += ny + ny = 0 + } + svg.style.left = ix + "px" + svg.style.top = iy + "px" + ix += svg.width.baseVal.value + ny = Math.max(svg.height.baseVal.value, ny) + svg.id = idcnt++ + const rect = svg.getBoundingClientRect() let a = { id: svg.id, // Unique ID p: [], // Collision circles - cm: svg.createSVGPoint(), // Center of mass + cm: svg.createSVGPoint(), // Position of center of mass relative to top left corner + x: rect.x, // x position of center of mass + y: rect.y, // y position of center of mass vx: Math.random(), // x velocity vy: Math.random(), // y velocity th: 0, // Angular position - w: Math.random() / 100 // Angular velocity + w: Math.random() / 100, // Angular velocity + m: 0, // Mass + mi: 0, // Moment of inertia + r: 0 // Distance to farthest point from center of mass } svg.querySelectorAll("path").forEach(function(path) { // Get circles on path for collision checking @@ -45,17 +59,16 @@ document.querySelectorAll("svg").forEach(function(svg) { a.cm.x /= a.p.length a.cm.y /= a.p.length // Change origin to center of mass - const rect = svg.getBoundingClientRect() - a.x = rect.x + a.cm.x // Position of center of mass - a.y = rect.y + a.cm.y // Position of center of mass + a.x += a.cm.x + a.y += a.cm.y for (const p of a.p) { p.x -= a.cm.x p.y -= a.cm.y } svg.style.transformOrigin = a.cm.x + "px " + a.cm.y + "px" - a.m = a.p.length // Mass - a.mi = 0 // Moment of inertia + a.m = a.p.length for (const p of a.p) a.mi += p.x ** 2 + p.y ** 2 + for (const p of a.p) a.r = Math.max(Math.sqrt(p.x ** 2 + p.y ** 2), a.r) A.push(a) }) @@ -100,7 +113,7 @@ function collide(a, b, c, n) { // Collision of object a with wall at position k and direction d function wallCollide(a, k, d) { - if ((d == 0 && Math.abs(a.x - k) < size) || (d == 1 && Math.abs(a.y - k) < size)) { + if ((d == 0 && Math.abs(a.x - k) < a.r) || (d == 1 && Math.abs(a.y - k) < a.r)) { let c = {x: 0, y: 0, cnt: 0} for (const p of a.p.map(x => rot(a, x))) { if ((d == 0 && Math.abs(p.x - k) < rad) || (d == 1 && Math.abs(p.y - k) < rad)) { @@ -122,7 +135,7 @@ function wallCollide(a, k, d) { // Collision of object a with object b function objectsCollide(a, b) { - if (ds(a, b) < 2 * (size + 2 * rad) ** 2) { + if (ds(a, b) < (a.r + b.r + 2 * rad) ** 2) { // Objects are close let c = {x: 0, y: 0, cnt: 0} let n = {x: 0, y: 0} @@ -131,10 +144,10 @@ function objectsCollide(a, b) { let aa = [] let bb = [] for (const p of a.p.map(x => rot(a, x))) { - if (ds(p, b) < 2 * (size + 2 * rad) ** 2) aa.push(p) + if (ds(p, b) < (a.r + b.r + 2 * rad) ** 2) aa.push(p) } for (const p of b.p.map(x => rot(b, x))) { - if (ds(p, a) < 2 * (size + 2 * rad) ** 2) bb.push(p) + if (ds(p, a) < (a.r + b.r + 2 * rad) ** 2) bb.push(p) } for (const p of aa) { for (const q of bb) { @@ -187,9 +200,9 @@ function tick() { } } // Render every 10ms - cnt++ - if (cnt == 10) { - cnt = 0 + tickcnt++ + if (tickcnt == 10) { + tickcnt = 0 for (a of A) { let e = document.getElementById(a.id) e.style.left = a.x - a.cm.x + "px" @@ -220,6 +233,6 @@ function updatev(event) { }, 1000) } -cnt = 0 +let tickcnt = 0 setInterval(tick, 1) document.addEventListener("click", updatev) |