diff --git a/engine-proto/ganja-test/ganja-test.jl b/engine-proto/ganja-test/ganja-test.jl index a5d7f6b..69b768f 100644 --- a/engine-proto/ganja-test/ganja-test.jl +++ b/engine-proto/ganja-test/ganja-test.jl @@ -1,17 +1,30 @@ using Blink -import Blink: JSString -# === styling utility === +# === utilities === -style!(w, stylesheet) = @js win begin - @var style = document.createElement("style"); - style.appendChild(document.createTextNode($stylesheet)); - document.head.appendChild(style); +append_to_head!(w, type, content) = @js win begin + @var element = document.createElement($type) + element.appendChild(document.createTextNode($content)) + document.head.appendChild(element) end -# === page source === +style!(w, stylesheet) = append_to_head!(w, "style", stylesheet) -stylesheet = """ +script!(w, code) = append_to_head!(w, "script", code) + +function add_element!(vec) + full_vec = [0; vec; fill(0, 26)] + @js win elements.push(@new CGA3($full_vec)) +end + +# === build page === + +# create window and open developer console +win = Window() +opentools(win) + +# set stylesheet +style!(win, """ body { background-color: #ffe0f0; } @@ -23,69 +36,75 @@ canvas { min-height: 600px; max-height: 600px; } -""" - -controls = """ -

-""" - -graph_script = """ -// in the default view, e4 + e5 is the point at infinity -let CGA3 = Algebra(4, 1); -let v = [ - CGA3.inline(() => Math.sqrt(0.5)*( 1e1 + 1e2 + 1e3 + 1e5))(), - CGA3.inline(() => Math.sqrt(0.5)*( 1e1 - 1e2 - 1e3 + 1e5))(), - CGA3.inline(() => Math.sqrt(0.5)*(-1e1 + 1e2 - 1e3 + 1e5))(), - CGA3.inline(() => Math.sqrt(0.5)*(-1e1 - 1e2 + 1e3 + 1e5))(), - CGA3.inline(() => -Math.sqrt(3)*1e4 + Math.sqrt(2)*1e5)() -]; - -// create scene function -let scene = () => [ - 0xff00b0, v[0], - 0x00ffb0, v[1], - 0x00b0ff, v[2], - 0x8040ff, v[3], - 0xc0c0c0, v[4] -]; - -// initialize graph -let gr = CGA3.graph( - scene, - { - conformal: true, gl: true, grid: true - } -) -document.body.appendChild(gr); - -// connect flip button -function flip() { - for (let n = 0; n < 4; ++n) { - // reflect - v[n] = CGA3.Mul(CGA3.Mul(v[4], v[n]), v[4]); - - // de-noise - for (let k = 6; k < v[n].length; ++k) { - v[n][k] = 0; - } - } - requestAnimationFrame(gr.update.bind(gr, scene)); -} -document.querySelector('#flip-button').addEventListener('click', flip); -""" - -# === page construction === - -# create window and open developer console -win = Window() -opentools(win) - -# set stylesheet -style!(win, stylesheet) +""") # load Ganja.js loadjs!(win, "https://unpkg.com/ganja.js") -# launch Ganja visualization -body!(win, controls, async=false) -js(win, JSString(graph_script)) +# create global functions and variables +script!(win, """ + // create algebra + var CGA3 = Algebra(4, 1); + + // in the default view, e4 + e5 is the point at infinity + var elements = []; + + // create scene function + let scene = () => [ + 0xff00b0, elements[0], + 0x00ffb0, elements[1], + 0x00b0ff, elements[2], + 0x8040ff, elements[3], + 0xc0c0c0, elements[4] + ]; + + // declare visualization handle + var graph; + + function flip() { + for (let n = 0; n < 4; ++n) { + // reflect + elements[n] = CGA3.Mul(CGA3.Mul(elements[4], elements[n]), elements[4]); + + // de-noise + for (let k = 6; k < elements[n].length; ++k) { + elements[n][k] = 0; + } + } + requestAnimationFrame(graph.update.bind(graph, scene)); + } +""") + +# set up controls +body!(win, """ +

+""", async=false) + +# === set up visualization === + +# list elements. in the default view, e4 + e5 is the point at infinity +elements = sqrt(0.5) * BigFloat[ + 1 1 -1 -1 0; + 1 -1 1 -1 0; + 1 -1 -1 1 0; + 0 0 0 0 -sqrt(6); + 1 1 1 1 2 +] + +# load elements +for vec in eachcol(elements) + add_element!(vec) +end + +# initialize visualization +@js win begin + graph = CGA3.graph( + scene, + Dict( + "conformal" => true, + "gl" => true, + "grid" => true + ) + ) + document.body.appendChild(graph); +end \ No newline at end of file