hdf/dreamcatcher.html

## dreamcatcher.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dreamcatcher</title>
<style>
html, body {
 margin: 0;
}
#c {
  border: 1px solid #000;
}
#container {
  display: table;
  text-align: right;
  margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');</script>
<script>
$(function() {
function refresh() {
  var ctx = document.getElementById('c').getContext("2d");
  var cx = ctx.canvas.width/2;
  var cy = ctx.canvas.height/2;
  var tau = 2*Math.PI;
  var n = parseInt($('#n').val()); //Circles per layer
  var l = parseInt($('#l').val()); //Layers
  $('#nl').html($('#n').val());
  $('#ll').html($('#l').val());
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#000';
  ctx.fillStyle = '#fff';
  ctx.clearRect(0,0,2*cx,2*cy);
//Outer circle
  ctx.beginPath();
  ctx.arc(cx,cy,cx/1.25,0,tau);
  ctx.stroke();
//Spirals
  var gap = cx/2.5;
  for (var d = 0; d < 2; d++) {
    for (var i = 0; i < n; i++) {
      if (!d) {
        var rot = i*tau/n+((l%2)?tau/n/2:0);
      } else {
        var nm = ((l%2)?n+2:n)%4;
        var k = (nm)?4/nm:1;
        var rot = tau/n*i+(tau/n/k);
      }
      var angle = 0;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      var z = 0;
      while (angle <= tau/(n/l)+.001) {
        var inc = angle/(tau/(n/(l/2)))*gap;
        if (!d) {
          x = cx+inc*Math.cos(angle+rot);
          y = cy+inc*Math.sin(angle+rot);
        } else {
          x = cx+inc*Math.sin(angle+rot);
          y = cy+inc*Math.cos(angle+rot);
        }
        ctx.lineTo(x,y);
        angle += 1/(10+n*8+angle);
        z++;
      }
      //console.log(z);
      ctx.stroke();
    }
  }
//Small circles
  for (var i = 0; i < l; i++) {
    var dis = (l+i)/l*gap;
    for (i2 = 1; i2 <= n; i2++) {
      var angle = i2*tau/n+(tau/n/2*i);
      var x = cx+Math.cos(angle)*dis;
      var y = cy+Math.sin(angle)*dis;
      ctx.beginPath();
      ctx.arc(x,y,cx/33.75,0,tau);
      ctx.fill();
      ctx.stroke();
    }
  }
//Inner Circle
  ctx.beginPath();
  ctx.arc(cx,cy,cx/3.75,0,tau);
  ctx.fill();
  ctx.stroke();
}
refresh();
$('input').change(function() {
  refresh();
});
});
</script>
</head>
<body>
  <div id="container">
    <canvas id="c" width="600" height="600"></canvas><br/>
    <div>Circles per layer: <label id="nl" for="n">10</label><input type="range" id="n" min="1" max="24" value="12"></div>
    <div>Layers: <label id="ll" for="l">3</label><input type="range" id="l" min="1" max="12" value="3"></div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dreamcatcher</title>
	<style>
	html, body {
	margin: 0;
	}
	#c {
	border: 1px solid #000;
	}
	#container {
	display: table;
	text-align: right;
	margin: 0 auto;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');</script>
	<script>
	$(function() {
	function refresh() {
	var ctx = document.getElementById('c').getContext("2d");
	var cx = ctx.canvas.width/2;
	var cy = ctx.canvas.height/2;
	var tau = 2*Math.PI;
	var n = parseInt($('#n').val()); //Circles per layer
	var l = parseInt($('#l').val()); //Layers
	$('#nl').html($('#n').val());
	$('#ll').html($('#l').val());
	ctx.lineWidth = 2;
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#fff';
	ctx.clearRect(0,0,2cx,2cy);
	//Outer circle
	ctx.beginPath();
	ctx.arc(cx,cy,cx/1.25,0,tau);
	ctx.stroke();
	//Spirals
	var gap = cx/2.5;
	for (var d = 0; d < 2; d++) {
	for (var i = 0; i < n; i++) {
	if (!d) {
	var rot = i*tau/n+((l%2)?tau/n/2:0);
	} else {
	var nm = ((l%2)?n+2:n)%4;
	var k = (nm)?4/nm:1;
	var rot = tau/n*i+(tau/n/k);
	}
	var angle = 0;
	ctx.beginPath();
	ctx.moveTo(cx, cy);
	var z = 0;
	while (angle <= tau/(n/l)+.001) {
	var inc = angle/(tau/(n/(l/2)))*gap;
	if (!d) {
	x = cx+inc*Math.cos(angle+rot);
	y = cy+inc*Math.sin(angle+rot);
	} else {
	x = cx+inc*Math.sin(angle+rot);
	y = cy+inc*Math.cos(angle+rot);
	}
	ctx.lineTo(x,y);
	angle += 1/(10+n*8+angle);
	z++;
	}
	//console.log(z);
	ctx.stroke();
	}
	}
	//Small circles
	for (var i = 0; i < l; i++) {
	var dis = (l+i)/l*gap;
	for (i2 = 1; i2 <= n; i2++) {
	var angle = i2tau/n+(tau/n/2i);
	var x = cx+Math.cos(angle)*dis;
	var y = cy+Math.sin(angle)*dis;
	ctx.beginPath();
	ctx.arc(x,y,cx/33.75,0,tau);
	ctx.fill();
	ctx.stroke();
	}
	}
	//Inner Circle
	ctx.beginPath();
	ctx.arc(cx,cy,cx/3.75,0,tau);
	ctx.fill();
	ctx.stroke();
	}
	refresh();
	$('input').change(function() {
	refresh();
	});
	});
	</script>
	</head>
	<body>
	<div id="container">
	<canvas id="c" width="600" height="600"></canvas><br/>
	<div>Circles per layer: <label id="nl" for="n">10</label><input type="range" id="n" min="1" max="24" value="12"></div>
	<div>Layers: <label id="ll" for="l">3</label><input type="range" id="l" min="1" max="12" value="3"></div>
	</div>
	</body>
	</html>