Plottable Alpha


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Plottable Alpha</title>

        <script type="text/javascript" src="grid.js"></script>
        <script type="text/javascript" src="math.js"></script>

        <script type="text/javascript">

            function coord(i) {

                return (i/20)-13;

            }

            function clearBoard() {

                var canvas = document.getElementById("master");
                var context = canvas.getContext("2d");

                context.fillStyle = "black";
                context.fillRect(0,0,520,520);

                var opts = {
                distance : 20,
                lineWidth : 1.5,
                gridColor : "green",
                caption : false
                };

                new Grid(opts).draw(context);

                context.fillStyle = "white";

                context.fillRect(0,260,520,1.5);
                context.fillRect(260,0,1.5,520);

            }

            function submit() {

                var context = document.getElementById("master").getContext("2d");

                expr = Parser.parse(document.getElementById("func").value);

                context.fillStyle = "red";

                var i=0;

                while (i<=520) {

                    context.fillRect(i,520-((expr.evaluate({x : coord(i)})+13)*20),1.5,1.5);
                    i += 0.01;

                }
            }

        </script>

    </head>
    <body bgcolor="black" onload="clearBoard();">

        <canvas id="master" width="520" height="520">Sorry, your browser does not support the canvas HTML5 tag. Please update your browser.</canvas>

        <div id="inputs">
        <input type="text" id="func" />
        <input type="button" value="Go!" onclick="submit();" />
        <input type="button" value="Clear" onclick="clearBoard();" />
        </div>

    </body>
</html>