paulsmith/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Pizza, with generative log spiral pepperoni layout! Made with D3.js.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pizza!</title>
<style>
.dough {
    fill: #E7AF37;
}
.sauce {
    fill: #BD3A2B;
}
.pepperoni {
    fill: #8C140F;
    stroke: #7C0400;
    stroke-width: 3;
}
.cheese {
    fill: #E9C288;
}
.slice {
    fill: none;
    stroke: black;
    stroke-width: 1;
    stroke-opacity: 0.2;
}
</style>
<script src="//d3js.org/d3.v3.js"></script>
</head>
<body>

<script>

var width = 480,
    height = width,
    pepperonis = 80,
    slices = 8;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("class", "dough")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+")");

svg.append("circle")
    .attr("class", "sauce")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+") scale(0.9)");

svg.append("circle")
    .attr("class", "cheese")
    .attr("r", width/2)
    .attr("transform", "translate("+width/2+","+height/2+") scale(0.875)");

var angle = d3.scale.linear()
    .domain([0, slices])
    .range([0, 360]);

svg.selectAll(".slice")
    .data(d3.range(slices))
  .enter().append("g")
    .attr("class", "slice")
    .attr("transform", function(d) { return "translate("+width/2+","+height/2+") rotate(" + -angle(d) + ")"; })
    .append("line")
    .attr("x1", 0)
    .attr("x2", 0)
    .attr("y1", 0)
    .attr("y2", width/2)

// Log spiral
function Θ(r) {
    return (1/Θ.a) * Math.log(r+1/Θ.b);
};

// Constants for log spiral function
Θ.a = .045;
Θ.b = .9;

var r = d3.scale.linear()
    .domain([0, 2])
    .range([0, d3.min([width, height])/2-40]);

var c = d3.scale.linear()
    .domain([0, pepperonis])
    .range([0, 2]);

function spiralX(d) {
    return r(c(d)) * Math.cos(Θ(r(c(d))));
}

function spiralY(d) {
    return r(c(d)) * Math.sin(Θ(r(c(d))));
}

function update() {
    var pepperoni = svg.selectAll(".pepperoni")
        .data(d3.range(pepperonis));

    pepperoni
      .enter().append("circle")
        .attr("class", "pepperoni")
        .attr("r", 16);

    pepperoni
        .attr("cx", spiralX)
        .attr("cy", spiralY)
        .attr("transform", "translate("+width/2+","+height/2+")");

    pepperoni
      .exit().remove();
}

var oscillate = d3.scale.linear()
    .domain([-1, 1])
    .rangeRound([0, pepperonis]);

update();

var i = 0;
setInterval(function() {
    pepperonis = oscillate(Math.sin(i++/Math.PI));
    update();
}, 166);

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Pizza!</title>
	<style>
	.dough {
	fill: #E7AF37;
	}
	.sauce {
	fill: #BD3A2B;
	}
	.pepperoni {
	fill: #8C140F;
	stroke: #7C0400;
	stroke-width: 3;
	}
	.cheese {
	fill: #E9C288;
	}
	.slice {
	fill: none;
	stroke: black;
	stroke-width: 1;
	stroke-opacity: 0.2;
	}
	</style>
	<script src="//d3js.org/d3.v3.js"></script>
	</head>
	<body>

	<script>

	var width = 480,
	height = width,
	pepperonis = 80,
	slices = 8;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("circle")
	.attr("class", "dough")
	.attr("r", width/2)
	.attr("transform", "translate("+width/2+","+height/2+")");

	svg.append("circle")
	.attr("class", "sauce")
	.attr("r", width/2)
	.attr("transform", "translate("+width/2+","+height/2+") scale(0.9)");

	svg.append("circle")
	.attr("class", "cheese")
	.attr("r", width/2)
	.attr("transform", "translate("+width/2+","+height/2+") scale(0.875)");

	var angle = d3.scale.linear()
	.domain([0, slices])
	.range([0, 360]);

	svg.selectAll(".slice")
	.data(d3.range(slices))
	.enter().append("g")
	.attr("class", "slice")
	.attr("transform", function(d) { return "translate("+width/2+","+height/2+") rotate(" + -angle(d) + ")"; })
	.append("line")
	.attr("x1", 0)
	.attr("x2", 0)
	.attr("y1", 0)
	.attr("y2", width/2)

	// Log spiral
	function Θ(r) {
	return (1/Θ.a) * Math.log(r+1/Θ.b);
	};

	// Constants for log spiral function
	Θ.a = .045;
	Θ.b = .9;

	var r = d3.scale.linear()
	.domain([0, 2])
	.range([0, d3.min([width, height])/2-40]);

	var c = d3.scale.linear()
	.domain([0, pepperonis])
	.range([0, 2]);

	function spiralX(d) {
	return r(c(d)) * Math.cos(Θ(r(c(d))));
	}

	function spiralY(d) {
	return r(c(d)) * Math.sin(Θ(r(c(d))));
	}

	function update() {
	var pepperoni = svg.selectAll(".pepperoni")
	.data(d3.range(pepperonis));

	pepperoni
	.enter().append("circle")
	.attr("class", "pepperoni")
	.attr("r", 16);

	pepperoni
	.attr("cx", spiralX)
	.attr("cy", spiralY)
	.attr("transform", "translate("+width/2+","+height/2+")");

	pepperoni
	.exit().remove();
	}

	var oscillate = d3.scale.linear()
	.domain([-1, 1])
	.rangeRound([0, pepperonis]);

	update();

	var i = 0;
	setInterval(function() {
	pepperonis = oscillate(Math.sin(i++/Math.PI));
	update();
	}, 166);

	</script>

	</body>
	</html>