tomonacci/function-space.html

## function-space.html
<!DOCTYPE html>
<html>
  <head>
    <title>Function space</title>
    <style>
      canvas {
        float: left;
        margin: 10px;
      }
    </style>
    <script>
      var unit = 80;

      function redraw_output(f) {
        var o = document.getElementById('output'), c = o.getContext('2d');
        c.clearRect(0, 0, o.width, o.height);
        c.beginPath();
        c.moveTo(o.width / 2, 0);
        c.lineTo(o.width / 2, o.height);
        c.moveTo(0, o.height / 2);
        c.lineTo(o.width, o.height / 2);
        c.moveTo(0, o.height/2-unit*f(-o.width/2/unit));
        c.lineTo(o.width, o.height/2-unit*f(o.width/2/unit));
        c.closePath();
        c.stroke();
      }

      function main() {
        var i = document.getElementById('input'), c = i.getContext('2d');
        c.beginPath();
        c.moveTo(i.width / 2, 0);
        c.lineTo(i.width / 2, i.height);
        c.moveTo(0, i.height / 2);
        c.lineTo(i.width, i.height / 2);
        c.closePath();
        c.stroke();
        var ame = function(type, handler) {
          i.addEventListener(type, function(e) {
            handler(e.clientX-i.offsetLeft, e.clientY-i.offsetTop);
          }, false);
        };
        ame('mousemove', function(x, y) {
          var a = (x - i.width / 2) / unit, b = (i.height / 2 - y) / unit;
          document.getElementById('description').innerHTML =
            "a = " + a + "<br />b = " + b + "<br />y = " + a + "x + " + b;
          redraw_output(function(x) { return a * x + b; });
        });
        redraw_output(function(x) { return 0; });
      }
    </script>
  </head>
  <body onload="main();">
    <h1>Coordinate space</h1>
    <canvas id="input" width="500" height="500"></canvas>
    <canvas id="output" width="500" height="500"></canvas>
    <p id="description" />
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Function space</title>
	<style>
	canvas {
	float: left;
	margin: 10px;
	}
	</style>
	<script>
	var unit = 80;

	function redraw_output(f) {
	var o = document.getElementById('output'), c = o.getContext('2d');
	c.clearRect(0, 0, o.width, o.height);
	c.beginPath();
	c.moveTo(o.width / 2, 0);
	c.lineTo(o.width / 2, o.height);
	c.moveTo(0, o.height / 2);
	c.lineTo(o.width, o.height / 2);
	c.moveTo(0, o.height/2-unit*f(-o.width/2/unit));
	c.lineTo(o.width, o.height/2-unit*f(o.width/2/unit));
	c.closePath();
	c.stroke();
	}

	function main() {
	var i = document.getElementById('input'), c = i.getContext('2d');
	c.beginPath();
	c.moveTo(i.width / 2, 0);
	c.lineTo(i.width / 2, i.height);
	c.moveTo(0, i.height / 2);
	c.lineTo(i.width, i.height / 2);
	c.closePath();
	c.stroke();
	var ame = function(type, handler) {
	i.addEventListener(type, function(e) {
	handler(e.clientX-i.offsetLeft, e.clientY-i.offsetTop);
	}, false);
	};
	ame('mousemove', function(x, y) {
	var a = (x - i.width / 2) / unit, b = (i.height / 2 - y) / unit;
	document.getElementById('description').innerHTML =
	"a = " + a + "<br />b = " + b + "<br />y = " + a + "x + " + b;
	redraw_output(function(x) { return a * x + b; });
	});
	redraw_output(function(x) { return 0; });
	}
	</script>
	</head>
	<body onload="main();">
	<h1>Coordinate space</h1>
	<canvas id="input" width="500" height="500"></canvas>
	<canvas id="output" width="500" height="500"></canvas>
	<p id="description" />
	</body>
	</html>