From bf7131f7b2b529ab591235d738e98cf1f90ab864 Mon Sep 17 00:00:00 2001
From: Anthony Wang
Date: Mon, 29 Jan 2024 02:34:01 -0500
Subject: PHYSICS
---
hiragana-a.svg | 54 +++++++++++++
hiragana-ni.svg | 54 +++++++++++++
hiragana-small-ya.svg | 54 +++++++++++++
index.html | 11 +++
script.js | 210 ++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 45 +++++++++++
6 files changed, 428 insertions(+)
create mode 100644 hiragana-a.svg
create mode 100644 hiragana-ni.svg
create mode 100644 hiragana-small-ya.svg
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/hiragana-a.svg b/hiragana-a.svg
new file mode 100644
index 0000000..8086c81
--- /dev/null
+++ b/hiragana-a.svg
@@ -0,0 +1,54 @@
+
+
+
+
diff --git a/hiragana-ni.svg b/hiragana-ni.svg
new file mode 100644
index 0000000..0bddfde
--- /dev/null
+++ b/hiragana-ni.svg
@@ -0,0 +1,54 @@
+
+
+
+
diff --git a/hiragana-small-ya.svg b/hiragana-small-ya.svg
new file mode 100644
index 0000000..a994ef5
--- /dev/null
+++ b/hiragana-small-ya.svg
@@ -0,0 +1,54 @@
+
+
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..822899d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,11 @@
+
+
+
+ dumb physics engine
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..00140c1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,210 @@
+// Inject SVG into DOM synchronously because we can't access the DOM of SVGs inside img tags
+function injectSVG(svg) {
+ let req = new XMLHttpRequest()
+ req.open("GET", svg, false)
+ req.send()
+ document.body.innerHTML += req.responseText
+}
+
+// Draw 200x200 SVGs in Inkscape with the pencil tool and a stroke width of 20
+// 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
+injectSVG("hiragana-ni.svg")
+injectSVG("hiragana-small-ya.svg")
+injectSVG("hiragana-a.svg")
+
+let rad = 10
+let size = 200
+let A = []
+let cnt = 0
+document.querySelectorAll("svg").forEach(function(svg) {
+ svg.style.left = 1.5 * size * cnt++ + "px"
+ svg.style.top = "50px"
+ let a = {
+ id: svg.id, // Unique ID
+ p: [], // Collision circles of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array. Try it Syntax js map(callbackFn) map(callbackFn, thisArg) Parameters callbackFn A function to execute for each element in the array.
+
+ cm: svg.createSVGPoint(), // Center of mass
+ vx: Math.random(), // x velocity
+ vy: Math.random(), // y velocity
+ th: 0, // Angular position
+ w: Math.random() / 100 // Angular velocity
+ }
+ svg.querySelectorAll("path").forEach(function(path) {
+ // Get circles on path for collision checking
+ for (let i = 0; i < path.getTotalLength(); i += rad) {
+ const p = path.getPointAtLength(i)
+ a.cm.x += p.x
+ a.cm.y += p.y
+ a.p.push(p)
+ // Show circles for debugging
+ 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("fill", "red");
+ svg.appendChild(circle)
+ }
+ })
+ 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
+ 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
+ for (const p of a.p) a.mi += p.x ** 2 + p.y ** 2
+ A.push(a)
+})
+
+// Actual position of p in object a
+function rot(a, p) {
+ const c = Math.cos(a.th)
+ const s = Math.sin(a.th)
+ return {x: a.x + p.x * c - p.y * s, y: a.y + p.x * s + p.y * c}
+}
+
+// Distance squared between a and b
+function ds(a, b) {
+ return (a.x - b.x) ** 2 + (a.y - b.y) ** 2
+}
+
+// Cross product
+function cr(a, b) {
+ return a.x * b.y - a.y * b.x
+}
+
+// Collision of object a with b at point c with normal n
+function collide(a, b, c, n) {
+ // https://physics.stackexchange.com/questions/783524/angular-motion-in-collisions/783565#783565
+ // https://physics.stackexchange.com/questions/786641/collision-calculation-in-2d/786969#786969
+ // https://physics.stackexchange.com/questions/686640/resolving-angular-components-in-2d-circular-rigid-body-collision-response
+ // I still don't know how to derive this magic but I'm convinced it works
+ // No idea if there's a sign error
+ const ca = {x: a.x - c.x, y: a.y - c.y}
+ const cb = {x: b.x - c.x, y: b.y - c.y}
+ const v = n.x * (a.vx - b.vx) + n.y * (a.vy - b.vy) - a.w * cr(ca, n) + b.w * cr(cb, n)
+ const m = 1 / (1 / a.m + 1 / b.m + cr(ca, n) ** 2 / a.mi + cr(cb, n) ** 2 / b.mi)
+ const j = 2 * m * v
+ a.vx += -n.x * j / a.m
+ a.vy += -n.y * j / a.m
+ a.w += cr(ca, n) * j / a.mi
+ b.vx += n.x * j / b.m
+ b.vy += n.y * j / b.m
+ b.w += cr(cb, n) * j / b.mi
+ console.log('hi')
+}
+
+// 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)) {
+ 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)) {
+ c.x += p.x
+ c.y += p.y
+ c.cnt++
+ }
+ }
+ if (c.cnt > 0) {
+ c.x /= c.cnt
+ c.y /= c.cnt
+ let b = c
+ b.vx = b.vy = b.w = 0
+ b.m = b.mi = 1e9
+ collide(a, b, c, {x: 1 - d, y: d})
+ }
+ }
+}
+
+function tick() {
+ // Move each object one step
+ for (let a of A) {
+ a.x += a.vx
+ a.y += a.vy
+ a.th += a.w
+ if (Math.abs(a.vx) > 0.001) a.vx -= 0.001 * Math.sign(a.vx)
+ 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)
+ wallCollide(a, window.innerWidth, 0)
+ 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++) {
+ let a = A[i]
+ let b = A[j]
+ if (ds(a, b) < size * size) {
+ // Objects are close
+ let c = {x: 0, y: 0, cnt: 0}
+ let n = {x: 0, y: 0}
+ 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!
+ 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 (c.cnt > 0) {
+ c.x /= 2 * c.cnt
+ c.y /= 2 * c.cnt
+ let norm = Math.sqrt(n.x ** 2 + n.y ** 2)
+ n.x /= norm
+ n.y /= norm
+ console.log(c.cnt, c, n)
+ collide(a, b, c, n)
+ }
+ }
+ }
+ }
+
+ // Render every 10ms
+ cnt++
+ if (cnt == 10) {
+ cnt = 0
+ for (a of A) {
+ let e = document.getElementById(a.id)
+ e.style.left = a.x - a.cm.x + "px"
+ e.style.top = a.y - a.cm.y + "px"
+ e.style.rotate = a.th + "rad"
+ }
+ }
+}
+
+// Use click to update velocities
+function updatev(event) {
+ for (a of A) {
+ let d = ds(a, {x: event.clientX, y: event.clientY})
+ a.vx += 100 * (a.x - event.clientX) / d
+ a.vy += 100 * (a.y - event.clientY) / d
+ }
+
+ // TODO: Display spreading out circles
+
+}
+
+cnt = 0
+setInterval(tick, 1)
+document.addEventListener("click", updatev)
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fe2652d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,45 @@
+body {
+/* background-image: url("catgirl.png"); */
+ background-size: auto 100vh;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ touch-action: manipulation;
+}
+
+@keyframes color {
+ 10% {
+ color: #a43535;
+ }
+ 20% {
+ color: #ff7b00;
+ }
+ 30% {
+ color: #ffff51;
+ }
+ 40% {
+ color: #a7ff4e;
+ }
+ 50% {
+ color: #7addfe;
+ }
+ 60% {
+ color: #6b6bfd;
+ }
+ 70% {
+ color: #ca61ff;
+ }
+ 80% {
+ color: #ff54af;
+ }
+ 90% {
+ color: #f3bbff;
+ }
+}
+
+svg {
+ color: #f3bbff;
+ font-size: 240px;
+ animation: color 10s infinite linear;
+ position: absolute;
+}
--
cgit v1.2.3-70-g09d2