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

Merge branch 'ganja' into gram

Browse Source 
Visualize low-rank factorization results.
This commit is contained in:
Aaron Fenyes 2024-06-26 11:12:24 -07:00
commit 5aadfecf6c
3 changed files with 326 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
engine-proto/ConstructionViewer.jl Normal file
View File

@ -0,0 +1,123 @@
module Viewer
using Blink
using Colors
export ConstructionViewer, display!
# === Blink utilities ===
append_to_head!(w, type, content) = @js w 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)
# === construction viewer ===
mutable struct ConstructionViewer
win::Window
function ConstructionViewer()
# create window and open developer console
win = Window()
opentools(win)
# set stylesheet
style!(win, """
/* 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);
// initialize element list and palette
var elements = [];
var palette = [];
// declare visualization handle
var graph;
// create scene function
function scene() {
commands = [];
for (let n = 0; n < elements.length; ++n) {
commands.push(palette[n], elements[n]);
}
return commands;
}
""")
# create view
@js win begin
graph = CGA3.graph(
scene,
Dict(
"conformal" => true,
"gl" => true,
"grid" => true
)
)
document.body.replaceChildren(graph)
end
new(win)
end
end
function display!(viewer::ConstructionViewer, elements::Matrix)
# load elements
elements_full = [
[0; elt; fill(0, 26)]
for elt in eachcol(elements)
]
@js viewer.win elements = $elements_full.map((elt) -> @new CGA3(elt))
# generate palette. this is Gadfly's `default_discrete_colors` palette,
# available under the MIT license
palette = distinguishable_colors(
length(elements_full),
[LCHab(70, 60, 240)],
transform = c -> deuteranopic(c, 0.5),
lchoices = Float64[65, 70, 75, 80],
cchoices = Float64[0, 50, 60, 70],
hchoices = range(0, stop=330, length=24)
)
palette_packed = [RGB24(c).color for c in palette]
@js viewer.win palette = $palette_packed
# update view
@js viewer.win requestAnimationFrame(graph.update.bind(graph, scene));
end
end
# ~~~ sandbox setup ~~~
# 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
]
# show construction
viewer = Viewer.ConstructionViewer()
Viewer.display!(viewer, elements)

76
engine-proto/ganja-test/ganja-test.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
<script src="https://unpkg.com/ganja.js"></script>
</head>
<body>
<p><button onclick="flip()">Flip</button></p>
<script>
// in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1);
let elements = [
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)()
];
// set up palette
var colorIndex;
var palette = [0xff00b0, 0x00ffb0, 0x00b0ff, 0x8040ff, 0xc0c0c0];
function nextColor() {
colorIndex = (colorIndex + 1) % palette.length;
return palette[colorIndex];
}
function resetColorCycle() {
colorIndex = palette.length - 1;
}
resetColorCycle();
// create scene function
function scene() {
commands = [];
resetColorCycle();
elements.forEach((elt) => commands.push(nextColor(), elt));
return commands;
}
// initialize graph
let graph = CGA3.graph(
scene,
{
conformal: true, gl: true, grid: true
}
)
document.body.appendChild(graph);
function flip() {
let last = elements.length - 1;
for (let n = 0; n < last; ++n) {
// reflect
elements[n] = CGA3.Mul(CGA3.Mul(elements[last], elements[n]), elements[last]);
// de-noise
for (let k = 6; k < elements[n].length; ++k) {
elements[n][k] = 0;
}
}
requestAnimationFrame(graph.update.bind(graph, scene));
}
</script>
</body>
</html>

127
engine-proto/ganja-test/ganja-test.jl Normal file
View File

@ -0,0 +1,127 @@
using Blink
using Colors
# === utilities ===
append_to_head!(w, type, content) = @js w 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)
# add element
full_vec = [0; vec; fill(0, 26)]
n = @js win elements.push(@new CGA3($full_vec))
# generate palette. this is Gadfly's `default_discrete_colors` palette,
# available under the MIT license
palette = distinguishable_colors(
n,
[LCHab(70, 60, 240)],
transform = c -> deuteranopic(c, 0.5),
lchoices = Float64[65, 70, 75, 80],
cchoices = Float64[0, 50, 60, 70],
hchoices = range(0, stop=330, length=24)
)
palette_packed = [RGB24(c).color for c in palette]
@js win palette = $palette_packed
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);
// initialize element list and palette
var elements = [];
var palette = [];
// declare visualization handle
var graph;
// create scene function
function scene() {
commands = [];
for (let n = 0; n < elements.length; ++n) {
commands.push(palette[n], elements[n]);
}
return commands;
}
function flip() {
let last = elements.length - 1;
for (let n = 0; n < last; ++n) {
// reflect
elements[n] = CGA3.Mul(CGA3.Mul(elements[last], elements[n]), elements[last]);
// 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