psi man

_.md

[ Launch: pi man ] 5942244 by nsonnad
[ Launch: pi man ] 5942016 by enjalot

config.json

{"description":"psi 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}

inlet.js

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

var n = 100;
var theta = 1.5 * Math.PI;

var hatSize = 45;
var legLength = 300;
var armLength = 400;

tributary.duration = 500

var psi = "m177.54315,43.46249c3.38432,-0.33043 0.4839,0.05709 4.8049,-0.55191c4.321,-0.60899 10.81694,-1.14928 14.69994,-5.03218c3.88301,-3.883 4.992,-10.1696 4.992,-14.0525c0,-1.9414 0.021,-7.1596 0.021,-9.8875c0,-1.6662 0.29401,-4.63277 2.55501,-4.63277c1.125,0 2.879,0.00561 2.879,0.00561l0,-1.94146c0,0 -2.40401,-0.09245 -3.883,-0.09245c-1.479,0 -5.039,0.23113 -6.841,2.03391c-1.80301,1.80276 -2.959,6.74886 -2.959,15.25426c0,8.5054 -0.739,10.8167 -2.866,12.9431c-3.19,3.1898 -10.106,3.3046 -10.106,3.3046c-4.651,0.5353 -8.073,0.116 -8.073,0.116c0,0 -6.888,-0.2308 -10.07701,-3.4206c-2.127,-2.1264 -2.866,-4.4377 -2.866,-12.9431c0,-8.5054 -1.15599,-13.4515 -2.959,-15.25426c-1.80299,-1.80278 -5.362,-2.03391 -6.841,-2.03391c-1.47899,0 -3.883,0.09245 -3.883,0.09245l0,1.94146c0,0 1.754,-0.00561 2.87801,-0.00561c2.26199,0 2.556,2.96657 2.556,4.63277c0,2.7279 0.01999,7.9461 0.01999,9.8875c0,3.8829 1.11,10.1695 4.99301,14.0525c3.883,3.8829 16.179,5.1772 16.179,5.1772c0,0 3.33499,0.3954 1.972,0.2633l2.80415,0.14359z"
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])

tributary.init = function(g, t, cloneIndex) {
  var vis = g.append("g")
  .classed("piman", true)
  
  vis.append("path").classed("psi", true)
  vis.append("line").classed("left-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] + ")");
  
  vis.select("path.psi")
    .attr('transform', 'scale(3) translate(' + (-110) + ',0) skewX(' + 18*t + ')')
    .attr("d", psi)
  
  var lx = n/2;
  var ly = 0.5 * Math.sin(t + theta * n/2/n);
  vis.select("line.left-leg")
  .attr({
    x1: xscale(lx),
    y1: yscale(ly) - hatSize,
    x2: xscale(lx),
    y2: legLength
  })
  
  var cx = n/2;
  var cy = 0.5 * Math.sin((t) + theta * cx/n)
  vis.select("circle.head")
  .attr({
    cx: xscale(n/2),
    cy: yscale(cy) - hatSize*2,
    r: hatSize
  })
}

style.css

.piman {
}

path.psi {
  fill: ;
  stroke: #000000;
  stroke-width: 1px;
}

line.left-leg, line.right-leg {
  stroke: #000000;
  stroke-width: 8px;
}

circle.head {
  fill: none;
  stroke: #000000;
  stroke-width: 5px;
}