tomonacci/koch-snowflake.html

## koch-snowflake.html
<!DOCTYPE html>
<html>
  <head>
    <title>Koch snowflake</title>
    <style type='text/css'>
      input {
        width: 4em;
      }
    </style>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'></script>
    <script type="text/javascript">
      var drawRec = function(context, n, a, b, c, d) {
        if (n--) {
          var x = c - a, y = d - b;
          var p = x / 3, q = y / 3, t = 2 * p, u = 2 * q;
          var r = x / 2 + y / (2 * Math.sqrt(3));
          var s = - x / (2 * Math.sqrt(3)) + y / 2;
          drawRec(context, n, a, b, a + p, b + q);
          drawRec(context, n, a + p, b + q, a + r, b + s);
          drawRec(context, n, a + r, b + s, a + t, b + u);
          drawRec(context, n, a + t, b + u, c, d);
        } else
          context.lineTo(c, d);
      }
      var drawKochSnowflake = function(context, a, n) {
        var rec = function(n, a, b, c, d) {
          if (n--) {
            var x = c - a, y = d - b;
            var p = x / 3, q = y / 3, t = 2 * p, u = 2 * q;
            var r = x / 2 + y / (2 * Math.sqrt(3));
            var s = - x / (2 * Math.sqrt(3)) + y / 2;
            rec(n, a, b, a + p, b + q);
            rec(n, a + p, b + q, a + r, b + s);
            rec(n, a + r, b + s, a + t, b + u);
            rec(n, a + t, b + u, c, d);
          } else
            context.lineTo(c, d);
        }
        context.beginPath();
        context.moveTo(a / 2, 0);
        rec(n, a / 2, 0, a, a * (Math.sqrt(3) / 2));
        rec(n, a, a * (Math.sqrt(3) / 2), 0, a * (Math.sqrt(3) / 2));
        rec(n, 0, a * (Math.sqrt(3) / 2), a / 2, 0);
        context.closePath();
        context.stroke();
      };
      var run = function() {
        var a = parseInt($('#a').val()), n = parseInt($('#n').val());
        var ks = $('#koch-snowflake')[0];
        var context = ks.getContext('2d');
        context.clearRect(0, 0, ks.width, ks.height);
        ks.width = a, ks.height = a * (2 / Math.sqrt(3));
        drawKochSnowflake(context, a, n);
      }
    </script>
  </head>
  <body>
    <h1>Koch snowflake</h1>
    <p>
      N = <input id="n" type="text"/>
      a = <input id="a" type="text"/>
      <button onclick="run();">Draw</button>
    </p>
    <br/>
    <canvas id="koch-snowflake"/>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Koch snowflake</title>
	<style type='text/css'>
	input {
	width: 4em;
	}
	</style>
	<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'></script>
	<script type="text/javascript">
	var drawRec = function(context, n, a, b, c, d) {
	if (n--) {
	var x = c - a, y = d - b;
	var p = x / 3, q = y / 3, t = 2 * p, u = 2 * q;
	var r = x / 2 + y / (2 * Math.sqrt(3));
	var s = - x / (2 * Math.sqrt(3)) + y / 2;
	drawRec(context, n, a, b, a + p, b + q);
	drawRec(context, n, a + p, b + q, a + r, b + s);
	drawRec(context, n, a + r, b + s, a + t, b + u);
	drawRec(context, n, a + t, b + u, c, d);
	} else
	context.lineTo(c, d);
	}
	var drawKochSnowflake = function(context, a, n) {
	var rec = function(n, a, b, c, d) {
	if (n--) {
	var x = c - a, y = d - b;
	var p = x / 3, q = y / 3, t = 2 * p, u = 2 * q;
	var r = x / 2 + y / (2 * Math.sqrt(3));
	var s = - x / (2 * Math.sqrt(3)) + y / 2;
	rec(n, a, b, a + p, b + q);
	rec(n, a + p, b + q, a + r, b + s);
	rec(n, a + r, b + s, a + t, b + u);
	rec(n, a + t, b + u, c, d);
	} else
	context.lineTo(c, d);
	}
	context.beginPath();
	context.moveTo(a / 2, 0);
	rec(n, a / 2, 0, a, a * (Math.sqrt(3) / 2));
	rec(n, a, a * (Math.sqrt(3) / 2), 0, a * (Math.sqrt(3) / 2));
	rec(n, 0, a * (Math.sqrt(3) / 2), a / 2, 0);
	context.closePath();
	context.stroke();
	};
	var run = function() {
	var a = parseInt($('#a').val()), n = parseInt($('#n').val());
	var ks = $('#koch-snowflake')[0];
	var context = ks.getContext('2d');
	context.clearRect(0, 0, ks.width, ks.height);
	ks.width = a, ks.height = a * (2 / Math.sqrt(3));
	drawKochSnowflake(context, a, n);
	}
	</script>
	</head>
	<body>
	<h1>Koch snowflake</h1>
	<p>
	N = <input id="n" type="text"/>
	a = <input id="a" type="text"/>
	<button onclick="run();">Draw</button>
	</p>
	<br/>
	<canvas id="koch-snowflake"/>
	</body>
	</html>