tophtucker/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Ripping off Bostock’s recreation of a Dave Whyte’s GIF to throw in some of Veltman’s CMYK stuff.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

canvas {
  position: absolute;
}

#canvas-back {
  display: none;
}

</style>
<canvas id="canvas" width="960" height="500"></canvas>
<script>

/* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});

var colors = ["yellow", "magenta", "cyan", "black"],
    mouse = [0,0];

var canvas = document.getElementById("canvas");

var width = canvas.width,
    height = canvas.height,
    ringRadius = 20,
    ringSeparation = 1.1 * ringRadius,
    dotRadius = 10,
    n = (width + ringRadius) / ringSeparation,
    m = (height + ringRadius) / ringSeparation;

var context,
    scale = window.devicePixelRatio;

if (scale > 1) {
  canvas.style.width = width + "px";
  canvas.style.height = height + "px";
  canvas.width = width * scale;
  canvas.height = height * scale;
  context = canvas.getContext("2d");
  context.scale(scale, scale);
} else {
  context = canvas.getContext("2d");
}

context.globalCompositeOperation = 'multiply';
d3_timer.timer(function(elapsed) {
  context.clearRect(0, 0, width, height);
  for (var i = -1; i < n; ++i) {
    for (var j = -1; j < m; ++j) {
      var prox = dist([i * ringSeparation, j * ringSeparation], mouse) / 100
      var c = (i + j * 2) % 4;
      var r = 1 + Math.sin(c * (Math.PI/2) + prox)
      context.save();
      context.fillStyle = colors[c];
      context.beginPath();
      context.translate(i * ringSeparation, j * ringSeparation);
      context.rotate((i + j) / 6 + elapsed / 200);
      context.arc(0, 0, dotRadius * r, 0, 2 * Math.PI);
      context.fill();
      context.restore();
    }
  }
});

canvas.addEventListener('mousemove', function(e) {
  mouse = [e.pageX, e.pageY];
})

function dist(a,b) {
  return Math.sqrt(
    Math.pow(b[0] - a[0], 2) +
    Math.pow(b[1] - a[1], 2)
  )
}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	canvas {
	position: absolute;
	}

	#canvas-back {
	display: none;
	}

	</style>
	<canvas id="canvas" width="960" height="500"></canvas>
	<script>

	/* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
	!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame\|\|window.msRequestAnimationFrame\|\|window.mozRequestAnimationFrame\|\|window.webkitRequestAnimationFrame\|\|window.oRequestAnimationFrame)\|\|function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});

	var colors = ["yellow", "magenta", "cyan", "black"],
	mouse = [0,0];

	var canvas = document.getElementById("canvas");

	var width = canvas.width,
	height = canvas.height,
	ringRadius = 20,
	ringSeparation = 1.1 * ringRadius,
	dotRadius = 10,
	n = (width + ringRadius) / ringSeparation,
	m = (height + ringRadius) / ringSeparation;

	var context,
	scale = window.devicePixelRatio;

	if (scale > 1) {
	canvas.style.width = width + "px";
	canvas.style.height = height + "px";
	canvas.width = width * scale;
	canvas.height = height * scale;
	context = canvas.getContext("2d");
	context.scale(scale, scale);
	} else {
	context = canvas.getContext("2d");
	}

	context.globalCompositeOperation = 'multiply';
	d3_timer.timer(function(elapsed) {
	context.clearRect(0, 0, width, height);
	for (var i = -1; i < n; ++i) {
	for (var j = -1; j < m; ++j) {
	var prox = dist([i * ringSeparation, j * ringSeparation], mouse) / 100
	var c = (i + j * 2) % 4;
	var r = 1 + Math.sin(c * (Math.PI/2) + prox)
	context.save();
	context.fillStyle = colors[c];
	context.beginPath();
	context.translate(i * ringSeparation, j * ringSeparation);
	context.rotate((i + j) / 6 + elapsed / 200);
	context.arc(0, 0, dotRadius * r, 0, 2 * Math.PI);
	context.fill();
	context.restore();
	}
	}
	});

	canvas.addEventListener('mousemove', function(e) {
	mouse = [e.pageX, e.pageY];
	})

	function dist(a,b) {
	return Math.sqrt(
	Math.pow(b[0] - a[0], 2) +
	Math.pow(b[1] - a[1], 2)
	)
	}

	</script>