tophtucker/README.md

## README.md

      
    Raw
  

              README.md
            
          
    For devices with accelerometers

  
## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<link rel="stylesheet" type="text/css" href="main.css"/>

<body>

</body>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js" charset="utf-8"></script>

<script src="main.js" charset="utf-8"></script>

</html>

## main.css
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
}

## main.js
var gamma = 0,  // - left-to-right + (radians)
    beta = 0,   // - back-to-front + (radians)
    alpha = 0;  // compass direction (radians)

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(e) {
    gamma   = e.gamma * (Math.PI / 180);
    beta    = e.beta  * (Math.PI / 180);
    alpha   = e.alpha * (Math.PI / 180);
  });
}

function getPattern(pixelSize, bandWidth, offset, color) {
  var width = height = pixelSize;

  bandWidth = bandWidth % 1;
  offset = offset % 1;

  var pattern = document.createElement('canvas');
  var ctx = pattern.getContext('2d');
  pattern.setAttribute('width', width);
  pattern.setAttribute('height', height);

  ctx.fillStyle = color;
  ctx.fillRect(offset*width, 0, bandWidth*width, height);
  ctx.fillRect((offset-1)*width, 0, bandWidth*width, height);

  return pattern;
}

function render(t, ctx) {

  d3.select("canvas").node().setAttribute('width', innerWidth * 2);
  d3.select("canvas").node().setAttribute('height', innerHeight * 2);
  ctx.font = "800 " + (innerWidth/2) + "px helvetica, arial, sans-serif";
  ctx.textBaseline = 'middle';
  ctx.textAlign = "center";
  ctx.scale(2,2);

  ctx.globalCompositeOperation = "source-over";

  ctx.clearRect(0,0,innerWidth,innerHeight);

  ctx.fillStyle = ctx.createPattern(getPattern(10, .5, Math.sin(gamma + alpha)+1, "#000000"), "repeat");
  ctx.fillRect(0,0,innerWidth,innerHeight);

  ctx.fillStyle = ctx.createPattern(getPattern(9, .5, Math.cos(beta)+1, "#000000"), "repeat");
  ctx.fillText("Fake", innerWidth*.5, innerHeight/2);

}

function init() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.setAttribute('width', innerWidth);
  canvas.setAttribute('height', innerHeight);
  // ctx.scale(2,2);

  // Add our demo to the HTML
  document.body.appendChild(canvas);

  ctx.font = "800 400px helvetica, arial, sans-serif";
  ctx.textBaseline = 'middle';
  ctx.textAlign = "center";

  d3.timer(function(t) { render(t, ctx); });
}

init();

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>

	<link rel="stylesheet" type="text/css" href="main.css"/>

	<body>

	</body>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
	<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js" charset="utf-8"></script>

	<script src="main.js" charset="utf-8"></script>

	</html>
	body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}

	canvas {
	width: 100%;
	height: 100%;
	}
	var gamma = 0, // - left-to-right + (radians)
	beta = 0, // - back-to-front + (radians)
	alpha = 0; // compass direction (radians)

	if (window.DeviceOrientationEvent) {
	window.addEventListener('deviceorientation', function(e) {
	gamma = e.gamma * (Math.PI / 180);
	beta = e.beta * (Math.PI / 180);
	alpha = e.alpha * (Math.PI / 180);
	});
	}

	function getPattern(pixelSize, bandWidth, offset, color) {
	var width = height = pixelSize;

	bandWidth = bandWidth % 1;
	offset = offset % 1;

	var pattern = document.createElement('canvas');
	var ctx = pattern.getContext('2d');
	pattern.setAttribute('width', width);
	pattern.setAttribute('height', height);

	ctx.fillStyle = color;
	ctx.fillRect(offsetwidth, 0, bandWidthwidth, height);
	ctx.fillRect((offset-1)width, 0, bandWidthwidth, height);

	return pattern;
	}

	function render(t, ctx) {

	d3.select("canvas").node().setAttribute('width', innerWidth * 2);
	d3.select("canvas").node().setAttribute('height', innerHeight * 2);
	ctx.font = "800 " + (innerWidth/2) + "px helvetica, arial, sans-serif";
	ctx.textBaseline = 'middle';
	ctx.textAlign = "center";
	ctx.scale(2,2);

	ctx.globalCompositeOperation = "source-over";

	ctx.clearRect(0,0,innerWidth,innerHeight);

	ctx.fillStyle = ctx.createPattern(getPattern(10, .5, Math.sin(gamma + alpha)+1, "#000000"), "repeat");
	ctx.fillRect(0,0,innerWidth,innerHeight);

	ctx.fillStyle = ctx.createPattern(getPattern(9, .5, Math.cos(beta)+1, "#000000"), "repeat");
	ctx.fillText("Fake", innerWidth*.5, innerHeight/2);

	}

	function init() {
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	canvas.setAttribute('width', innerWidth);
	canvas.setAttribute('height', innerHeight);
	// ctx.scale(2,2);

	// Add our demo to the HTML
	document.body.appendChild(canvas);

	ctx.font = "800 400px helvetica, arial, sans-serif";
	ctx.textBaseline = 'middle';
	ctx.textAlign = "center";

	d3.timer(function(t) { render(t, ctx); });
	}

	init();