Generate palette automatically

This commit is contained in:
Aaron Fenyes 2024-06-25 17:57:16 -07:00
parent b7b5b9386b
commit 182b5bb9f6
2 changed files with 63 additions and 34 deletions

View File

@ -21,43 +21,55 @@
<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 v = [ 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(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)() 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 // create scene function
let scene = () => [ function scene() {
0xff00b0, v[0], commands = [];
0x00ffb0, v[1], resetColorCycle();
0x00b0ff, v[2], elements.forEach((elt) => commands.push(nextColor(), elt));
0x8040ff, v[3], return commands;
0xc0c0c0, v[4] }
];
// initialize graph // initialize graph
let gr = CGA3.graph( let graph = CGA3.graph(
scene, scene,
{ {
conformal: true, gl: true, grid: true conformal: true, gl: true, grid: true
} }
) )
document.body.appendChild(gr); document.body.appendChild(graph);
function flip() { function flip() {
for (let n = 0; n < 4; ++n) { let last = elements.length - 1;
for (let n = 0; n < last; ++n) {
// reflect // reflect
v[n] = CGA3.Mul(CGA3.Mul(v[4], v[n]), v[4]); elements[n] = CGA3.Mul(CGA3.Mul(elements[last], elements[n]), elements[last]);
// de-noise // de-noise
for (let k = 6; k < v[n].length; ++k) { for (let k = 6; k < elements[n].length; ++k) {
v[n][k] = 0; elements[n][k] = 0;
} }
} }
requestAnimationFrame(gr.update.bind(gr, scene)); requestAnimationFrame(graph.update.bind(graph, scene));
} }
</script> </script>
</body> </body>

View File

@ -1,4 +1,5 @@
using Blink using Blink
using Colors
# === utilities === # === utilities ===
@ -13,8 +14,22 @@ style!(w, stylesheet) = append_to_head!(w, "style", stylesheet)
script!(w, code) = append_to_head!(w, "script", code) script!(w, code) = append_to_head!(w, "script", code)
function add_element!(vec) function add_element!(vec)
# add element
full_vec = [0; vec; fill(0, 26)] full_vec = [0; vec; fill(0, 26)]
@js win elements.push(@new CGA3($full_vec)) 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 end
# === build page === # === build page ===
@ -45,26 +60,28 @@ loadjs!(win, "https://unpkg.com/ganja.js")
script!(win, """ script!(win, """
// create algebra // create algebra
var CGA3 = Algebra(4, 1); var CGA3 = Algebra(4, 1);
// in the default view, e4 + e5 is the point at infinity // initialize element list and palette
var elements = []; var elements = [];
var palette = [];
// create scene function
let scene = () => [
0xff00b0, elements[0],
0x00ffb0, elements[1],
0x00b0ff, elements[2],
0x8040ff, elements[3],
0xc0c0c0, elements[4]
];
// declare visualization handle // declare visualization handle
var graph; 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() { function flip() {
for (let n = 0; n < 4; ++n) { let last = elements.length - 1;
for (let n = 0; n < last; ++n) {
// reflect // reflect
elements[n] = CGA3.Mul(CGA3.Mul(elements[4], elements[n]), elements[4]); elements[n] = CGA3.Mul(CGA3.Mul(elements[last], elements[n]), elements[last]);
// de-noise // de-noise
for (let k = 6; k < elements[n].length; ++k) { for (let k = 6; k < elements[n].length; ++k) {
@ -78,7 +95,7 @@ script!(win, """
# set up controls # set up controls
body!(win, """ body!(win, """
<p><button id="flip-button" onclick="flip()">Flip</button></p> <p><button id="flip-button" onclick="flip()">Flip</button></p>
""", async=false) """, async = false)
# === set up visualization === # === set up visualization ===
@ -106,5 +123,5 @@ end
"grid" => true "grid" => true
) )
) )
document.body.appendChild(graph); document.body.appendChild(graph)
end end