[ Launch: gif experiment xor circles BADGE ] 9614207 by enjalot
[ Launch: gif experiment xor circles ] 6418604 by enjalot
-
-
Save enjalot/9614207 to your computer and use it in GitHub Desktop.
gif experiment xor circles BADGE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"gif experiment xor circles BADGE","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":false,"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/KQdhvnI.gif","ajax-caching":true} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 = 3000 | |
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() | |
); | |
} | |
} | |
}; | |
var t = 0; | |
tributary.step = function() { | |
t+=0.12; | |
tributary.run(0, t); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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