dyna3/engine-proto/ganja-test/ganja-test.jl
2024-06-25 16:30:19 -07:00

110 lines
2.2 KiB
Julia

using Blink
# === utilities ===
append_to_head!(w, type, content) = @js win begin
@var element = document.createElement($type)
element.appendChild(document.createTextNode($content))
document.head.appendChild(element)
end
style!(w, stylesheet) = append_to_head!(w, "style", 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;
}
/* needed to keep Ganja canvas from blowing up */
canvas {
min-width: 600px;
max-width: 600px;
min-height: 600px;
max-height: 600px;
}
""")
# load Ganja.js
loadjs!(win, "https://unpkg.com/ganja.js")
# 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, """
<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