Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created July 7, 2013 02:23
Show Gist options
  • Save enjalot/5942016 to your computer and use it in GitHub Desktop.
Save enjalot/5942016 to your computer and use it in GitHub Desktop.
pi man
{"description":"pi man","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ojikUvB.png"}
var svg = d3.select("svg");
var n = 100;
var theta = 6 * Math.PI/4;
var hatSize = 45;
var legLength = 300;
var armLength = 400;
tributary.loop_type = "pingpong" //"off", "period"
var xscale = d3.scale.linear()
.domain([0, n])
.range([0, armLength])
var yscale = d3.scale.linear()
.domain([-1, 1])
.range([100, 0])
var path = d3.svg.line()
.x(function(d,i) { return xscale(d.x) })
.y(function(d,i) { return yscale(d.y) })
tributary.init = function(g, t, cloneIndex) {
var vis = g.append("g")
.classed("piman", true)
vis.append("path").classed("arms", true)
vis.append("line").classed("left-leg", true)
vis.append("line").classed("right-leg", true)
vis.append("circle").classed("head", true);
}
tributary.run = function(g, t, cloneIndex) {
var vis = g.select(".piman", true)
vis.attr("transform", "translate(" + [100, 165] + ")");
var y = function(x) {
}
var data = d3.range(n).map(function(d,i) {
var o = (theta * t) + theta * d/n;
var y = Math.sin(o);
return {
x: i, y:y
}
})
vis.select("path.arms")
.data([data])
.attr("d", path)
var lx = n/3;
var ly = Math.sin((theta * t) + theta * lx/n)
vis.select("line.left-leg")
.attr({
x1: xscale(lx),
y1: yscale(ly),
x2: xscale(lx),
y2: legLength
})
var rx = 2*n/3
var ry = Math.sin((theta * t) + theta * rx/n)
vis.select("line.right-leg")
.attr({
x1: xscale(rx),
y1: yscale(ry),
x2: xscale(rx),
y2: legLength
})
var cx = n/2;
var cy = 0.5 * Math.sin((theta * t) + theta * cx/n)
vis.select("circle.head")
.attr({
cx: xscale(n/2),
cy: yscale(cy) - hatSize*2,
r: hatSize
})
}
.piman {
}
path.arms {
fill: none;
stroke: #000000;
}
line.left-leg, line.right-leg {
stroke: #000000;
}
circle.head {
fill: none;
stroke: #000000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment