Generate palette automatically

engine-proto/ganja-test/ganja-test.jl

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