Load elements from Julia into Ganja.js
This commit is contained in:
parent
06a9dda5bb
commit
b7b5b9386b
@ -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
|
Loading…
Reference in New Issue
Block a user