those waves

_.md

[ Launch: those waves ] 6473587 by enjalot
[ Launch: those waves ] 6052049 by enjalot
[ Launch: those waves ] 6051938 by enjalot
[ Launch: those waves ] 6051931 by enjalot
[ Launch: those waves ] 6051923 by enjalot
[ Launch: those waves ] 6051919 by enjalot
[ Launch: those waves ] 6051825 by enjalot
[ Launch: those waves ] 6051808 by enjalot
[ Launch: those waves ] 6051794 by enjalot

config.json

{"description":"those waves","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/jwIXSok.gif"}

inlet.js

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

var yspace = 19;

tributary.loop_type = "pingpong"

var pi = Math.PI;

var num = 36;
var points = 50;

var waves = [];
d3.range(num).map(function(i) {
  var wave = d3.range(points).map(function(p) {
    var x = p;
    var y = 0;
    var n = points * (0.1584 + 0.072 *(Math.sin(0.330624*i) + 1)/2.32 + 0.1695744*i/num);
    var m = points * (tributary.anim(0, 0.5849088) + -0.420901632 *(0.52*Math.cos(0.802944*i) + 1)/2 + 0.423936*i/num);
    if(m >= points) m = points-2;
    console.log(m)
    
    if(x < n) {
      y = 0;
    } else if (x >= m) {
      y = 0;
    } else {
      y = (Math.sin(pi + x) + 1.284096) * tributary.anim(1, 2) * (Math.sin(tributary.anim(10, Math.PI)*p/points) + 5.84);
    }
    return {x: x, y: y}
  })
  waves.push(wave)
})

var xscale = d3.scale.linear()
.domain([0, points])
.range([50, tributary.sw - 50])

var yscale = d3.scale.linear()
.domain([0, 12])
.range([17,0])

var line = d3.svg.line()
.x(function(d,i) {
  return xscale(d.x);
})
.y(function(d,i) {
  return yscale(d.y);
})
.interpolate("basis")
svg.append("rect").attr({
  width: "100%",
  height: "100%"
})

svg.selectAll("path.wave")
.data(waves)
.enter()
.append("path")
.classed("wave", true)
.attr("d", line)
.attr("transform", function(d,i) { 
  return "translate(" + [0, 3.208 + yspace * i] + ")" 
})
.style({
  fill: "#ffffff",
  "fill-opacity": 0.991936512,
  stroke: "#ACA7A7",
  "stroke-width": 3
})

style.css

{}