Skip to content

Instantly share code, notes, and snippets.

@paulsmith paulsmith/README.md
Created Dec 20, 2012

Embed
What would you like to do?
Pizza!

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

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.