Popular Delaunay animation
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<header><canvas width="200" height="200"></canvas></header>
CSS
body {
margin: 0;
}
header {
background-color: black;
width: 100%;
height: 100%;
}
JavaScript
;(function($, $$, d3) {
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
/*rect.top >= 0 &&*/
rect.left >= 0 &&
rect.bottom > 0 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
var width = 200,
height = 200,
mouseover = false,
animation,
canvas = $.querySelector('canvas'),
vertices;
d3.select("canvas")
.on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); })
.on("mouseenter", function() { mouseover = true; console.log(mouseover); })
.on("mouseleave", function() { mouseover = false; console.log(mouseover); });
var context = canvas.getContext('2d');
function tuTriResize() {
width = $.querySelector('header').offsetWidth;
$.querySelector('canvas').style.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + 'px';
height = $.querySelector('header').offsetHeight;
d3.select("canvas").attr("width", width).attr("height", height);
makeVerts();
}
// Resize listener
$$.addEventListener('resize', tuTriResize, false);
tuTriResize();
function checkAnim() {
if(!isElementInViewport($.querySelector("header"))) {
clearInterval(animation);
animation = null;
} else if(animation === null) {
animation = setInterval(setAnim, 1000/60);
}
}
//Scroll listener
$$.addEventListener('scroll', checkAnim, false);
function makeVerts() {
vertices = d3.range(150).map(function(d) {
return [Math.random() * width, Math.random() * height];
});
var gutter = 60;
vertices.push([-gutter, -gutter]);
vertices.push([width+gutter, -gutter]);
vertices.push([-gutter, height+gutter]);
vertices.push([width+gutter, height+gutter]);
}
var moves = [];
for(var i=0; i < vertices.length; i++) {
moves[i] = [Math.random(), Math.random(), 0, 0];
}
redraw();
function redraw() {
context.clearRect(0, 0, $.querySelector('canvas').width, $.querySelector('canvas').height);
path =...