Skip to content

Instantly share code, notes, and snippets.

@bollig
Created September 3, 2013 01:38
Show Gist options
  • Save bollig/6418811 to your computer and use it in GitHub Desktop.
Save bollig/6418811 to your computer and use it in GitHub Desktop.
gif experiment xor circles
{"description":"gif experiment xor circles","endpoint":"","display":"canvas","public":true,"require":[{"name":"gif.js","url":"http://jnordberg.github.io/gif.js/gif.js"}],"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},"ui.js":{"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/D9r9RQV.png"}
/*
experiment with making gifs
http://jnordberg.github.io/gif.js
*/
//for @zeffii by @gelicia: http://tributary.io/inlet/6384402
//http://beesandbombs.tumblr.com/post/58615106167
d3.select("body").style("background-color", d3.rgb(25, 25, 25));
var context = tributary.ctx;
tributary.loop_type = "pingpong";
tributary.duration = 1000
context.globalCompositeOperation = "xor";
var offset = 0;
var radius = 15;
var radiusAdd = 34;
var spacing = 50;
var numRowsH = tributary.sh / (spacing-radius);
var numRowsW = tributary.sw / (spacing-radius);
var colorScale = d3.scale.linear()
.interpolate(d3.interpolateHsl)
.domain([0, 1])
.range(["#531717", "#2D2D80"]);
function circle(x, y, r, fillstyle){
context.beginPath();
context.arc(x, y, r, 0, 2.0*Math.PI, false);
context.fillStyle = fillstyle;
context.fill();
}
tributary.run = function(unused, t){
//thanks @slembcke :D
var easedT = t*t*(3 - 2*t);
context.clearRect(0, 0, tributary.sw, tributary.sh);
for (var i = 0; i < numRowsW; i++) {
for (var j = 0; j < numRowsH; j++) {
circle(
((spacing-7) * i) + offset,
(spacing * j) + (i % 2 === 0 ? spacing/2 : 0) + offset,
(radiusAdd * easedT) + radius,
colorScale(easedT).toString()
);
}
}
};
//experimental ui for recording the gif and showing it
var controls = d3.select(".time_controls")
var gifbutton = controls.selectAll("#gif")
gifbutton
.data([0]).enter()
.append("button").attr("id", "gif").text("gif")
gifbutton.on("click", function() {
tributary.pause = true;
var gif = new GIF({
workers: 2,
quality: 20,
width: 500,
height: 500,
workerScript: "/static/lib/gif.worker.js"
});
//record button
var n = 10;
var delay = tributary.duration / n;
//make n frames
d3.range(2*n).forEach(function(i) {
var j = i;
if(i >= n) i = 2*n-i;
if(tributary.init)
tributary.init(tributary.ctx, j);
//tributary.run(i/tributary.nclones, frame, i);
var t = tributary.ease(i/(n-1));
console.log("T", i,t, delay)
setTimeout(function() {
tributary.run(tributary.ctx, t, i);
console.log("adding")
gif.addFrame(tributary.canvas, {delay:delay, copy:true});
if(j == 2*n-1) {
console.log("render")
gif.render();
}
}, 100 * j)
});
gif.on('finished', function(blob) {
console.log("done");
window.open(URL.createObjectURL(blob));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment