Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3-timer.v1.min.js"></script> | |
<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 width="960" height="800"></canvas> | |
<script> | |
var length = 100; | |
var color = d3.scaleLinear().domain([1,length]) | |
.interpolate(d3.interpolateHcl) | |
.range([d3.rgb("#00f946"), d3.rgb('#9500d1')]); | |
var canvas = document.querySelector("canvas"), | |
context = canvas.getContext("2d"), | |
width = canvas.width, | |
height = canvas.height, | |
minRadius = 2.5, | |
maxRadius = 5, | |
minDistance = 80, | |
maxDistance = 100, | |
minDistance2 = minDistance * minDistance, | |
maxDistance2 = maxDistance * maxDistance; | |
var tau = 2 * Math.PI, | |
n = 100, | |
particles = new Array(n); | |
for (var i = 0; i < n; ++i) { | |
particles[i] = { | |
x: width * Math.random(), | |
y0: height * Math.random(), | |
v: 0.1 * (Math.random() - 0.5), | |
r: minRadius + Math.random() * (maxRadius), | |
c: color(Math.floor(Math.random()*100)) | |
}; | |
} | |
d3.timer(function(elapsed) { | |
context.clearRect(0, 0, width, height); | |
for (var i = 0; i < n; ++i) { | |
for (var j = i + 1; j < n; ++j) { | |
var pi = particles[i], | |
pj = particles[j], | |
dx = pi.x - pj.x, | |
dy = pi.y - pj.y, | |
d2 = dx * dx + dy * dy; | |
if (d2 < maxDistance2) { | |
context.globalAlpha = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1; | |
context.beginPath(); | |
context.moveTo(pi.x, pi.y); | |
context.lineTo(pj.x, pj.y); | |
context.stroke(); | |
} | |
} | |
} | |
context.globalAlpha = 1; | |
for (var i = 0; i < n; ++i) { | |
var p = particles[i]; | |
p.y = p.y0 + elapsed * p.v; | |
if (p.y > height + maxDistance) p.x = width * Math.random(), p.y0 -= height + 2 * maxDistance; | |
else if (p.y < -maxDistance) p.x = width * Math.random(), p.y0 += height + 2 * maxDistance; | |
context.beginPath(); | |
context.arc(p.x, p.y, p.r, 0, tau); | |
context.fillStyle = p.c; | |
context.fill(); | |
} | |
}); | |
</script> | |
</body> |