Graph calc almost functional

Joe Hanley · Joe Hanley · commit 5ddef7936e28 · 2013-06-12T15:38:39.000-04:00
diff --git a/day3.html b/day3.html
@@ -0,0 +1,30 @@
+<html>
+<head>
+   <title>Day 3 Code</title> 
+   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+   <script src = 'day3.js'></script>
+   <style>
+       #test{
+       border:1px solid #555555;
+       background-color:#F0FBC8;
+       border-radius:5px;
+       }
+   </style>
+</head>   
+<body>
+  <h2>Canvas Experiments</h2>  
+  <p>
+      <canvas id= 'test' width='200' height='200'></canvas>
+      <div>
+          <button onclick='test_clear()'>Clear</button>
+          <button onclick='test_line()'>Line</button>
+          <button onclick='test_box()'>Box</button>
+          <button onclick='test_smiley()'>Smile</button>
+          <button onclick='test_rect()'>Rectangles</button>
+          <button onclick='test_text()'>Text</button>
+          <button onclick='test_mouse()'>Mouse</button>
+      </div>
+  </p>
+</body>    
+    
+</html>
diff --git a/day3.js b/day3.js
@@ -0,0 +1,114 @@
+function test_clear(){
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    
+    ctx.clearRect(0,0,JQcanvas.width(),JQcanvas.height());//x,y,w,h
+    
+}
+function test_line() {
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    
+    ctx.beginPath();
+    ctx.moveTo(50,50);
+    ctx.lineTo(150,150);
+    ctx.lineWidth = 10
+    ctx.strokeStyle= 'red';
+    ctx.lineCap= 'round';
+    ctx.stroke();
+}
+function test_box() {
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    
+    ctx.beginPath();
+    ctx.moveTo(50,50);
+    ctx.lineTo(150,50);
+    ctx.lineTo(150,150);
+    ctx.lineTo(50,150);
+    ctx.lineTo(50,50);
+    ctx.lineCap='round';
+    ctx.lineWidth=5;
+    ctx.strokeStyle= 'red';
+    ctx.lineJoin='round';
+    ctx.fillStyle='#45379f';
+    ctx.stroke();
+    ctx.fill();
+}
+function test_rect(){
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    
+    ctx.beginPath();
+    ctx.fillStyle='red';
+    ctx.fillRect(25,25,75,75);
+    ctx.fillStyle='blue';
+    ctx.fillRect(50,50,75,75);
+}
+function test_smiley(){
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    ctx.beginPath();
+    ctx.arc(100,100,75,0,2*Math.PI);
+    ctx.fillStyle = 'yellow';
+    ctx.strokeStyle='black';
+    ctx.lineWidth=10;
+    ctx.fill();
+    ctx.stroke;
+    ctx.beginPath();
+    ctx.fillStyle='black';
+    ctx.arc(70,70,10,0,2*Math.PI);
+    ctx.arc(130,70,10,0,2*Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(100,130,30,Math.PI,2*Math.PI);
+    ctx.stroke();
+}
+function test_text(){
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    
+    ctx.beginPath();
+    ctx.fillStyle='#000000'
+    ctx.font='20px Helvetica'
+    ctx.textAlign ='center';
+    ctx.textBaseline='middle'
+    ctx.fillText('Middle',100,100)
+    
+}
+
+function test_mouse(){
+    var JQcanvas = $('#test:first');
+    var DOMcanvas = JQcanvas[0];
+    var ctx = DOMcanvas.getContext('2d');
+    var bg_image = $('<canvas></canvas>')[0];
+    bg_image.width=200
+    bg_image.height=200
+    var bctx = bg_image.getContext('2d')
+    bctx.fillStyle='#326949'
+    bctx.fillRect(0,0,200,200)
+    ctx.drawImage(bg_image,0,0)
+    JQcanvas.on('mousemove',function(event){
+        var mx = event.pageX;
+        var my = event.pageY;
+        var offset= JQcanvas.offset();
+        mx= Math.round(mx-offset.left);
+        my= Math.round(my-offset.top);    
+        ctx.beginPath();
+        ctx.moveTo(mx-10,my);
+        ctx.lineTo(mx+10,my);
+        ctx.moveTo(mx,my-10);
+        ctx.lineTo(mx,my+10);
+        ctx.strokeStyle='black';
+        ctx.lineWidth=2; 
+        ctx.drawImage(bg_image,0,0)
+        ctx.stroke();
+        
+    });
+}
diff --git a/fancycalc.js b/fancycalc.js
@@ -0,0 +1,210 @@
+var calculator = (function() {
+    exports = {};
+
+    var built_in_functions = {
+        abs: Math.abs,
+        acos: Math.acos,
+        asin: Math.asin,
+        atan: Math.atan,
+        atan2: Math.atan2, // 2 arg
+        ceil: Math.ceil,
+        cos: Math.cos,
+        exp: Math.exp,
+        floor: Math.floor,
+        log: Math.log,
+        max: Math.max, // multi-arg
+        min: Math.min, // multi-arg
+        pow: Math.pow, // 2 arg
+        round: Math.round,
+        sin: Math.sin,
+        sqrt: Math.sqrt,
+    };
+
+    var built_in_environment = {
+        pi: Math.PI,
+        e: Math.E,
+    };
+    
+    function new_environment() {
+        var env = {};
+        for (var v in built_in_environment) {
+            env[v] = built_in_environment[v];
+        }
+        return env;
+    }
+    exports.new_environment = new_environment;
+
+// if first token is t, consume it and return true
+    function read_token(t, tokens) {
+        if (tokens.length > 0 && tokens[0] == t) {
+            tokens.shift();
+            return true;
+        }
+        return false;
+    }
+
+    // builds parse tree for following BNF.  Tree is either a number or
+    // or an array of the form [operator,tree,tree].
+    // <expression> ::= <term> | <expression> "+" <term> | <expression> "-" <term>
+    // <term>       ::= <unary> | <term> "*" <unary> | <term> "/" <unary>
+    // <unary>      ::= <factor> | "-" <factor> | "+" <factor>
+    // <factor>     ::= <number> | "(" <expression> ")"
+    function parse_expression(tokens) {
+        var expression = parse_term(tokens);
+        while (true) {
+            if (read_token('+', tokens)) {
+                expression = ['+', expression, parse_term(tokens)];
+            }
+            else if (read_token('-', tokens)) {
+                expression = ['-', expression, parse_term(tokens)];
+            }
+            else break;
+        }
+        return expression;
+    }
+
+    function parse_term(tokens) {
+        var term = parse_exp(tokens);
+        while (true) {
+            if (read_token('*', tokens)) {
+                term = ['*', term, parse_exp(tokens)];
+            }
+            else if (read_token('/', tokens)) {
+                term = ['/', term, parse_exp(tokens)];
+            }
+            else break;
+        }
+        return term;
+    }
+
+    function parse_exp(tokens) {
+        var term = parse_unary(tokens);
+        while (true) {
+            if (read_token('^', tokens)) {
+                term = ['^', term, parse_unary(tokens)];
+            }
+            else break;
+        }
+        return term;
+    }
+
+    function parse_unary(tokens) {
+        if (read_token('-', tokens)) {
+            return ['neg', parse_factor(tokens)];
+        }
+        else if (read_token('+', tokens)) {}
+        return parse_factor(tokens);
+    }
+
+
+    function parse_factor(tokens) {
+        if (read_token('(', tokens)) {
+            var exp = parse_expression(tokens);
+            if (read_token(')', tokens)) {
+                return exp;
+            }
+            else throw 'Missing ) in expression';
+        }
+        else if (tokens.length > 0) {
+            var token = tokens.shift();
+            if (token.search(/[a-zA-Z_]\w*/) != -1) {
+                // variable name
+                if (read_token('(', tokens)) {
+                    // a function call, parse the argument(s)
+                    var args = [];
+                    // code assumes at least one argument
+                    while (true) {
+                        args.push(parse_expression(tokens));
+                        if (read_token(',', tokens)) continue;
+                        if (read_token(')', tokens)) break;
+                        throw "Expected comma or close paren in function call";
+                    }
+                    if (!(token in built_in_functions)) throw "Call to unrecognized function: " + token;
+                    return ['call ' + token].concat(args);
+                }
+                // otherwise its just a reference to a variable
+                return token;
+            }
+            // only option left: a number
+            var n = parseFloat(token, 10);
+            if (isNaN(n)) throw 'Expected a number, got ' + String(token);
+            return n;
+        }
+        else throw 'Unexpected end of expression';
+    }
+
+    function evaluate(tree, environment) {
+        if (environment === undefined) environment = built_in_environment;
+        if (typeof tree == 'number') return tree;
+        else if (typeof tree == 'string') return environment[tree]; // might be undefined
+        else {
+            // expecting [operator,tree,...]
+            var args = tree.slice(1).map(function(subtree) {
+                return evaluate(subtree, environment);
+            });
+            if (tree[0].search(/^call /) != -1) {
+                // call of built-in function
+                var f = tree[0].slice(5);
+                f = built_in_functions[f];
+                if (f === undefined) throw "Unknown function: " + f;
+                return f.apply(undefined, args);
+            }
+            // otherwise its just an operator
+            else switch (tree[0]) {
+            case 'neg':
+                return -args[0];
+            case '+':
+                return args[0] + args[1];
+            case '-':
+                return args[0] - args[1];
+            case '*':
+                return args[0] * args[1];
+            case '/':
+                return args[0] / args[1];
+            case '^':
+                return Math.pow(args[0],args[1]);   
+            default:
+                throw 'Unrecognized operator ' + tree[0];
+            }
+        }
+    }
+    exports.evaluate = evaluate;
+
+    function parse(text) {
+        // pattern matches integers, variable names, parens and the operators +, -, *, /
+        var pattern = /([0-9]*\.)?[0-9]+([eE][\-+]?[0-9]+)?|[a-zA-Z_]\w*|\+|\-|\*|\/|\^|\(|\)|\,/g;
+        var tokens = text.match(pattern);
+        return parse_expression(tokens);
+    }
+    exports.parse = parse;
+
+    function calculate(text,environment) {
+        if (environment === undefined) environment = built_in_environment;
+        try {
+            var tree = parse(text);
+            return evaluate(tree, environment);
+        }
+        catch (err) {
+            return err;
+        }
+    }
+    exports.calculate = calculate;
+
+    function setup_calc(div) {
+        var input = $('<input></input>', {
+            type: 'text',
+            size: 50
+        });
+        var output = $('<div></div>');
+        var button = $('<button>Calculate</button>');
+        button.bind("click", function() {
+            output.html(String(calculate(input.val())));
+        });
+
+        $(div).append(input, button, output);
+    }
+    exports.setup_calc = setup_calc;
+
+    return exports;
+
+}());
diff --git a/graphcalc.css b/graphcalc.css
@@ -0,0 +1,9 @@
+.background{
+    background-color:#A5A5A5;
+    width: 100%;
+    height:100%;
+}
+.graph_window{
+    width:150px;
+    height:150px;
+}
diff --git a/graphcalc.html b/graphcalc.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+    <title>Graphing Calculator</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+    <script src="fancycalc.js"></script> 
+    <script src= 'graphcalc.js'></script>
+    
+    
+</head>
+<body>
+<div class="graphcalc"></div>    
+</body>
+</html>
diff --git a/graphcalc.js b/graphcalc.js
