Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active August 29, 2015 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enjalot/2ad3b9a515bbe5e0cd75 to your computer and use it in GitHub Desktop.
Save enjalot/2ad3b9a515bbe5e0cd75 to your computer and use it in GitHub Desktop.
zZz
{"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"}
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);
}
.box {
width: 100px;
height: 100px;
background-color: rgb(0, 161, 220);
margin: 100px;
position:relative;
overflow:hidden;
}
.z {
color: white;
position:absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment