Merge branch 'ganja' into gram
Visualize low-rank factorization results.
This commit is contained in:
Aaron Fenyes
commit
5aadfecf6c
123
engine-proto/ConstructionViewer.jl
Normal file
123
engine-proto/ConstructionViewer.jl
Normal 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
76
engine-proto/ganja-test/ganja-test.html
Normal 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
127
engine-proto/ganja-test/ganja-test.jl
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user