Load elements from Julia into Ganja.js

This commit is contained in:
Aaron Fenyes 2024-06-25 16:30:19 -07:00
parent 06a9dda5bb
commit b7b5b9386b

View File

@ -1,17 +1,30 @@
using Blink 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 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 { body {
background-color: #ffe0f0; background-color: #ffe0f0;
} }
@ -23,69 +36,75 @@ canvas {
min-height: 600px; min-height: 600px;
max-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 # load Ganja.js
loadjs!(win, "https://unpkg.com/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