<!DOCTYPE html>
<head>
	<meta charset="utf-8">
  <meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>WebGL Library for Data Visualization and Simulation - PathGL</title>
	
	<script src="/lib/d3.js"></script>
	<script src="/lib/topojson.v1.min.js"></script>
	<script src="/lib/projection.js"></script>
	<script src="/lib/tip.js"></script>
	<script src="../heatmap.js"></script>
	
	<script src="/dist/pathgl.js"></script>
	<link rel="stylesheet" href="/lib/bootstrap.min.css">
  <link rel="stylesheet" href="/lib/adnan.css">
</head>

<body class="mosaic examples">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-3">
				<div class="no-scroll">
					<a class="btn btn-default" href="http://github.com/adnan-wahab/pathgl">Github Repo</a>
					<a class="btn btn-default" href="/dist/pathgl.zip">Download</a>

					<h6>Examples</h6>
					<ul class="examples list-group">
						<li class="list-group-item">
							<a href="/examples/physics.html">Particle Simulation</a>
							<li class="list-group-item">
								<a href="/examples/map.html">Map of History</a>
								<li class="list-group-item">
									<a href="/examples/music.html">Music Visualizer</a>
					</ul>
					
					<h6>Documentation</h6>
					<ul class="docs list-group">
						<li class="list-group-item"><a href="/documentation/start.html">Getting Started</a>
						<li class="list-group-item"><a href="/documentation/api.html">API Reference</a>
						<li class="list-group-item"><a href="/documentation/webgl.html">The Graphics Pipeline</a>
						<li class="list-group-item"><a href="/documentation/svg.html">SVG Differences</a>
						<li class="list-group-item"><a href="/documentation/gpgpu.html">GPGPU</a>
					</ul>
					<img class="t" src="data/test.png" style="display:none">
					<img class="l" src="data/leaves.jpg" style="display:none">
				</div>
			</div>
			
			<div class="right col-xs-12 col-sm-9">
				<div class="blurb"><!--blurb--></div>
				<canvas width="760" height="500"></canvas>
				<script src="js/mosaic.js"></script><p>Intake video stream and swap 50px tiles with images from imgur to create a realtime
video mosaic. 
</p><pre><code>
// d3.json('https://api.imgur.com/3/gallery/r/foodporn/top/1')
// .header("Authorization", 'Client-Id 9e7ab6a35eb2f7a')
// .header("Accept", 'application/json')
// .get(function (err, data) {
//   if (err) throw new Error(err)
//   else
//     init(data.data.filter(function(d) { return ! d.nsfw && d.type })
//          .map(function (d) { return d.link })
//         )
// })

var c = d3.select('canvas')
var width = c.attr('width')
  , height = c.attr('height')

var col = 30
  , s = ~~ (width / col)
  , row = ~~ (height / s)

var findAverageHue = 'vec4 accumulator (vec4 a, vec4 b) {'
                   + '  return vec4(a.x + b.x, 0, a.z, a.w);'
                   + '}'

var b =  pathgl.texture('.t')
var a = pathgl.texture('.l')

init()
function init(arr) {
  //arr.width = 1024
  //arr.rows = 8
  //tiles = pathgl.texture(getWebcam()).repeat()
  //tiles = pathgl.texture(arr)//.pipe(mozify)
  c.selectAll('rect').data(d3.range(col * row ))
  .enter().append('rect')
  .attr('x', function (d) { return s/2 + s * (d % col) })
  .attr('y', function (d) { return s/2 + s * ~~(d / col) })
  .attr('width', s )
  .attr('height', s)
  //.filter(function (d, i) { return (d % 30) < 15 })
  //.transition().delay(function (d) { return d * 10 })
  .attr('fill', function (d) { return d % 2 ? a : b })

  return
  var mozify = pathgl.shader().matchWith(findAverageHue)
  var webcam = pathgl.texture(getWebcam()).repeat().pipe(mozify)
  var mosaic = pathgl.texture()
  return mosaic
}

//var webcam = pathgl.texture(getWebcam()).repeat()

function getWebcam() {
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
  var video = d3.select('body').append('video')
              .attr('height', '1024').attr('width', 'auto')
              .attr('autoplay', true).attr('loopo', true)
              //.style('display', 'none')
              .node()

  navigator.getUserMedia({ video: true }, function(stream) {
    video.src = window.URL.createObjectURL(stream)
  }, function(error) {})

  var c = document.createElement('canvas').getContext('2d')
    , s = c.canvas.width = c.canvas.height = 1024

  return video
}
</code></pre>
			</div>
		</div>
	</div>
</body>