playing with animating in a way that would be friendly to export as video frames. learned a lot from veltman's d3-unconf workshop!
Built with blockbuilder.org
Last active
December 19, 2017 01:38
-
-
Save enjalot/f6b0c3a19ce5e63b8cf8f28a291edc6c to your computer and use it in GitHub Desktop.
thing 0007
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
| license: mit |
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
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas></canvas> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var num = 5000; | |
| var frames = 120; | |
| var canvas = d3.select("canvas").node() | |
| canvas.width = width; | |
| canvas.height = height; | |
| ctx = canvas.getContext("2d") | |
| ctx.globalCompositeOperation = "soft-light" | |
| // colors stolen from Nadieh's block http://bl.ocks.org/nbremer/5cd07f2cb4ad202a9facfbd5d2bc842e | |
| var colors = ["#2c7bb6", "#00a6ca","#00ccbc"/*,"#f9d057","#f29e2e","#e76818"*/]; | |
| var colorArray = colors.map(function(c) { | |
| var rgb = d3.rgb(c) | |
| return [rgb.r, rgb.g, rgb.b] | |
| }) | |
| var data = d3.range(num).map(function(i) { | |
| return { | |
| x1: 50, | |
| x2: 910, | |
| y1: 50 + Math.random() * 400, | |
| y2: 50 + Math.random() * 400, | |
| color: colorArray[Math.floor(Math.random() * colorArray.length)] | |
| } | |
| }) | |
| ctx.fillStyle = 'rgba(10,10,10,1)' | |
| ctx.fillRect(0,0,width,height) | |
| function setStroke(op) { | |
| // ctx.strokeStyle = "rgba(250,250,250," + op + ")"; | |
| ctx.strokeStyle = "rgba(20,20,20," + op + ")"; | |
| } | |
| ctx.lineWidth = 1; | |
| var frame = 0; | |
| var now = +new Date(); | |
| d3.timer(function(elapsed) { | |
| var diff = +new Date() - now; | |
| if(frame >= frames - 1) { | |
| if(diff < 2500) return; | |
| frame = 0; | |
| } else if(diff > 50) { | |
| frame += 1 | |
| now = +new Date() | |
| } | |
| ctx.clearRect(0,0,width,height) | |
| // ctx.fillStyle = 'rgba(10,10,10,1)' | |
| ctx.fillRect(0,0,width,height) | |
| var interp = d3.easePolyIn.exponent(3)(frame/frames) | |
| var i = 1 + Math.floor(interp * data.length) | |
| // console.log("frame", frame, i) | |
| var fastf = frame/frames * 1.5 | |
| if(fastf > 1) fastf = 1; | |
| //var opinterp = d3.easePolyIn.exponent(1.05)(fastf) | |
| var opinterp = fastf | |
| var op = (1 - opinterp) * 0.575 + 0.4 | |
| // setStroke(op) | |
| var drawings = data.slice(0, i) | |
| var d; | |
| for(var k = 0; k < i; k++) { | |
| d = drawings[k] | |
| // console.log("d",k, d.strokes.length) | |
| ctx.strokeStyle = "rgba(" + d.color + "," + op +")" | |
| ctx.beginPath(); | |
| ctx.moveTo(d.x1, d.y1); | |
| ctx.lineTo(d.x2, d.y2); | |
| ctx.stroke(); | |
| } | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment