Load elements from Julia into Ganja.js

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
+append_to_head!(w, type, content) = @js win begin
-  @var style = document.createElement("style");
+  @var element = document.createElement($type)
-  style.appendChild(document.createTextNode($stylesheet));
+  element.appendChild(document.createTextNode($content))
-  document.head.appendChild(style);
+  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 = """
-<p><button id="flip-button">Flip</button></p>
-"""
-
-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
+# create global functions and variables
-body!(win, controls, async=false)
+script!(win, """
-js(win, JSString(graph_script))
+  // 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, """
+  <p><button id="flip-button" onclick="flip()">Flip</button></p>
+""", 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