dyna3/engine-proto/ganja-test/ganja-test.jl
2024-06-25 03:11:50 -07:00

90 lines
1.8 KiB
Julia

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;
}
"""
controls = """
<p><button id="flip-button">Flip point</button></p>
"""
graph_script = """
// in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1);
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);
// 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 ===
# 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))