control mousemoves

components/Article.jsx

@@ -33,7 +33,7 @@ var Article = React.createClass({
 
   generateNavItem: function(name, entry) {
     var Type = this.state.sections[name];
-    return <li data-number={entry}><a href={'#' + name}>{Type.title || name}</a></li>;
+    return <li key={name} data-number={entry}><a href={'#' + name}>{Type.title || name}</a></li>;
   },
 
   render: function() {

components/Graphic.jsx

@@ -1,5 +1,6 @@
 var React = require("react");
 var ReactDOM = require("react-dom");
+var chroma = require("chroma-js");
 
 var fix = function(e) {
   e = e || window.event;
@@ -22,6 +23,7 @@ var Graphic = React.createClass({
   mp: { x: 0, y: 0},
   offset: { x: 0, y: 0},
   lpts: [],
+  colorSeed: 0,
 
   render: function() {
     var href = "data:text/plain," + this.props.code;
@@ -31,6 +33,7 @@ var Graphic = React.createClass({
                 onMouseDown={this.mouseDown}
                 onMouseMove={this.mouseMove}
                 onMouseUp={this.mouseUp}
+                onMouseOver={this.mouseOver}
                 onClick={this.mouseClick}
                 />
         <figcaption>{this.props.title}</figcaption>
@@ -81,12 +84,18 @@ var Graphic = React.createClass({
     });
     this.cvs.style.cursor = found ? "pointer" : "default";
 
-    if(!this.moving) return;
+    this.hover = {
+      x: evt.offsetX,
+      y: evt.offsetY
+    };
+
+    if(this.moving) {
       this.ox = evt.offsetX - this.mx;
       this.oy = evt.offsetY - this.my;
       this.mp.x = this.cx + this.ox;
       this.mp.y = this.cy + this.oy;
       this.curve.update();
+    }
 
     if (this.props.draw) {
       this.props.draw(this, this.curve);
@@ -106,19 +115,18 @@ var Graphic = React.createClass({
   },
 
 
-
   /**
    * API for curve drawing.
    */
 
 
-
   reset: function() {
     this.refs.canvas.width = this.refs.canvas.width;
     this.ctx.strokeStyle = "black";
     this.ctx.lineWidth = 1;
     this.ctx.fillStyle = "none";
     this.offset = {x:0, y:0};
+    this.colorSeed = 0;
   },
 
   getPanelWidth: function() {
@@ -167,19 +175,22 @@ var Graphic = React.createClass({
     this.ctx.strokeStyle = "transparent";
   },
 
-  setRandomColor: function() {
+  setRandomColor: function(a) {
-    var r = ((205*Math.random())|0),
+    a = (typeof a === "undefined") ? 1 : a;
-        g = ((155*Math.random())|0),
+    var h = this.colorSeed % 360,
-        b = ((255*Math.random())|0);
+        s = 1.0,
-    this.ctx.strokeStyle = "rgb("+r+","+g+","+b+")";
+        l = 0.34;
+    this.colorSeed += 87;
+    this.ctx.strokeStyle = chroma.hsl(h,s,l).alpha(a).css();
   },
 
   setRandomFill: function(a) {
     a = (typeof a === "undefined") ? 1 : a;
-    var r = ((255*Math.random())|0),
+    var h = this.colorSeed % 360,
-        g = ((255*Math.random())|0),
+        s = 1.0,
-        b = ((255*Math.random())|0);
+        l = 0.34;
-    this.ctx.fillStyle = "rgba("+r+","+g+","+b+","+a+")";
+    this.colorSeed += 87;
+    this.ctx.fillStyle = chroma.hsl(h,s,l).alpha(a).css();
   },
 
   setFill: function(c) {
@@ -307,6 +318,15 @@ var Graphic = React.createClass({
     this.ctx.stroke();
   },
 
+  drawRect: function(p1, p2, offset) {
+    offset = offset || { x:0, y:0 };
+    var ox = offset.x + this.offset.x;
+    var oy = offset.y + this.offset.y;
+    this.ctx.rect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y);
+    this.ctx.fill();
+    this.ctx.stroke();
+  },
+
   drawShape: function(shape, offset) {
     offset = offset || { x:0, y:0 };
     var ox = offset.x + this.offset.x;

components/sections/control/index.js

@@ -42,12 +42,40 @@ var Control = React.createClass({
     if (!!label) api.text(label, where);
   },
 
+  drawLerpBox: function(api, dim, pad, p) {
+    api.noColor();
+    api.setFill("rgba(0,0,100,0.2)");
+    var p1 = {x: p.x-5, y:pad},
+        p2 = {x:p.x + 5, y:dim};
+    api.drawRect(p1, p2);
+    api.setColor("black");
+  },
+
+  drawLerpPoint: function(api, tf, pad, fwh, p) {
+    p.y = pad + tf*fwh;
+    api.drawCircle(p, 3)
+    api.setFill("black");
+    api.text(((tf*10000)|0)/100 + "%", {x:p.x+10, y:p.y+4});
+    api.noFill();
+  },
+
   drawQuadraticLerp: function(api) {
+    api.reset();
+
     var dim = api.getPanelWidth(),
         pad = 20,
         fwh = dim - pad*2;
     this.drawGraphBasics(api, dim, pad, fwh);
 
+    var p = api.hover;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      var t = (p.x-pad)/fwh, tf;
+      this.drawLerpPoint(api, (1-t)*(1-t), pad, fwh, p);
+      this.drawLerpPoint(api, 2*(1-t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, (t)*(t), pad, fwh, p);
+    }
+
     this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
       return {
         x: pad + t * fwh,
@@ -69,11 +97,23 @@ var Control = React.createClass({
   },
 
   drawCubicLerp: function(api) {
+    api.reset();
+
     var dim = api.getPanelWidth(),
         pad = 20,
         fwh = dim - pad*2;
     this.drawGraphBasics(api, dim, pad, fwh);
 
+    var p = api.hover;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      var t = (p.x-pad)/fwh, tf;
+      this.drawLerpPoint(api, (1-t)*(1-t)*(1-t), pad, fwh, p);
+      this.drawLerpPoint(api, 2*(1-t)*(1-t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, 3*(1-t)*(t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, (t)*(t)*(t), pad, fwh, p);
+    }
+
     this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
       return {
         x: pad + t * fwh,
@@ -101,12 +141,24 @@ var Control = React.createClass({
   },
 
   draw15thLerp: function(api) {
+    api.reset();
+
     var dim = api.getPanelWidth(),
         pad = 20,
         fwh = dim - pad*2;
     this.drawGraphBasics(api, dim, pad, fwh);
 
-    var factor = [1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1]
+    var factors = [1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1]
+
+    var p = api.hover;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      for(var n=0; n<=15; n++) {
+        var t = (p.x-pad)/fwh,
+            tf = factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n);
+        this.drawLerpPoint(api, tf, pad, fwh, p);
+      }
+    }
 
     for(var n=0; n<=15; n++) {
       var label = false, position = false;
@@ -121,7 +173,7 @@ var Control = React.createClass({
       this.drawFunction(api, label, position, function(t) {
         return {
           x: pad + t * fwh,
-          y: pad + fwh * factor[n] * Math.pow(1-t, 15-n) * Math.pow(t, n)
+          y: pad + fwh * factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n)
         };
       });
     }

package.json

@@ -32,6 +32,7 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "bezier-js": "^1.0.8",
+    "chroma-js": "^1.1.1",
     "css-loader": "^0.23.0",
     "file-loader": "^0.8.5",
     "jsmin": "^1.0.1",