aydos/README.md

## README.md

      
        

            Raw
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    homepage: https://aydos.com/wormhole/

  

  

## 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>

## preview.png

      
        

            Raw
  

        
        
          
            
          
          
            
              preview.png
            
          
        
      
    
    

        
            
        
    

  

## thumbnail.png

      
        

            Raw
  

        
        
          
            
          
          
            
              thumbnail.png
	<!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(cxcx+cycy)
	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>