homepage: https://aydos.com/wormhole/
wormhole
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var svg = d3.select("svg") | |
var sw = +svg.attr("width") | |
var sh = +svg.attr("height") | |
var cx = sw / 2 // center x | |
var cy = sh / 2 // center y | |
var cs = [] // circles | |
var numc = 0 // number of circles | |
var dr = 12 // delta r | |
var minr = 12 // min r | |
var maxr = Math.sqrt(cx*cx+cy*cy) | |
var ind = 0 // color indice | |
var loop1dur = 80 | |
var loop2dur = 2400 | |
var color = d3.scale.category20b() | |
// creating circles | |
for (var r=minr; r<maxr+dr; r+=dr) { | |
cs[numc] = svg.append("circle") | |
.attr("cx", cx) | |
.attr("cy", cy) | |
.attr("r", r+6*dr) | |
.style("fill", "none") | |
.style("stroke-width", 12*dr) | |
numc++ | |
} | |
var log = d3.scale.log().domain([numc,1]) | |
// change color | |
function loop1() { | |
for (var i=0; i<numc; i++) { | |
cs[i].style("stroke", color(ind - i)) | |
} | |
cs[0].style("fill", color(ind)) | |
ind++ | |
setTimeout(loop1, loop1dur) | |
} | |
// change end of hole position | |
function loop2() { | |
var lx = Math.floor(Math.random()*sw) | |
var ly = Math.floor(Math.random()*sh) | |
cs[0].transition().ease("linear") | |
.duration(loop2dur) | |
.attr("cx", lx ) | |
.attr("cy", ly ) | |
for (var i=1; i<numc; i++) { | |
cs[i].transition() | |
.duration(loop2dur).ease("linear") | |
.attr("cx", cx + (lx - cx) * log(i+1) ) | |
.attr("cy", cy + (ly - cy) * log(i+1) ) | |
} | |
setTimeout(loop2, loop2dur) | |
} | |
loop1() | |
loop2() | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment