From b94b24ab0d7411cb7f26f2e671ba7ed7d6e99e41 Mon Sep 17 00:00:00 2001 From: Anthony Wang Date: Mon, 29 Jan 2024 13:52:22 -0500 Subject: Spread circles out evenly across path, move stuff to separate file --- anime.html | 20 +++++++++++++++++++ anime.png | Bin 0 -> 1306152 bytes b.svg | 46 ++++++++++++++++++++++++++++++++++++++++++ d.svg | 46 ++++++++++++++++++++++++++++++++++++++++++ hiragana-a.svg | 17 ++++++++-------- hiragana-ni.svg | 14 ++++++------- hiragana-small-ya.svg | 13 ++++++------ index.html | 7 ++++--- m.svg | 46 ++++++++++++++++++++++++++++++++++++++++++ script.js | 54 ++++++++++++++++++++++++++++---------------------- style.css | 12 ++++++----- u.svg | 46 ++++++++++++++++++++++++++++++++++++++++++ 12 files changed, 268 insertions(+), 53 deletions(-) create mode 100644 anime.html create mode 100644 anime.png create mode 100644 b.svg create mode 100644 d.svg create mode 100644 m.svg create mode 100644 u.svg diff --git a/anime.html b/anime.html new file mode 100644 index 0000000..5c21abc --- /dev/null +++ b/anime.html @@ -0,0 +1,20 @@ + + + + Dumb physics engine + + + + + + + + + + + + diff --git a/anime.png b/anime.png new file mode 100644 index 0000000..3022080 Binary files /dev/null and b/anime.png differ diff --git a/b.svg b/b.svg new file mode 100644 index 0000000..4eeb1cb --- /dev/null +++ b/b.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/d.svg b/d.svg new file mode 100644 index 0000000..d66662f --- /dev/null +++ b/d.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/hiragana-a.svg b/hiragana-a.svg index 8086c81..9c53620 100644 --- a/hiragana-a.svg +++ b/hiragana-a.svg @@ -24,7 +24,7 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="1.3575939" - inkscape:cx="-103.49192" + inkscape:cx="-102.75532" inkscape:cy="160.57821" inkscape:window-width="1536" inkscape:window-height="902" @@ -39,16 +39,17 @@ inkscape:groupmode="layer" id="layer1"> + style="fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" + d="m 125.43119,85.286289 c -8.18275,22.592121 -20.5392,49.830321 -34.774113,69.370721 -4.876132,6.69352 -10.461853,13.27487 -17.507321,17.62701 -11.386051,7.03342 -25.58302,4.56756 -31.980351,-8.58991 -7.192829,-14.79358 -5.479563,-34.37683 2.880403,-48.21713 3.69147,-6.1114 8.478597,-12.16394 14.799212,-15.484461 15.534608,-8.16109 38.516503,-8.227625 55.0262,-4.337703 22.70926,5.350634 38.27922,9.951454 51.20408,29.235414 3.32479,4.96061 6.84648,11.08193 5.77922,16.95755 -1.33339,7.3406 -6.98517,13.44981 -12.26079,18.72525 -14.8042,14.80368 -17.57185,15.58568 -29.94039,20.91906" + id="path4" + sodipodi:nodetypes="csssssssssc" /> diff --git a/hiragana-ni.svg b/hiragana-ni.svg index 0bddfde..499da2c 100644 --- a/hiragana-ni.svg +++ b/hiragana-ni.svg @@ -24,7 +24,7 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="1.7276112" - inkscape:cx="-45.438465" + inkscape:cx="-45.438464" inkscape:cy="107.08428" inkscape:window-width="1536" inkscape:window-height="902" @@ -39,16 +39,16 @@ inkscape:groupmode="layer" id="layer1"> diff --git a/hiragana-small-ya.svg b/hiragana-small-ya.svg index a994ef5..058e182 100644 --- a/hiragana-small-ya.svg +++ b/hiragana-small-ya.svg @@ -25,7 +25,7 @@ inkscape:document-units="mm" inkscape:zoom="1.381533" inkscape:cx="-121.24213" - inkscape:cy="98.441371" + inkscape:cy="98.441369" inkscape:window-width="1536" inkscape:window-height="902" inkscape:window-x="0" @@ -39,16 +39,17 @@ inkscape:groupmode="layer" id="layer1"> + style="fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" + d="m 94.189413,24.222422 c 2.853869,14.957057 11.126777,23.371033 16.290027,37.50669 2.10119,5.752511 3.09414,6.5714 5.00312,12.390517" + id="path3" + sodipodi:nodetypes="csc" /> diff --git a/index.html b/index.html index eb6514b..01a1f38 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,10 @@ Make sure the scale is set to 1 and that the id is set to a unique value Also, change the stroke to currentColor so we can style the color with CSS --> - - - + + + + diff --git a/m.svg b/m.svg new file mode 100644 index 0000000..c69fb42 --- /dev/null +++ b/m.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/script.js b/script.js index d40711a..6cfcd78 100644 --- a/script.js +++ b/script.js @@ -6,14 +6,15 @@ document.querySelectorAll("svg").forEach(function(svg) { svg.outerHTML = req.responseText }) -let rad = 10 // Stroke width +let rad = 10 // Stroke radius let size = 200 // SVG width and height let A = [] // Objects let cnt = 0 document.querySelectorAll("svg").forEach(function(svg) { // Move objects so they aren't overlapping - svg.style.left = 1.5 * size * cnt++ + "px" - svg.style.top = "50px" + svg.style.left = 1.5 * size * (cnt % 2) + "px" + svg.style.top = 1.5 * size * Math.floor(cnt / 2) + "px" + cnt++ let a = { id: svg.id, // Unique ID p: [], // Collision circles @@ -25,8 +26,9 @@ document.querySelectorAll("svg").forEach(function(svg) { } svg.querySelectorAll("path").forEach(function(path) { // Get circles on path for collision checking - for (let i = 0; i < path.getTotalLength(); i += 5) { - const p = path.getPointAtLength(i) + let num = Math.floor(path.getTotalLength() / 5) + for (let i = 0; i <= num; i++) { + const p = path.getPointAtLength(i / num * path.getTotalLength()) a.cm.x += p.x a.cm.y += p.y a.p.push(p) @@ -34,7 +36,7 @@ document.querySelectorAll("svg").forEach(function(svg) { /* let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle") circle.setAttribute("cx", p.x) circle.setAttribute("cy", p.y) - circle.setAttribute("r", rad) + circle.setAttribute("r", 10) circle.setAttribute("fill", "red") svg.appendChild(circle) */ } @@ -119,24 +121,31 @@ function wallCollide(a, k, d) { // Collision of object a with object b function objectsCollide(a, b) { - if (ds(a, b) < size * size) { + if (ds(a, b) < 2 * (size + 2 * rad) ** 2) { // Objects are close let c = {x: 0, y: 0, cnt: 0} let n = {x: 0, y: 0} + // Slight performance optimization? + // Only consider points close to other object + let aa = [] + let bb = [] for (const p of a.p.map(x => rot(a, x))) { - // p is close to object b - if (ds(p, b) < size * size) { - for (const q of b.p.map(x => rot(b, x))) { - const d = ds(p, q) - if (d < 4 * rad * rad) { - // Collision! - // These calculations are a bit sketchy but I guess they work? - c.x += p.x + q.x - c.y += p.y + q.y - c.cnt++ - n.x += (p.x - q.x) / d - n.y += (p.y - q.y) / d - } + if (ds(p, b) < 2 * (size + 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) + } + for (const p of aa) { + for (const q of bb) { + const d = ds(p, q) + if (d < (2 * rad) ** 2) { + // Collision! + // These calculations are a bit sketchy but I guess they work? + c.x += p.x + q.x + c.y += p.y + q.y + c.cnt++ + n.x += (p.x - q.x) / d + n.y += (p.y - q.y) / d } } } @@ -152,6 +161,7 @@ function objectsCollide(a, b) { } } +// Move stuff, check collisions, and render function tick() { // Move each object one step for (let a of A) { @@ -162,7 +172,6 @@ function tick() { if (Math.abs(a.vy) > 0.001) a.vy -= 0.001 * Math.sign(a.vy) if (Math.abs(a.w) > 0.00001) a.w -= 0.00001 * Math.sign(a.w) } - // Check wall collisions for (let a of A) { wallCollide(a, 0, 0) @@ -170,14 +179,12 @@ function tick() { wallCollide(a, 0, 1) wallCollide(a, window.innerHeight, 1) } - // Check collisions between objects for (let i = 0; i < A.length; i++) { for (let j = i + 1; j < A.length; j++) { objectsCollide(A[i], A[j]) } } - // Render every 10ms cnt++ if (cnt == 10) { @@ -198,7 +205,6 @@ function updatev(event) { a.vx += 100 * (a.x - event.clientX) / d a.vy += 100 * (a.y - event.clientY) / d } - // Display spreading out circles let circle = document.createElement("div") circle.style.width = circle.style.height = "10px" diff --git a/style.css b/style.css index 9a92d18..0c2ca9d 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,4 @@ body { -/* background-image: url("catgirl.png"); */ - background-size: auto 100vh; - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; overflow-y: hidden; overflow-x: hidden; touch-action: manipulation; @@ -52,3 +47,10 @@ div { background-color: #007bff; transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out; } + +img { + display: block; + margin-left: auto; + margin-right: auto; + height: 100vh; +} diff --git a/u.svg b/u.svg new file mode 100644 index 0000000..87213b8 --- /dev/null +++ b/u.svg @@ -0,0 +1,46 @@ + + + + + + + + + + -- cgit v1.2.3-70-g09d2