Add bezier interpolation

mooreryan · Mar 14, 2018 · da70a69 · da70a69
1 parent 89d8798
commit da70a69
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git a/app/assets/javascripts/biom.js b/app/assets/javascripts/biom.js
@@ -89,8 +89,9 @@ var g_ID_CORRECT_PALETTE_LIGHTNESS  = "correct-palette-lightness",
 var g_ID_PALETTE_PADDING  = "palette-padding",
     g_val_palette_padding = 0.05;
 
-var g_ID_PALETTE_INTERPOLATION_MODE  = "palette-interpolation-mode",
-    g_val_palette_interpolation_mode = "lab";
+var g_ID_PALETTE_INTERPOLATION_MODE             = "palette-interpolation-mode",
+    g_OPT_PALETTE_INTERPOLATION_MODE_LAB_BEZIER = "lab-bezier",
+    g_val_palette_interpolation_mode            = "lab";
 
 
 // Set the correct options panel to show
@@ -225,26 +226,28 @@ function biom__upload_button() {
       .attr("height", 100)
       .attr("width", 800);
 
-    if (g_val_correct_palette_lightness) {
-      var color_scale = chroma.scale(g_val_palette)
-                              .mode(g_val_palette_interpolation_mode)
-                              .padding(g_val_palette_padding)
-                              .correctLightness();
+    // Set up the color scale if it hasn't already been done by the data.
+    var color_scale = null;
+    if (g_val_palette_interpolation_mode === g_OPT_PALETTE_INTERPOLATION_MODE_LAB_BEZIER) {
+      // The max is 5 that bezier can handle.
+      var tmp_scale = chroma.scale(g_val_palette).colors(5);
+      color_scale = chroma.bezier(tmp_scale).scale();
     }
     else {
-      var color_scale = chroma.scale(g_val_palette)
-                              .mode(g_val_palette_interpolation_mode)
-                              .padding(g_val_palette_padding);
+      color_scale = chroma.scale(g_val_palette)
+                          .mode(g_val_palette_interpolation_mode);
+    }
+    color_scale = color_scale.padding(g_val_palette_padding);
+    if (g_val_correct_palette_lightness) {
+      color_scale = color_scale.correctLightness();
     }
 
     if (g_val_biom_str) {
       var params            = set_params(g_val_biom_str);
       var fully_parsed_biom = fn.parsed_biom.new(params);
 
       if (fully_parsed_biom.data_for_preview) {
-        var data = fn.obj.vals(fully_parsed_biom.data_for_preview);
-        console.log("data from draw");
-        console.log(data);
+        var data     = fn.obj.vals(fully_parsed_biom.data_for_preview);
         var data_min = fn.ary.min(data);
         var data_max = fn.ary.max(data);
       }

diff --git a/app/assets/javascripts/fn/complex/parsed_biom.js b/app/assets/javascripts/fn/complex/parsed_biom.js
@@ -647,17 +647,20 @@ fn.parsed_biom.colors_palette_style = function (fully_parsed_biom, opts) {
   console.log("data from parsed_biom");
   console.log(data_scaled);
 
-
-  if (correct_palette_lightness) {
-    var color_scale = chroma.scale(palette)
-                            .mode(palette_interpolation_mode)
-                            .padding(palette_padding)
-                            .correctLightness();
+  // Set up the color scale
+  var color_scale = null;
+  if (palette_interpolation_mode === g_OPT_PALETTE_INTERPOLATION_MODE_LAB_BEZIER) {
+    // The max is 5 that bezier can handle.
+    var tmp_scale = chroma.scale(palette).colors(5);
+    color_scale = chroma.bezier(tmp_scale).scale();
   }
   else {
-    var color_scale = chroma.scale(palette)
-                            .mode(palette_interpolation_mode)
-                            .padding(palette_padding);
+    color_scale = chroma.scale(palette)
+                        .mode(palette_interpolation_mode);
+  }
+  color_scale = color_scale.padding(palette_padding);
+  if (correct_palette_lightness) {
+    color_scale = color_scale.correctLightness();
   }
 
   data_scaled.forEach(function (val, idx) {

diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
@@ -23,11 +23,12 @@ def biom
     @color_brewer_colors_printable_names = %w(Orange-Red Purple-Blue Blue-Purple Oranges Blue-Green Yellow-Orange-Brown Yellow-Green Reds Red-Purple Greens Yellow-Green-Blue Purples Green-Blue Greys Yellow-Orange-Red Purple-Red Blues Purple-Blue-Green Viridis Spectral Red-Yellow-Green Red-Blue Pi-YG PR-Green Red-Yellow-Blue Brown-BG Red-Gy Purple-Orange Set2 Accent Set1 Set3 Dark2 Paired Pastel2 Pastel1)
 
     @palette_interpolation_vals = {
-        "palette-interpolation-mode-lab"  => { name: "Lab", val: "lab" },
-        "palette-interpolation-mode-rgb"  => { name: "Red-green-blue", val: "rgb" },
-        "palette-interpolation-mode-lrgb" => { name: "Linear red-green-blue", val: "lrgb" },
-        "palette-interpolation-mode-hsl"  => { name: "Hue-saturation-lightness", val: "hsl" },
-        "palette-interpolation-mode-lch"  => { name: "Hue-chroma-lightness", val: "lch" },
+        "palette-interpolation-mode-lab"        => { name: "Lab", val: "lab" },
+        "palette-interpolation-mode-lab-bezier" => { name: "Bezier Lab", val: "lab-bezier" },
+        "palette-interpolation-mode-rgb"        => { name: "Red-green-blue", val: "rgb" },
+        "palette-interpolation-mode-lrgb"       => { name: "Linear red-green-blue", val: "lrgb" },
+        "palette-interpolation-mode-hsl"        => { name: "Hue-saturation-lightness", val: "hsl" },
+        "palette-interpolation-mode-lch"        => { name: "Hue-chroma-lightness", val: "lch" },
     }
   end
 end