preziotte · August 29, 2015 14:05
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
    background-color: #36393B;
 }

 svg {
  position: absolute;
  height: 100%;
  width: 100%;
 }

 svg path {
  opacity: .3;
  fill: none;
  stroke: #EEE6AB;
  stroke-width: 1px;
  stroke-linecap: rounded;
 }

 </style>

 <script src="http://d3js.org/d3.v3.min.js"></script>

 <script>

 	function Icosahedron(scale,velocityX,velocityY) {

 		// http://bl.ocks.org/mbostock/7782500

 		this.velocityX = velocityX;
 		this.velocityY = velocityY;
 		this.width = window.innerWidth;
 		this.height = window.innerHeight;
 		this.t0 = Date.now();
 		console.log(this.width);
 		var projection = d3.geo.orthographic()
 		    .scale(this.height/scale)
 		    .translate([this.width/2, this.height/2])
 		    .center([0, 0]);

        	this.projection = projection;

 		this.svg = d3.select("body").append("svg")
 			  .attr("class", "isoco1")
 		    .attr("width", this.width)
 		    .attr("height", this.height);
 		 

 		this.face = this.svg.selectAll("path")
 			.data(icosahedronFaces)
 			.enter()
 			.append("path").attr("class", "isoco")
 			.each(function(d) { d.polygon = d3.geom.polygon(d.map(projection)); });

 		function icosahedronFaces(slide) {
 			var slide = slide || 180;
 			var faces = [],
 			y = Math.atan2(1, 2) * slide / Math.PI;
 			for (var x = 0; x < 360; x += 72) {
 				faces.push(
 					[[x +  0, -90], [x +  0,  -y], [x + 72,  -y]],
 					[[x + 36,   y], [x + 72,  -y], [x +  0,  -y]],
 					[[x + 36,   y], [x +  0,  -y], [x - 36,   y]],
 					[[x + 36,   y], [x - 36,   y], [x - 36,  90]]
 					);
 			}
 			return faces;
 		};

  	};	
 		
 	Icosahedron.prototype.redraw = function() {
  		var time = Date.now() - this.t0;
  		var projection = this.projection;

 		this.projection.rotate([time * this.velocityX, time * this.velocityY]);
 		this.face
 	    		.each(function(d) { d.forEach(function(p, i) { d.polygon[i] = projection(p); }); })
 	    		.style("display", function(d) { return d.polygon.area() > 0 ? null : "none"; })
 	    		.attr("d", function(d) { return "M" + d.polygon.join("L") + "Z"; })
 	};
 	
 	function init() {
 		d3.selectAll("svg").remove();
 		
 		var i1 = new Icosahedron(3,.014,.01);
 		var i2 = new Icosahedron(3.5,.02,-.02);
 		var i3 = new Icosahedron(4,-.01,.014);
 		var i4 = new Icosahedron(4.5,.01,.012);
 		var i5 = new Icosahedron(5,-.01,-.011);
 	
 		d3.timer(function() {
 	 		i1.redraw();
 	 		i2.redraw();
 	 		i3.redraw();
 	 		i4.redraw();
 	 		i5.redraw();
 		});
 	
 	};
 	
 	window.onresize = function(event) { init(); };
 </script>

 <body onload='init();'></body>

 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background-color: #36393B;
	}

	svg {
	position: absolute;
	height: 100%;
	width: 100%;
	}

	svg path {
	opacity: .3;
	fill: none;
	stroke: #EEE6AB;
	stroke-width: 1px;
	stroke-linecap: rounded;
	}

	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	function Icosahedron(scale,velocityX,velocityY) {

	// http://bl.ocks.org/mbostock/7782500

	this.velocityX = velocityX;
	this.velocityY = velocityY;
	this.width = window.innerWidth;
	this.height = window.innerHeight;
	this.t0 = Date.now();
	console.log(this.width);
	var projection = d3.geo.orthographic()
	.scale(this.height/scale)
	.translate([this.width/2, this.height/2])
	.center([0, 0]);

	this.projection = projection;

	this.svg = d3.select("body").append("svg")
	.attr("class", "isoco1")
	.attr("width", this.width)
	.attr("height", this.height);


	this.face = this.svg.selectAll("path")
	.data(icosahedronFaces)
	.enter()
	.append("path").attr("class", "isoco")
	.each(function(d) { d.polygon = d3.geom.polygon(d.map(projection)); });

	function icosahedronFaces(slide) {
	var slide = slide \|\| 180;
	var faces = [],
	y = Math.atan2(1, 2) * slide / Math.PI;
	for (var x = 0; x < 360; x += 72) {
	faces.push(
	[[x + 0, -90], [x + 0, -y], [x + 72, -y]],
	[[x + 36, y], [x + 72, -y], [x + 0, -y]],
	[[x + 36, y], [x + 0, -y], [x - 36, y]],
	[[x + 36, y], [x - 36, y], [x - 36, 90]]
	);
	}
	return faces;
	};

	};

	Icosahedron.prototype.redraw = function() {
	var time = Date.now() - this.t0;
	var projection = this.projection;

	this.projection.rotate([time * this.velocityX, time * this.velocityY]);
	this.face
	.each(function(d) { d.forEach(function(p, i) { d.polygon[i] = projection(p); }); })
	.style("display", function(d) { return d.polygon.area() > 0 ? null : "none"; })
	.attr("d", function(d) { return "M" + d.polygon.join("L") + "Z"; })
	};

	function init() {
	d3.selectAll("svg").remove();

	var i1 = new Icosahedron(3,.014,.01);
	var i2 = new Icosahedron(3.5,.02,-.02);
	var i3 = new Icosahedron(4,-.01,.014);
	var i4 = new Icosahedron(4.5,.01,.012);
	var i5 = new Icosahedron(5,-.01,-.011);

	d3.timer(function() {
	i1.redraw();
	i2.redraw();
	i3.redraw();
	i4.redraw();
	i5.redraw();
	});

	};

	window.onresize = function(event) { init(); };
	</script>

	<body onload='init();'></body>

	</html>