index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #222;
margin: auto;
width: 960px;
}
</style>
<canvas width="960" height="960"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.21.min.js"></script>
<script>
var canvas = d3.select("canvas"),
width = +canvas.attr("width"),
height = +canvas.attr("height"),
ctx = canvas.node().getContext("2d");
var point = [width / 2, height / 2];
var lastMouse = [width / 2, height / 2]
var space = 20;
var dx, dy, dist;
var color;
var colorX = d3.scaleLinear().domain([0, width]).range([0, 360]);
var colorY = d3.scaleLinear().domain([0, height]).range([0, 1]);
var rot = d3.scaleLinear().domain([Math.PI, -Math.PI]).range([0, 360]);
var thickness = d3.scaleLinear(19).domain([0, Math.sqrt(width*width + height*height)]).range([20, 2]);
var satScales = [
d3.scaleLinear().domain([0, Math.max(width / 2, height / 2)]).range([1.0, 2.0]),
d3.scaleLinear().domain([0, Math.max(width / 2, height / 2)]).range([50, 0]),
];
var last = [0.5, 0.9];
var methods = [d3.cubehelix, d3.hsl];
var i = 1;
var rotated = 0;
function draw() {
ctx.clearRect(0, 0, width, height);
for (var x = 0; x < width; x += space) {
for (var y = 0; y < height; y += space) {
dx = x - point[0];
dy = y - point[1];
theta = Math.atan2(dy, dx);
dist = Math.sqrt(dx*dx + dy*dy);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + Math.cos(theta)*20, y + Math.sin(theta) * 20);
ctx.strokeStyle = methods[i](rot(rotated + theta), satScales[i](dist), last[i]).toString();
ctx.lineWidth = thickness(dist);
ctx.stroke();
}
}
}
draw();
function update() {
rotated -= 0.02;
draw();
requestAnimationFrame(update);
};
requestAnimationFrame(update);
canvas.on("mousemove", function() {
point = d3.mouse(canvas.node());
var movedX = point[0] - lastMouse[0];
var movedY = point[1] - lastMouse[1];
var moved = Math.sqrt(movedX*movedX + movedY*movedY);
rotated += moved / 100;
lastMouse = point;
});
canvas.on("mousedown", function() {
i = (i + 1) % 2;
console.log(i);
});
</script>