Skip to content

Instantly share code, notes, and snippets.

@aydos

aydos/README.md

Last active May 24, 2016 16:21
Show Gist options
  • Save aydos/5f914023ec02eb74f70ba501e097820d to your computer and use it in GitHub Desktop.
Save aydos/5f914023ec02eb74f70ba501e097820d to your computer and use it in GitHub Desktop.
Download ZIP
wormhole
Raw
index.html
<!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