zZz

_.md

[ Launch: zZz ] 2ad3b9a515bbe5e0cd75 by enjalot

config.json

{"description":"zZz","endpoint":"","display":"div","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":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/j0hQn9o.png"}

inlet.js

var display = d3.select("#display");
var box = display.append("div").classed("box", true);

tributary.paused = true; //need to maintain paused state on the tributary object
// so that it persists between edits (we dont want runaway requestAnimationFrame loops)

box.on("click", function() {
  tributary.paused = !tributary.paused;
  if(!tributary.paused) {
    update();
  }
})

var num = 6;
var zs = d3.range(num).map(function(d,i) {
  return {
    amplitude: 2 + 5 * Math.random(),
    freq: 1 + 2 * Math.random(),
    x: 100 * i/num,
    i: 100*i/num + 10 - Math.random() * 20,
    first: true //save state
  }
})

var zdivs = box.selectAll("div.z")
.data(zs)
.enter()
.append("div")
.classed("z", true)
.style("display", "none")
.text("z")


var THETA = Math.PI*2/100;
var yscale = d3.scale.linear()
.domain([0, 100])
.range([90,-20])
var i = 0;
function update() {
  if(tributary.paused) return; // end the loop
  
  i++;
  //if(i > 100) i = 0;
  
  
  zdivs.style({
    transform: function(d) {
      d.i++;
      if(d.i > 100) {
        if(d.first) { //this shouldn't need a check every time.
          d.first = false;
          d3.select(this).style("display", "");
        }
        d.i = 0; //reset our y counter
        d.x = 10 + Math.random() * 70; //randomize x position
      }
      var x = d.x + d.amplitude*Math.sin(d.i*THETA*d.freq);
      var y = yscale(d.i);
      
      return "translate(" + [x + "px", y +"px"] + ")"
    }
  })
  
  
  console.log(i);
  requestAnimationFrame(update);
}

style.css

.box {
  width: 100px;
  height: 100px;
  background-color: rgb(0, 161, 220);
  margin: 100px;
  position:relative;
  overflow:hidden;
}
.z {
  color: white;
  position:absolute;
}