dyna3/engine-proto/ganja-test/ganja-test.jl

using Blink
import Blink: JSString

# === styling utility ===

style!(w, stylesheet) = @js win begin
  @var style = document.createElement("style");
  style.appendChild(document.createTextNode($stylesheet));
  document.head.appendChild(style);
end

# === page source ===

stylesheet = """
body {
  background-color: #ffe0f0;
}

/* needed to keep Ganja canvas from blowing up */
canvas {
  min-width: 600px;
  max-width: 600px;
  min-height: 600px;
  max-height: 600px;
}
"""

# the "points spheres plane" example from the Ganja coffee shop
#
#   https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga3d_points_spheres_planes
#
sphere_example = """
// in the default view, e4 + e5 is the point at infinity
CGA3 = Algebra(4, 1);
v1 = CGA3.inline(() => 1e1 + 1e5)();
v2 = CGA3.inline(() => 1e2 + 1e5)();
v3 = CGA3.inline(() => 1e3 + 1e5)();
w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
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
  ],
  {
    conformal: true, gl: true, grid: true
  }
));
"""

# === 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, "", async=false)
js(win, JSString(sphere_example))