tomonacci/cardioid.html

## cardioid.html
<!DOCTYPE html>
<html>
  <head>
    <title>Cardioid</title>
    <style>
      input {
        width: 3em;
      }
    </style>
    <script>
      function draw_cardioid() {
        function get_number(id) {
          return parseInt(document.getElementById(id).value);
        }
        var a = get_number('a'), k = get_number('k'), n = get_number('n');
        var cardioid = document.getElementById('cardioid');
        cardioid.width = cardioid.height = a + 2;
        var c = cardioid.getContext('2d');
        var x = 1 + a / 2, y = 1 + a / 2, r = a / 2;
        c.lineWidth = 0.5;
        c.beginPath();
        c.arc(x, y, r, 0, 2 * Math.PI, true);
        c.closePath();
        c.stroke();
        for (var i = 0; i < n; i++) {
          theta = 2 * Math.PI * i / n;
          c.beginPath();
          c.moveTo(x+r*Math.cos(theta), y+r*Math.sin(theta));
          c.lineTo(x+r*Math.cos(k*theta), y+r*Math.sin(k*theta));
          c.closePath();
          c.stroke();
        }
      }
    </script>
  </head>
  <body>
    <h1>Cardioid</h1>
    <p>
      a = <input id="a" type="text">
      k = <input id="k" type="text">
      n = <input id="n" type="text">
      <button onclick="draw_cardioid();">Draw</button>
    </p>
    <canvas id="cardioid">
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Cardioid</title>
	<style>
	input {
	width: 3em;
	}
	</style>
	<script>
	function draw_cardioid() {
	function get_number(id) {
	return parseInt(document.getElementById(id).value);
	}
	var a = get_number('a'), k = get_number('k'), n = get_number('n');
	var cardioid = document.getElementById('cardioid');
	cardioid.width = cardioid.height = a + 2;
	var c = cardioid.getContext('2d');
	var x = 1 + a / 2, y = 1 + a / 2, r = a / 2;
	c.lineWidth = 0.5;
	c.beginPath();
	c.arc(x, y, r, 0, 2 * Math.PI, true);
	c.closePath();
	c.stroke();
	for (var i = 0; i < n; i++) {
	theta = 2 * Math.PI * i / n;
	c.beginPath();
	c.moveTo(x+rMath.cos(theta), y+rMath.sin(theta));
	c.lineTo(x+rMath.cos(ktheta), y+rMath.sin(ktheta));
	c.closePath();
	c.stroke();
	}
	}
	</script>
	</head>
	<body>
	<h1>Cardioid</h1>
	<p>
	a = <input id="a" type="text">
	k = <input id="k" type="text">
	n = <input id="n" type="text">
	<button onclick="draw_cardioid();">Draw</button>
	</p>
	<canvas id="cardioid">
	</body>
	</html>