rainbowtie, using colors from Nadieh’s block (all my dailies so far have used her colors…)
Built with blockbuilder.org
<!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 = num/5;
var opacity = 0.05;
var linewidth = 5;
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 //bl.ocks.org/nbremer/5cd07f2cb4ad202a9facfbd5d2bc842e
var colors = //["#2c7bb6", "#00a6ca","#00ccbc","#f9d057","#f29e2e","#e76818"];
["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"].reverse()
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 + (i/num * 300) + Math.random() * (100),
y2: 50 + (300 - i/num * 300) + Math.random() * 100,
color: colorArray[Math.floor(i/num * 8 + Math.random() * 2)]
}
})
console.log(data)
ctx.fillStyle = 'rgba(10,10,10,1)'
ctx.fillRect(0,0,width,height)
ctx.lineWidth = linewidth;
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;
ctx.clearRect(0,0,width,height)
ctx.fillStyle = 'rgba(10,10,10,1)'
ctx.fillRect(0,0,width,height)
} else {
frame += 1
now = +new Date()
}
var drawings = data.slice(frame * 5, frame * 5 + 5)
var d;
for(var k = 0; k < 5; k++) {
d = drawings[k];
// console.log("d",k, d.strokes.length)
ctx.strokeStyle = "rgba(" + d.color + "," + opacity +")"
ctx.beginPath();
ctx.moveTo(d.x1, d.y1);
ctx.lineTo(d.x2, d.y2);
ctx.stroke();
}
})
</script>
</body>