diff --git a/components/Article.jsx b/components/Article.jsx
index 778ae11c..06f76123 100644
--- a/components/Article.jsx
+++ b/components/Article.jsx
@@ -33,7 +33,7 @@ var Article = React.createClass({
generateNavItem: function(name, entry) {
var Type = this.state.sections[name];
- return {Type.title || name};
+ return {Type.title || name};
},
render: function() {
diff --git a/components/Graphic.jsx b/components/Graphic.jsx
index 46686f22..a174262a 100644
--- a/components/Graphic.jsx
+++ b/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}
/>
{this.props.title}
@@ -81,12 +84,18 @@ var Graphic = React.createClass({
});
this.cvs.style.cursor = found ? "pointer" : "default";
- if(!this.moving) return;
- 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();
+ 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() {
- var r = ((205*Math.random())|0),
- g = ((155*Math.random())|0),
- b = ((255*Math.random())|0);
- this.ctx.strokeStyle = "rgb("+r+","+g+","+b+")";
+ setRandomColor: function(a) {
+ a = (typeof a === "undefined") ? 1 : a;
+ var h = this.colorSeed % 360,
+ s = 1.0,
+ 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),
- g = ((255*Math.random())|0),
- b = ((255*Math.random())|0);
- this.ctx.fillStyle = "rgba("+r+","+g+","+b+","+a+")";
+ var h = this.colorSeed % 360,
+ s = 1.0,
+ l = 0.34;
+ 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;
diff --git a/components/sections/control/index.js b/components/sections/control/index.js
index edf42802..b1b5abc3 100644
--- a/components/sections/control/index.js
+++ b/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)
};
});
}
diff --git a/package.json b/package.json
index 5bad5200..84718b96 100644
--- a/package.json
+++ b/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",