glen/dyna3
1
0
Fork 0
Code Issues 11 Pull Requests Actions Projects Releases 2 Wiki Activity

Add live updates to Ganja.js visualization

Browse Source
This commit is contained in:
Aaron Fenyes 2024-06-25 03:11:50 -07:00
parent 3b10c95d5f
commit 69a9baa8ee
2 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
engine-proto/ganja-test/ganja-test.html
View File

@ -17,31 +17,46 @@
<script src="https://unpkg.com/ganja.js"></script> <script src="https://unpkg.com/ganja.js"></script>
</head> </head>
<body> <body>
<p><button onclick="flipPoint()">Flip point</button></p>
<script> <script>
// in the default view, e4 + e5 is the point at infinity // in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1); let CGA3 = Algebra(4, 1);
let v1 = CGA3.inline(() => 1e1 + 1e5)(); let v = [
let v2 = CGA3.inline(() => 1e2 + 1e5)(); CGA3.inline(() => 1e1 + 1e5)(),
let v3 = CGA3.inline(() => 1e3 + 1e5)(); CGA3.inline(() => 1e2 + 1e5)(),
let w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); CGA3.inline(() => 1e3 + 1e5)()
let w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); ];
let w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*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); let s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5);
document.body.appendChild(CGA3.graph( // create scene function
[ let scene = () => [
0xff00b0, v1, 0xff00b0, v[0],
0x00ffb0, v2, 0x00ffb0, v[1],
0x00b0ff, v3, 0x00b0ff, v[2],
0x800040, w1, 0x800040, w[0],
0x008040, w2, 0x008040, w[1],
0x004080, w3, 0x004080, w[2],
0xd0e0f0, s 0xd0e0f0, s
], ];
// initialize graph
let gr = CGA3.graph(
scene,
{ {
conformal: true, gl: true, grid: true conformal: true, gl: true, grid: true
} }
)); )
document.body.appendChild(gr);
function flipPoint() {
v[0] = CGA3.Dual(CGA3.Mul(s, v[0]));
requestAnimationFrame(gr.update.bind(gr, scene));
}
</script> </script>
</body> </body>
</html> </html>

56
engine-proto/ganja-test/ganja-test.jl
View File

@ -25,31 +25,51 @@ canvas {
} }
""" """
controls = """
<p><button id="flip-button">Flip point</button></p>
"""
graph_script = """ graph_script = """
// in the default view, e4 + e5 is the point at infinity // in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1); let CGA3 = Algebra(4, 1);
let v1 = CGA3.inline(() => 1e1 + 1e5)(); let v = [
let v2 = CGA3.inline(() => 1e2 + 1e5)(); CGA3.inline(() => 1e1 + 1e5)(),
let v3 = CGA3.inline(() => 1e3 + 1e5)(); CGA3.inline(() => 1e2 + 1e5)(),
let w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); CGA3.inline(() => 1e3 + 1e5)()
let w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(); ];
let w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*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); let s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5);
document.body.appendChild(CGA3.graph( // create scene function
[ let scene = () => [
0xff00b0, v1, 0xff00b0, v[0],
0x00ffb0, v2, 0x00ffb0, v[1],
0x00b0ff, v3, 0x00b0ff, v[2],
0x800040, w1, 0x800040, w[0],
0x008040, w2, 0x008040, w[1],
0x004080, w3, 0x004080, w[2],
0xd0e0f0, s 0xd0e0f0, s
], ];
// initialize graph
let gr = CGA3.graph(
scene,
{ {
conformal: true, gl: true, grid: true 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 === # === page construction ===
@ -65,5 +85,5 @@ style!(win, stylesheet)
loadjs!(win, "https://unpkg.com/ganja.js") loadjs!(win, "https://unpkg.com/ganja.js")
# launch Ganja visualization # launch Ganja visualization
body!(win, "", async=false) body!(win, controls, async=false)
js(win, JSString(graph_script)) js(win, JSString(graph_script))