Comments on: Javascript graphing calculator
http://projects.metafilter.com/3331/Javascript-graphing-calculator/
Comments on MetaFilter Projects post Javascript graphing calculatorSun, 30 Oct 2011 06:33:34 -0800Sun, 30 Oct 2011 06:33:34 -0800en-ushttp://blogs.law.harvard.edu/tech/rss60Javascript graphing calculator
http://projects.metafilter.com/3331/Javascript-graphing-calculator
I wrote a little Graphing calculator in HTML5. You enter formulas as javascript code, and the my code evaluates them over and over again to generate an animated graph. You can change the color and width of the function graphs, the background color and add a 'fade effect', which can result in some cool visuals (examples: <a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.134%22%7D%2C%22functions%22%3A%7B%22fn240431026%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%222.84%22%2C%22code%22%3A%22return%20Math.sin%28x-t%29%3B%22%7D%2C%22fn2933529933%22%3A%7B%22color%22%3A%7B%22r%22%3A%2299%22%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%221.14%22%2C%22code%22%3A%22return%20Math.cos%28x-t%29%3B%22%7D%2C%22fn1602201130%22%3A%7B%22color%22%3A%7B%22r%22%3A%22186%22%2C%22g%22%3A0%2C%22b%22%3A%220%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*2%29%29*0.8%3B%22%7D%2C%22fn4256801813%22%3A%7B%22color%22%3A%7B%22r%22%3A%22255%22%2C%22g%22%3A%220%22%2C%22b%22%3A%220%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*3%29%29*0.6%3B%22%7D%2C%22fn1455369545%22%3A%7B%22color%22%3A%7B%22r%22%3A255%2C%22g%22%3A%22169%22%2C%22b%22%3A%22169%22%7D%2C%22linewidth%22%3A%224.33%22%2C%22code%22%3A%22return%20Math.sin%28x*2-t*12%29*0.2%3B%22%7D%7D%7D">
1</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.047%22%2C%22color%22%3A%7B%22r%22%3A%220%22%2C%22b%22%3A%22112%22%2C%22g%22%3A%220%22%7D%7D%2C%22functions%22%3A%7B%22fn240431026%22%3A%7B%22color%22%3A%7B%22r%22%3A%22255%22%2C%22g%22%3A%22242%22%2C%22b%22%3A%22240%22%7D%2C%22linewidth%22%3A%220.19%22%2C%22code%22%3A%22return%20Math.sin%28x-t%29%3B%22%7D%2C%22fn2933529933%22%3A%7B%22color%22%3A%7B%22r%22%3A%2299%22%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%221.14%22%2C%22code%22%3A%22return%20Math.cos%28x-t%29%3B%22%7D%2C%22fn1602201130%22%3A%7B%22color%22%3A%7B%22r%22%3A%22186%22%2C%22g%22%3A0%2C%22b%22%3A%220%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*2%29%29*0.8%3B%22%7D%2C%22fn4256801813%22%3A%7B%22color%22%3A%7B%22r%22%3A%22255%22%2C%22g%22%3A%220%22%2C%22b%22%3A%220%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*3%29%29*0.6%3B%22%7D%2C%22fn1455369545%22%3A%7B%22color%22%3A%7B%22r%22%3A255%2C%22g%22%3A%22169%22%2C%22b%22%3A%22169%22%7D%2C%22linewidth%22%3A%224.33%22%2C%22code%22%3A%22return%20Math.sin%28x*2-t*12%29*0.2%3B%22%7D%7D%7D">
2</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.163%22%7D%2C%22functions%22%3A%7B%22fn843177769%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22%20return%20%20Math.sin%28x*3-t*14%29*0.2%20+%20Math.log%28Math.sin%28x+%28Math.sin%28t*0.2%29*20%29-t*6%29%20+%201.01%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%3B%20%22%7D%2C%22fn1583023404%22%3A%7B%22color%22%3A%7B%22r%22%3A%222%22%2C%22g%22%3A%2265%22%2C%22b%22%3A%22130%22%7D%2C%22linewidth%22%3A%220.86%22%2C%22code%22%3A%22return%20%20Math.sin%28x*3-t*22%29*0.2%20+%20Math.log%28Math.sin%28x-t*6%29%20+%201.01%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%3B%22%7D%7D%7D">
3</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.083%22%7D%2C%22functions%22%3A%7B%22fn843177769%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%220.32%22%2C%22code%22%3A%22%20return%20%20Math.sin%28x*3-t*14%29*0.2%20+%20Math.log%28Math.sin%28x+%28Math.sin%28t*0.2%29*20%29-t*6%29%20+%201.02%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%20+%20Math.sin%28x*50-t*300%29*0.15%3B%20%22%7D%2C%22fn1583023404%22%3A%7B%22color%22%3A%7B%22r%22%3A%222%22%2C%22g%22%3A%2265%22%2C%22b%22%3A%22130%22%7D%2C%22linewidth%22%3A%221.06%22%2C%22code%22%3A%22return%20%20Math.sin%28x*3-t*22%29*0.2%20+%20Math.log%28Math.sin%28x-t*6%29%20+%201.01%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%3B%22%7D%7D%7D">
4</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.03%22%2C%22color%22%3A%7B%22r%22%3A%220%22%2C%22b%22%3A%222%22%2C%22g%22%3A%222%22%7D%7D%2C%22functions%22%3A%7B%22fn4211068226%22%3A%7B%22color%22%3A%7B%22r%22%3A%22190%22%2C%22g%22%3A%22194%22%2C%22b%22%3A%22186%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28x-t%29%22%7D%2C%22fn3499247549%22%3A%7B%22color%22%3A%7B%22r%22%3A255%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.cos%28x-t*1.3%29%3B%22%7D%2C%22fn964219608%22%3A%7B%22color%22%3A%7B%22r%22%3A%22160%22%2C%22g%22%3A%22253%22%2C%22b%22%3A%22255%22%7D%2C%22linewidth%22%3A%220.21%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*2%29%29*0.8%3B%22%7D%7D%7D">
5</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.10300000000000001%22%2C%22color%22%3A%7B%22r%22%3A%222%22%2C%22b%22%3A%220%22%2C%22g%22%3A%2271%22%7D%7D%2C%22functions%22%3A%7B%22fn3627912227%22%3A%7B%22color%22%3A%7B%22r%22%3A%22184%22%2C%22g%22%3A%22255%22%2C%22b%22%3A%2293%22%7D%2C%22linewidth%22%3A%222.84%22%2C%22code%22%3A%22return%20Math.sin%28x*5*Math.sin%28t*2%29-%20t%29*Math.sin%28t*0.5%29%20+%20Math.sin%28x*5+t*20%29*0.3*Math.sin%28t*0.05%29%3B%22%7D%7D%7D">
6</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%221%22%2C%22axis%22%3A%22false%22%2C%22axisval%22%3A%7B%22v%22%3A%7B%22x0%22%3A-1.5%2C%22y0%22%3A%22-1%22%2C%22x1%22%3A4%2C%22y1%22%3A%221%22%7D%2C%22u%22%3A%7B%22x0%22%3A%22p%22%2C%22y0%22%3A%221%22%2C%22x1%22%3A%22p%22%2C%22y1%22%3A%221%22%7D%7D%2C%22color%22%3A%7B%22r%22%3A%220%22%2C%22b%22%3A%220%22%2C%22g%22%3A%220%22%7D%7D%2C%22functions%22%3A%7B%22fn843177769%22%3A%7B%22color%22%3A%7B%22r%22%3A%22253%22%2C%22g%22%3A%220%22%2C%22b%22%3A%22153%22%7D%2C%22linewidth%22%3A%221.41%22%2C%22code%22%3A%22%20return%20%20Math.sin%28x*3-t*14%29*0.2%20+%20Math.log%28Math.sin%28x+%28Math.sin%28t*0.2%29*20%29-t*6%29%20+%201.02%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%20+%20Math.sin%28x*5-t*300%29*0.25%3B%20%22%7D%2C%22fn1583023404%22%3A%7B%22color%22%3A%7B%22r%22%3A%2241%22%2C%22g%22%3A%22121%22%2C%22b%22%3A%22255%22%7D%2C%22linewidth%22%3A%221.51%22%2C%22code%22%3A%22return%20%20Math.sin%28x*3-t*22%29*0.2%20+%20Math.log%28Math.sin%28x-t*6%29%20+%201.01%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%3B%22%7D%7D%7D">
7</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.03%22%2C%22color%22%3A%7B%22r%22%3A%22255%22%2C%22b%22%3A%22201%22%2C%22g%22%3A%22253%22%7D%7D%2C%22functions%22%3A%7B%22fn4211068226%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28x-t%29%22%7D%2C%22fn3499247549%22%3A%7B%22color%22%3A%7B%22r%22%3A%22143%22%2C%22g%22%3A%2276%22%2C%22b%22%3A%2273%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.cos%28x-t*1.3%29%3B%22%7D%2C%22fn964219608%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A196%7D%2C%22linewidth%22%3A%220.21%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*2%29%29*0.8*Math.sin%28t%29%3B%22%7D%7D%7D">
8</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.134%22%2C%22color%22%3A%7B%22r%22%3A%22253%22%2C%22b%22%3A%22201%22%2C%22g%22%3A%22255%22%7D%7D%2C%22functions%22%3A%7B%22fn240431026%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%222.84%22%2C%22code%22%3A%22return%20Math.sin%28x-t%29%3B%22%7D%2C%22fn2933529933%22%3A%7B%22color%22%3A%7B%22r%22%3A%2299%22%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%221.14%22%2C%22code%22%3A%22return%20Math.cos%28x-t%29%3B%22%7D%2C%22fn1602201130%22%3A%7B%22color%22%3A%7B%22r%22%3A%2297%22%2C%22g%22%3A0%2C%22b%22%3A%22210%22%7D%2C%22linewidth%22%3A%222.00%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*2%29%29*0.8%3B%22%7D%2C%22fn4256801813%22%3A%7B%22color%22%3A%7B%22r%22%3A%22162%22%2C%22g%22%3A%220%22%2C%22b%22%3A%22220%22%7D%2C%22linewidth%22%3A%222.30%22%2C%22code%22%3A%22return%20Math.sin%28%28x-t*3%29%29*0.6%3B%22%7D%2C%22fn1455369545%22%3A%7B%22color%22%3A%7B%22r%22%3A%220%22%2C%22g%22%3A%2271%22%2C%22b%22%3A%2297%22%7D%2C%22linewidth%22%3A%220.65%22%2C%22code%22%3A%22return%20Math.sin%28x*2-t*18%29*0.2%3B%22%7D%7D%7D">
9</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%220.083%22%2C%22axis%22%3A%22false%22%2C%22axisval%22%3A%7B%22v%22%3A%7B%22x0%22%3A-2%2C%22y0%22%3A%22-1%22%2C%22x1%22%3A%222%22%2C%22y1%22%3A%221%22%7D%2C%22u%22%3A%7B%22x0%22%3A%22p%22%2C%22y0%22%3A%221%22%2C%22x1%22%3A%22p%22%2C%22y1%22%3A%221%22%7D%7D%2C%22color%22%3A%7B%22r%22%3A%220%22%2C%22b%22%3A%2250%22%2C%22g%22%3A%2215%22%7D%7D%2C%22functions%22%3A%7B%22fn843177769%22%3A%7B%22color%22%3A%7B%22r%22%3A%22225%22%2C%22g%22%3A%22220%22%2C%22b%22%3A%22255%22%7D%2C%22linewidth%22%3A%220.32%22%2C%22code%22%3A%22%20return%20%20Math.sin%28x*3-t*14%29*0.2%20+%20Math.log%28Math.sin%28x+%28Math.sin%28t*0.2%29*20%29-t*6%29%20+%201.02%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%20+%20Math.sin%28x*50-t*300%29*0.15%3B%20%22%7D%2C%22fn1583023404%22%3A%7B%22color%22%3A%7B%22r%22%3A%222%22%2C%22g%22%3A%2299%22%2C%22b%22%3A%22158%22%7D%2C%22linewidth%22%3A%221.06%22%2C%22code%22%3A%22return%20%20Math.sin%28x*3-t*22%29*0.2%20+%20Math.log%28Math.sin%28x-t*6%29%20+%201.01%29*Math.sin%28t*3%29*Math.sin%28x%29%20-%200.5%3B%22%7D%7D%7D">
A</a>
<a href="http://demo.cokere.com/js-ex/calc/calc.htm?data=%7B%22graph%22%3A%7B%22fade%22%3A%221%22%2C%22axis%22%3A%22false%22%2C%22axisval%22%3A%7B%22v%22%3A%7B%22x0%22%3A%220%22%2C%22y0%22%3A%22-1%22%2C%22x1%22%3A4%2C%22y1%22%3A2%7D%2C%22u%22%3A%7B%22x0%22%3A%221%22%2C%22y0%22%3A%221%22%2C%22x1%22%3A%22p%22%2C%22y1%22%3A%221%22%7D%7D%7D%2C%22functions%22%3A%7B%22fn156299050%22%3A%7B%22color%22%3A%7B%22r%22%3A0%2C%22g%22%3A0%2C%22b%22%3A0%7D%2C%22linewidth%22%3A%225.75%22%2C%22code%22%3A%22return%20%28%28Math.pow%28Math.E*%28Math.sin%28t*5%29+1%29%2CMath.sin%28%28x+%28t/2%29%29*Math.sin%28t%29*2-t*5%29%29-1.5%29*0.5%29%3B%22%7D%7D%7D">
B</a> ) and you can generate hyperlinks to anything you create (that's how I linked to the examples.)<br /><br />There are a few issues: it unfortunately doesn't work properly in firefox, since FF doesn't support input type=range. If it runs slow on your device, you can adjust the 'samples' parameter under graphs settings. <br /><br />Let me know what you think.post:projects.metafilter.com,2011:site.3331Sun, 30 Oct 2011 03:19:06 -0800delmoiBy: doctor_negative
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6960
I've done just enough javascripting to know that this is pretty amazing. Very cool.comment:projects.metafilter.com,2011:site.3331-6960Sun, 30 Oct 2011 06:33:34 -0800doctor_negativeBy: delmoi
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6961
Thanks!comment:projects.metafilter.com,2011:site.3331-6961Sun, 30 Oct 2011 12:11:06 -0800delmoiBy: cjorgensen
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6963
Can you make the canvas bigger?comment:projects.metafilter.com,2011:site.3331-6963Sun, 30 Oct 2011 16:19:33 -0800cjorgensenBy: delmoi
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6964
<i>Can you make the canvas bigger?</i><br>
<br>
I could. I like the size it is now but it might be a good idea to let the user change the size.comment:projects.metafilter.com,2011:site.3331-6964Sun, 30 Oct 2011 23:16:15 -0800delmoiBy: cjorgensen
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6967
About the only other thing I thought might be neat would be if there was optional audio. SOme of the formulas looked like oscillation style sound waves.comment:projects.metafilter.com,2011:site.3331-6967Mon, 31 Oct 2011 20:29:01 -0800cjorgensenBy: delmoi
http://projects.metafilter.com/3331/Javascript-graphing-calculator#6979
Yeah, they use the same mathematical functions (sine waves) as sound waves. You just calculate them at a higher frequency and you could make audio the same way.comment:projects.metafilter.com,2011:site.3331-6979Tue, 01 Nov 2011 20:09:12 -0800delmoi