From 69a9baa8ee50329614ad691d79de2bd222196eac Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Tue, 25 Jun 2024 03:11:50 -0700 Subject: [PATCH] Add live updates to Ganja.js visualization --- engine-proto/ganja-test/ganja-test.html | 49 ++++++++++++++-------- engine-proto/ganja-test/ganja-test.jl | 56 +++++++++++++++++-------- 2 files changed, 70 insertions(+), 35 deletions(-) diff --git a/engine-proto/ganja-test/ganja-test.html b/engine-proto/ganja-test/ganja-test.html index f1aeea7..e1da682 100644 --- a/engine-proto/ganja-test/ganja-test.html +++ b/engine-proto/ganja-test/ganja-test.html @@ -17,31 +17,46 @@ +

diff --git a/engine-proto/ganja-test/ganja-test.jl b/engine-proto/ganja-test/ganja-test.jl index 9ea621b..0808089 100644 --- a/engine-proto/ganja-test/ganja-test.jl +++ b/engine-proto/ganja-test/ganja-test.jl @@ -25,31 +25,51 @@ canvas { } """ +controls = """ +

+""" + graph_script = """ // in the default view, e4 + e5 is the point at infinity let CGA3 = Algebra(4, 1); -let v1 = CGA3.inline(() => 1e1 + 1e5)(); -let v2 = CGA3.inline(() => 1e2 + 1e5)(); -let v3 = CGA3.inline(() => 1e3 + 1e5)(); -let w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); -let w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); -let w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); +let v = [ + CGA3.inline(() => 1e1 + 1e5)(), + CGA3.inline(() => 1e2 + 1e5)(), + CGA3.inline(() => 1e3 + 1e5)() +]; +let w = [ + CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(), + CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(), + CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)() +]; let s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5); -document.body.appendChild(CGA3.graph( - [ - 0xff00b0, v1, - 0x00ffb0, v2, - 0x00b0ff, v3, - 0x800040, w1, - 0x008040, w2, - 0x004080, w3, - 0xd0e0f0, s - ], +// create scene function +let scene = () => [ + 0xff00b0, v[0], + 0x00ffb0, v[1], + 0x00b0ff, v[2], + 0x800040, w[0], + 0x008040, w[1], + 0x004080, w[2], + 0xd0e0f0, s +]; + +// initialize graph +let gr = CGA3.graph( + scene, { conformal: true, gl: true, grid: true } -)); +) +document.body.appendChild(gr); + +// connect flip button +function flipPoint() { + v[0] = CGA3.Dual(CGA3.Mul(s, v[0])); + requestAnimationFrame(gr.update.bind(gr, scene)); +} +document.querySelector('#flip-button').addEventListener('click', flipPoint); """ # === page construction === @@ -65,5 +85,5 @@ style!(win, stylesheet) loadjs!(win, "https://unpkg.com/ganja.js") # launch Ganja visualization -body!(win, "", async=false) +body!(win, controls, async=false) js(win, JSString(graph_script))