pi man 2

_.md

[ Launch: pi man 2 ] 9680678 by enjalot
[ Launch: pi man ] 6473599 by enjalot
[ Launch: pi man ] 5942016 by enjalot

config.json

{"description":"pi man 2","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/1Neqjif.gif","ajax-caching":true}

inlet.js

var svg = d3.select("svg");

var n = 100;
var theta = 6 * Math.PI/4;

var hatSize = tributary.sw/15;
var legLength = tributary.sh/2;
var armLength = tributary.sw/2;

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)
  .style({
    fill: "none",
    stroke: "#000000"
  })
  vis.append("line").classed("left-leg", true)
  .style({
    fill: "none",
    stroke: "#000000"
  })
  vis.append("line").classed("right-leg", true)
  .style({
    fill: "none",
    stroke: "#000000"
  })
  vis.append("circle").classed("head", true)
  .style({
    fill: "none",
    stroke: "#000000"
  })
  //vis.selectAll("path,line,circle").style("stroke-width", 3);
}

tributary.run = function(g, t, cloneIndex) {
  var vis = g.select(".piman", true)
  vis.attr("transform", "translate(" + [tributary.sw/4, tributary.sh/4] + ")");
  
  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
  })
}

style.css

#display {
  background-color: white;
}

path, line, circle {
  stroke-width:27;
  stroke: red;
}