Generate palette automatically

engine-proto/ganja-test/ganja-test.html

@@ -21,43 +21,55 @@
   <script>
   // in the default view, e4 + e5 is the point at infinity
   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(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
-  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
-  let gr = CGA3.graph(
+  let graph = CGA3.graph(
     scene,
     {
       conformal: true, gl: true, grid: true
     }
   )
-  document.body.appendChild(gr);
+  document.body.appendChild(graph);
   
   function flip() {
-    for (let n = 0; n < 4; ++n) {
+    let last = elements.length - 1;
+    for (let n = 0; n < last; ++n) {
       // 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
-      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>
 </body>

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 = [];
-
+  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
   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