square pulse

_.md

[ Launch: square pulse ] 6258205 by enjalot
[ Launch: square pulse ] 6258175 by enjalot

config.json

{"description":"square pulse","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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":false,"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/ZGMRWKH.png"}

inlet.js

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

var stroke = 28;
var maxstroke = 200;
var diff = stroke;

var width = 300;
var cx = tributary.sw / 2 - width/2;
var cy = tributary.sh / 2 - width/2;

var data = d3.range(10).map(function(i) {
  return {
    width: 300 + i * 20
  }
})


tributary.init = function(g) {
  g.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .style({
    fill: "#8F81DB",
    stroke: "#33899E",
    "stroke-opacity": 0.1,
    "fill-opacity": 0.3
  })
}

tributary.run = function(g,t) {
  stroke = (1.02 + Math.sin(t))/2 * maxstroke
  var x = cx - stroke/2;
  var y = cy - stroke/2;
  var w = width + stroke;
  
  g.selectAll("rect")
  .attr({
    x: function(d) { return -tributary.sw/2 + d.width + stroke },
    y: function(d) { return -tributary.sw/2 + d.width + stroke },
    width: function(d) { return d.width + stroke },
    height: function(d) { return d.width + stroke },
    "stroke-width": stroke
  })
}

/*
svg.append("rect")
.attr({
  x: x + diff/2,
  y: y - 40 + diff/2,
  width: width,
  height: 20,
  fill: "#fff"
})
*/