add mixbox for javascript

javascript/examples/mixer.js

@@ -0,0 +1,133 @@
+let width = 650;
+let height = 650;
+let center_x = width/2;
+let center_y = height/2;
+let outer_radius = 300;
+let inner_radius = 100;
+let circle_radius = 45;
+var colors = [];
+var centers_outside = [];
+var centers_inside = [];
+var sliders_pos = [];
+var mix_t = [];
+let numPigments = 0;
+let step = 0;
+let dragged = -1;
+
+function setup() {
+  createCanvas(650, 650);
+  background(255);
+  colorMode(RGB);
+  stroke(125);
+  strokeWeight(3);
+
+  colors = [color( 255,236,4), color( 252,211,0), color( 255,105,0), color( 225,35,1), color( 191,0,18), color( 128,2,46), color( 78,1,66), color( 74,0,101), color( 16,31,61), color( 13, 27, 68), color( 25,  0, 89), color( 8,34,138), color( 12, 69,118), color(  6, 54, 51), color( 0,74,41), color( 84,50,36), color( 58,39,0), color(  13,9,1), color(249,250,249)];
+
+  numPigments = colors.length;
+  step = TWO_PI / numPigments;
+
+  for(let i=0; i<numPigments; i++)
+  {
+    let x0 = center_x + sin(i * step) * inner_radius;
+    let x1 = center_x + sin(i * step) * outer_radius;
+    let y0 = center_y + cos(i * step) * inner_radius;
+    let y1 = center_y + cos(i * step) * outer_radius;
+
+    centers_inside.push( createVector(x0, y0));
+    centers_outside.push(createVector(x1, y1));
+    mix_t.push(0);
+    sliders_pos.push(createVector(x1,y1));
+
+    fill(colors[i]);
+    line(x0, y0, x1, y1);
+    ellipse(x1, y1, circle_radius, circle_radius);
+    fill(200);
+    ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
+  }
+
+}
+
+function draw() {
+
+  if(dragged > -1)
+  {
+    mix_t[dragged] = get_t(centers_outside[dragged].x, centers_outside[dragged].y, centers_inside[dragged].x, centers_inside[dragged].y, mouseX, mouseY);
+    sliders_pos[dragged] = createVector(centers_outside[dragged].x - sin(dragged * step) * mix_t[dragged] * (outer_radius-inner_radius),
+                                        centers_outside[dragged].y - cos(dragged * step) * mix_t[dragged] * (outer_radius-inner_radius));
+
+    background(255);
+    let weights = 0;
+
+    for(let i=0; i<numPigments; i++)
+    {
+      line(centers_inside[i].x, centers_inside[i].y, centers_outside[i].x, centers_outside[i].y);
+      fill(colors[i]);
+      ellipse(sliders_pos[i].x, sliders_pos[i].y, circle_radius, circle_radius);
+
+      weights += mix_t[i];
+    }
+
+    if(weights > 0.000001)
+    {
+      let latent_mix = [0,0,0,0,0,0,0];
+      for(let j=0; j<numPigments; j++)
+      {
+        if(mix_t[j]>0.000001)
+        {
+          let latent = mixbox.rgbToLatent(colors[j]);
+          let t = mix_t[j]/weights;
+          for(let k=0; k<latent.length; k++)
+          {
+            latent_mix[k] += latent[k] * t;
+          }
+        }
+      }
+      let mixed_color = mixbox.latentToRgb(latent_mix);
+      fill(mixed_color);
+      ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
+    }
+    else
+    {
+      fill(200);
+      ellipse(center_x, center_y, inner_radius*2, inner_radius*2);
+    }
+
+  }
+
+}
+
+function mousePressed()
+{
+  for(let i=0; i<numPigments; i++)
+   {
+     if(mouseX > sliders_pos[i].x - circle_radius/2 &&
+        mouseX < sliders_pos[i].x + circle_radius/2 &&
+        mouseY > sliders_pos[i].y - circle_radius/2 &&
+        mouseY < sliders_pos[i].y + circle_radius/2)
+     {
+       dragged = i;
+     }
+   }
+}
+
+function mouseReleased()
+{
+  dragged = -1;
+}
+
+function get_t (ax, ay, bx, by, qx, qy)
+{
+  let u = createVector(bx-ax, by-ay);
+  let v = createVector(qx-ax, qy-ay);
+
+  let d = (u.x*v.x + u.y*v.y) / u.mag();
+  let t = d/u.mag();
+
+  return clamp(t, 0.0, 1.0);
+}
+
+function clamp(x, lowerlimit, upperlimit) {
+  if (x<lowerlimit) {return lowerlimit;}
+  else if(x>upperlimit){return upperlimit;}
+  else {return x;}
+}