arrayjam/.block

## .block
height: 960

## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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(widthwidth + heightheight)]).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(dxdx + dydy);

	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(movedXmovedX + movedYmovedY);
	rotated += moved / 100;
	lastMouse = point;
	});

	canvas.on("mousedown", function() {
	i = (i + 1) % 2;
	console.log(i);
	});



	</script>