Prinzhorn/index.html

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

<body>
<svg width="500" height="500">
	<clipPath id="clippy1"></clipPath>
	<clipPath id="clippy2"></clipPath>
	<clipPath id="clippy3"></clipPath>
	<clipPath id="clippy4"></clipPath>
	<clipPath id="clippy5"></clipPath>
	<clipPath id="clippy6"></clipPath>

	<image clip-path="url(#clippy1)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-braun__0176534_PE329336_S4.JPG"></image>
	<image clip-path="url(#clippy2)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-beige__0176536_PE329337_S4.JPG"></image>
	<image clip-path="url(#clippy3)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grau__0176538_PE329338_S4.JPG"></image>
	<image clip-path="url(#clippy4)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-wei-__0176543_PE329340_S4.JPG"></image>
	<image clip-path="url(#clippy5)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grun__0185128_PE336924_S4.JPG"></image>
	<image clip-path="url(#clippy6)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-schwarz__0185121_PE336926_S4.JPG"></image>
</svg>

<p><small>Images straight from <a href="http://www.ikea.com/de/de/catalog/products/90245060/">http://www.ikea.com/de/de/catalog/products/90245060/</a></small></p>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var NUM_IMAGES = 6;

var activeIndex = 0;
var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
var quarter = tau / 4;
var smallPie = (quarter / (NUM_IMAGES - 1));

var getStartAngle = function(index) {
	var angle = (quarter / (NUM_IMAGES - 1)) * index;

	if(index > activeIndex) {
		angle = angle + 3 * quarter;
	}

	return angle;
};

var getEndAngle = function(index) {
	if(index === NUM_IMAGES - 1) {
		return tau;
	}

	return getStartAngle((index + 1) % NUM_IMAGES);
};

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arcs = d3.range(NUM_IMAGES).map(function(index) {
	return d3.arc()
		.innerRadius(0)
		.outerRadius(500);
});

var paths = d3.range(NUM_IMAGES).map(function(index) {
	return d3.select("#clippy" + (index + 1)).append("path")
		.datum({
			startAngle: getStartAngle(index),
			endAngle: getEndAngle(index)
		})
		.style("fill", "black")
		.attr("transform", "translate(250, 250)")
		.attr("d", arcs[index])
});

d3.interval(function() {
	activeIndex = (activeIndex + 1) % paths.length;

	paths.forEach(function(path, index) {
		path.transition()
			.duration(1000)
			.attrTween("d", arcTween(index));
	})
}, 2000);


function arcTween(index) {
	return function(d) {
		var interpolateStart = d3.interpolate(d.startAngle, getStartAngle(index));
		var interpolateEnd = d3.interpolate(d.endAngle, getEndAngle(index));

		return function(t) {
			d.startAngle = interpolateStart(t);
			d.endAngle = interpolateEnd(t);

			return arcs[index](d);
		};
	};
}

</script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<svg width="500" height="500">
	<clipPath id="clippy1"></clipPath>
	<clipPath id="clippy2"></clipPath>
	<clipPath id="clippy3"></clipPath>
	<clipPath id="clippy4"></clipPath>
	<clipPath id="clippy5"></clipPath>
	<clipPath id="clippy6"></clipPath>

	<image clip-path="url(#clippy1)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-braun__0176534_PE329336_S4.JPG"></image>
	<image clip-path="url(#clippy2)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-beige__0176536_PE329337_S4.JPG"></image>
	<image clip-path="url(#clippy3)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grau__0176538_PE329338_S4.JPG"></image>
	<image clip-path="url(#clippy4)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-wei-__0176543_PE329340_S4.JPG"></image>
	<image clip-path="url(#clippy5)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grun__0185128_PE336924_S4.JPG"></image>
	<image clip-path="url(#clippy6)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-schwarz__0185121_PE336926_S4.JPG"></image>
	</svg>

	<p><small>Images straight from <a href="http://www.ikea.com/de/de/catalog/products/90245060/">http://www.ikea.com/de/de/catalog/products/90245060/</a></small></p>

	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var NUM_IMAGES = 6;

	var activeIndex = 0;
	var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
	var quarter = tau / 4;
	var smallPie = (quarter / (NUM_IMAGES - 1));

	var getStartAngle = function(index) {
	var angle = (quarter / (NUM_IMAGES - 1)) * index;

	if(index > activeIndex) {
	angle = angle + 3 * quarter;
	}

	return angle;
	};

	var getEndAngle = function(index) {
	if(index === NUM_IMAGES - 1) {
	return tau;
	}

	return getStartAngle((index + 1) % NUM_IMAGES);
	};

	// An arc function with all values bound except the endAngle. So, to compute an
	// SVG path string for a given angle, we pass an object with an endAngle
	// property to the `arc` function, and it will return the corresponding string.
	var arcs = d3.range(NUM_IMAGES).map(function(index) {
	return d3.arc()
	.innerRadius(0)
	.outerRadius(500);
	});

	var paths = d3.range(NUM_IMAGES).map(function(index) {
	return d3.select("#clippy" + (index + 1)).append("path")
	.datum({
	startAngle: getStartAngle(index),
	endAngle: getEndAngle(index)
	})
	.style("fill", "black")
	.attr("transform", "translate(250, 250)")
	.attr("d", arcs[index])
	});

	d3.interval(function() {
	activeIndex = (activeIndex + 1) % paths.length;

	paths.forEach(function(path, index) {
	path.transition()
	.duration(1000)
	.attrTween("d", arcTween(index));
	})
	}, 2000);


	function arcTween(index) {
	return function(d) {
	var interpolateStart = d3.interpolate(d.startAngle, getStartAngle(index));
	var interpolateEnd = d3.interpolate(d.endAngle, getEndAngle(index));

	return function(t) {
	d.startAngle = interpolateStart(t);
	d.endAngle = interpolateEnd(t);

	return arcs[index](d);
	};
	};
	}

	</script>
	</body>