Fire JS Bin - GraphyCalc

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// pre3d.js
var Pre3d=function(){function x(a,b){return a.x*b.x+a.y*b.y+a.z*b.z}function J(a,b){return{x:a.x-b.x,y:a.y-b.y}}function A(a,b){return{x:a.x+b.x,y:a.y+b.y,z:a.z+b.z}}function K(a,b){return{x:a.x*b,y:a.y*b}}function L(a,b){return{x:a.x*b,y:a.y*b,z:a.z*b}}function M(a){var b=a.x;a=a.y;return Math.sqrt(b*b+a*a)}function N(a){var b=a.x,c=a.y;a=a.z;return Math.sqrt(b*b+c*c+a*a)}function O(a){return K(a,1/M(a))}function y(a){return L(a,1/N(a))}function q(a,b,c,e,g,d,h,f,j,l,k,m){this.e0=a;this.e1=b;this.e2=
c;this.e3=e;this.e4=g;this.e5=d;this.e6=h;this.e7=f;this.e8=j;this.e9=l;this.e10=k;this.e11=m}function p(a,b){var c=a.e0,e=a.e1,g=a.e2,d=a.e4,h=a.e5,f=a.e6,j=a.e8,l=a.e9,k=a.e10,m=b.e0,n=b.e1,i=b.e2,s=b.e3,B=b.e4,C=b.e5,D=b.e6,E=b.e7,F=b.e8,G=b.e9,H=b.e10,I=b.e11;return new q(c*m+e*B+g*F,c*n+e*C+g*G,c*i+e*D+g*H,c*s+e*E+g*I+a.e3,d*m+h*B+f*F,d*n+h*C+f*G,d*i+h*D+f*H,d*s+h*E+f*I+a.e7,j*m+l*B+k*F,j*n+l*C+k*G,j*i+l*D+k*H,j*s+l*E+k*I+a.e11)}function P(a){var b=Math.sin(a);a=Math.cos(a);return new q(1,0,
0,0,0,a,-b,0,0,b,a,0)}function Q(a){var b=Math.sin(a);a=Math.cos(a);return new q(a,0,b,0,0,1,0,0,-b,0,a,0)}function R(a){var b=Math.sin(a);a=Math.cos(a);return new q(a,-b,0,0,b,a,0,0,0,0,1,0)}function u(a,b){return{x:a.e0*b.x+a.e1*b.y+a.e2*b.z+a.e3,y:a.e4*b.x+a.e5*b.y+a.e6*b.z+a.e7,z:a.e8*b.x+a.e9*b.y+a.e10*b.z+a.e11}}function o(){this.reset()}function S(a,b){for(var c=b.length,e=Array(c),g=0;g<c;++g)e[g]=u(a,b[g]);return e}function w(a,b){var c=O(J(b,a));b.x+=c.x;b.y+=c.y;a.x-=c.x;a.y-=c.y}function t(a,
b,c,e){this.setRGBA(a,b,c,e)}function v(a,b,c,e){this.i0=a;this.i1=b;this.i2=c;this.i3=e;this.normal2=this.normal1=this.centroid=null}function z(a,b,c){this.ep=a;this.c0=b;this.c1=c}function T(){this.transform=new o;this.focal_length=1}function r(a){this.draw_overdraw=this.perform_z_sorting=true;this.draw_backfaces=false;this.texture=null;this.fill_rgba=new t(1,0,0,1);this.normal2_rgba=this.normal1_rgba=this.stroke_rgba=null;this.canvas=a;this.ctx=a.getContext("2d");this.camera=new T;this.transform=
new o;this.transform_stack_=[];this.quad_callback=null;this.width_=a.width;this.height_=a.height;this.scale_=this.height_/2;this.xoff_=this.width_/2;this.buffered_quads_=null;this.emptyBuffer();if(this.ctx.setStrokeColor==null)this.ctx.setStrokeColor=function(b,c,e,g){this.strokeStyle="rgba("+[Math.floor(b*255),Math.floor(c*255),Math.floor(e*255),g].join(",")+")"};if(this.ctx.setFillColor==null)this.ctx.setFillColor=function(b,c,e,g){this.fillStyle="rgba("+[Math.floor(b*255),Math.floor(c*255),Math.floor(e*
255),g].join(",")+")"}}function U(a,b,c,e,g,d,h,f,j,l,k,m,n,i){a.save();a.beginPath();a.moveTo(c,e);a.lineTo(g,d);a.lineTo(h,f);a.closePath();a.clip();var s=j*(i-m)-k*i+n*m+(k-n)*l;a.transform(-(l*(h-g)-m*h+i*g+(m-i)*c)/s,(m*f+l*(d-f)-i*d+(i-m)*e)/s,(j*(h-g)-k*h+n*g+(k-n)*c)/s,-(k*f+j*(d-f)-n*d+(n-k)*e)/s,(j*(i*g-m*h)+l*(k*h-n*g)+(n*m-k*i)*c)/s,(j*(i*d-m*f)+l*(k*f-n*d)+(n*m-k*i)*e)/s);a.drawImage(b,0,0);a.restore()}function V(a,b){return a.qf.centroid.z-b.qf.centroid.z}o.prototype.reset=function(){this.m=
new q(1,0,0,0,0,1,0,0,0,0,1,0)};o.prototype.rotateX=function(a){this.m=p(P(a),this.m)};o.prototype.rotateXPre=function(a){this.m=p(this.m,P(a))};o.prototype.rotateY=function(a){this.m=p(Q(a),this.m)};o.prototype.rotateYPre=function(a){this.m=p(this.m,Q(a))};o.prototype.rotateZ=function(a){this.m=p(R(a),this.m)};o.prototype.rotateZPre=function(a){this.m=p(this.m,R(a))};o.prototype.translate=function(a,b,c){this.m=p(new q(1,0,0,a,0,1,0,b,0,0,1,c),this.m)};o.prototype.translatePre=function(a,b,c){this.m=
p(this.m,new q(1,0,0,a,0,1,0,b,0,0,1,c))};o.prototype.scale=function(a,b,c){this.m=p(new q(a,0,0,0,0,b,0,0,0,0,c,0),this.m)};o.prototype.scalePre=function(a,b,c){this.m=p(this.m,new q(a,0,0,0,0,b,0,0,0,0,c,0))};o.prototype.transformPoint=function(a){return u(this.m,a)};o.prototype.multTransform=function(a){this.m=p(this.m,a.m)};o.prototype.setDCM=function(a,b,c){var e=this.m;e.e0=a.x;e.e4=a.y;e.e8=a.z;e.e1=b.x;e.e5=b.y;e.e9=b.z;e.e2=c.x;e.e6=c.y;e.e10=c.z};o.prototype.dup=function(){var a=new o;a.m=
new q(this.m.e0,this.m.e1,this.m.e2,this.m.e3,this.m.e4,this.m.e5,this.m.e6,this.m.e7,this.m.e8,this.m.e9,this.m.e10,this.m.e11);return a};t.prototype.setRGBA=function(a,b,c,e){this.r=a;this.g=b;this.b=c;this.a=e};t.prototype.setRGB=function(a,b,c){this.setRGBA(a,b,c,1)};t.prototype.invert=function(){this.r=1-this.r;this.g=1-this.g;this.b=1-this.b};t.prototype.dup=function(){return new t(this.r,this.g,this.b,this.a)};v.prototype.isTriangle=function(){return this.i3===null};v.prototype.setQuad=function(a,
b,c,e){this.i0=a;this.i1=b;this.i2=c;this.i3=e};v.prototype.setTriangle=function(a,b,c){this.i0=a;this.i1=b;this.i2=c;this.i3=null};z.prototype.isQuadratic=function(){return this.c1===null};z.prototype.setQuadratic=function(a,b){this.ep=a;this.c0=b;this.c1=null};z.prototype.setCubic=function(a,b,c){this.ep=a;this.c0=b;this.c1=c};r.prototype.pushTransform=function(){this.transform_stack_.push(this.transform.dup())};r.prototype.popTransform=function(){this.transform=this.transform_stack_.pop()};r.prototype.emptyBuffer=
function(){this.buffered_quads_=[]};r.prototype.projectPointToCanvas=function(a){var b=this.camera.focal_length/-a.z,c=this.scale_;return{x:a.x*b*c+this.xoff_,y:a.y*b*-c+c}};r.prototype.projectPointsToCanvas=function(a){for(var b=a.length,c=Array(b),e=0;e<b;++e)c[e]=this.projectPointToCanvas(a[e]);return c};r.prototype.projectQuadFaceToCanvasIP=function(a){a.i0=this.projectPointToCanvas(a.i0);a.i1=this.projectPointToCanvas(a.i1);a.i2=this.projectPointToCanvas(a.i2);if(!a.isTriangle())a.i3=this.projectPointToCanvas(a.i3);
return a};var W={x:0,y:0,z:1};r.prototype.bufferShape=function(a){var b=this.draw_backfaces,c=this.quad_callback,e=p(this.camera.transform.m,this.transform.m),g;g=e.e0;var d=e.e1,h=e.e2,f=e.e4,j=e.e5,l=e.e6,k=e.e8,m=e.e9,n=e.e10;g=new q(n*j-l*m,l*k-f*n,f*m-k*j,0,h*m-n*d,n*g-h*k,k*d-g*m,0,l*d-h*j,f*h-l*g,g*j-f*d,0);d=S(e,a.vertices);h=a.quads;f=0;for(j=a.quads.length;f<j;++f){var i=h[f];if(!(c!==null&&c(i,f,a)===true)){l=u(e,i.centroid);if(!(l.z>=-1)){k=y(u(g,i.normal1));m=u(g,i.normal2);if(!(b!==
true&&x(l,k)>0&&x(l,m)>0)){n=x(W,k);if(n<0)n=0;i=i.isTriangle()===true?new v(d[i.i0],d[i.i1],d[i.i2],null):new v(d[i.i0],d[i.i1],d[i.i2],d[i.i3]);i.centroid=l;i.normal1=k;i.normal2=m;this.buffered_quads_.push({qf:i,intensity:n,draw_overdraw:this.draw_overdraw,texture:this.texture,fill_rgba:this.fill_rgba,stroke_rgba:this.stroke_rgba,normal1_rgba:this.normal1_rgba,normal2_rgba:this.normal2_rgba})}}}}};r.prototype.drawBackground=function(){this.ctx.fillRect(0,0,this.width_,this.height_)};r.prototype.clearBackground=
function(){this.ctx.clearRect(0,0,this.width_,this.height_)};r.prototype.drawBuffer=function(){var a=this.ctx,b=this.buffered_quads_,c=b.length;this.perform_z_sorting===true&&b.sort(V);for(var e=0;e<c;++e){var g=b[e],d=g.qf;this.projectQuadFaceToCanvasIP(d);var h=d.isTriangle();if(g.draw_overdraw===true){w(d.i0,d.i1);w(d.i1,d.i2);if(h===true)w(d.i2,d.i0);else{w(d.i2,d.i3);w(d.i3,d.i0)}}a.beginPath();a.moveTo(d.i0.x,d.i0.y);a.lineTo(d.i1.x,d.i1.y);a.lineTo(d.i2.x,d.i2.y);h!==true&&a.lineTo(d.i3.x,
d.i3.y);var f=g.fill_rgba;if(f!==null){var j=g.intensity;a.setFillColor(f.r*j,f.g*j,f.b*j,f.a);a.fill()}f=g.texture;if(f!==null){U(a,f.image,d.i0.x,d.i0.y,d.i1.x,d.i1.y,d.i2.x,d.i2.y,f.u0,f.v0,f.u1,f.v1,f.u2,f.v2);h||U(a,f.image,d.i0.x,d.i0.y,d.i2.x,d.i2.y,d.i3.x,d.i3.y,f.u0,f.v0,f.u2,f.v2,f.u3,f.v3)}h=g.stroke_rgba;if(h!==null){a.closePath();a.setStrokeColor(h.r,h.g,h.b,h.a);a.stroke()}h=g.normal1_rgba;g=g.normal2_rgba;if(h!==null){a.setStrokeColor(h.r,h.g,h.b,h.a);h=this.projectPointToCanvas(d.centroid);
f=this.projectPointToCanvas(A(d.centroid,y(d.normal1)));a.beginPath();a.moveTo(h.x,h.y);a.lineTo(f.x,f.y);a.stroke()}if(g!==null){a.setStrokeColor(g.r,g.g,g.b,g.a);h=this.projectPointToCanvas(d.centroid);f=this.projectPointToCanvas(A(d.centroid,y(d.normal2)));a.beginPath();a.moveTo(h.x,h.y);a.lineTo(f.x,f.y);a.stroke()}}return c};r.prototype.drawPath=function(a,b){var c=this.ctx;b=b||{};var e=p(this.camera.transform.m,this.transform.m),g=this.projectPointsToCanvas(S(e,a.points));e=a.starting_point===
null?this.projectPointToCanvas(u(e,{x:0,y:0,z:0})):g[a.starting_point];c.beginPath();c.moveTo(e.x,e.y);e=a.curves;for(var d=0,h=e.length;d<h;++d){var f=e[d];if(f.isQuadratic()===true){var j=g[f.c0];f=g[f.ep];c.quadraticCurveTo(j.x,j.y,f.x,f.y)}else{j=g[f.c0];var l=g[f.c1];f=g[f.ep];c.bezierCurveTo(j.x,j.y,l.x,l.y,f.x,f.y)}}b.fill===true?c.fill():c.stroke()};return{RGBA:t,AffineMatrix:q,Transform:o,QuadFace:v,Shape:function(){this.vertices=[];this.quads=[]},Curve:z,Path:function(){this.points=[];this.curves=
[];this.starting_point=null},Camera:T,TextureInfo:function(){this.v3=this.u3=this.v2=this.u2=this.v1=this.u1=this.v0=this.u0=this.image=null},Renderer:r,Math:{crossProduct:function(a,b){return{x:a.y*b.z-a.z*b.y,y:a.z*b.x-a.x*b.z,z:a.x*b.y-a.y*b.x}},dotProduct2d:function(a,b){return a.x*b.x+a.y*b.y},dotProduct3d:x,subPoints2d:J,subPoints3d:function(a,b){return{x:a.x-b.x,y:a.y-b.y,z:a.z-b.z}},addPoints2d:function(a,b){return{x:a.x+b.x,y:a.y+b.y}},addPoints3d:A,mulPoint2d:K,mulPoint3d:L,vecMag2d:M,vecMag3d:N,
unitVector2d:O,unitVector3d:y,linearInterpolate:function(a,b,c){return(b-a)*c+a},linearInterpolatePoints3d:function(a,b,c){return{x:(b.x-a.x)*c+a.x,y:(b.y-a.y)*c+a.y,z:(b.z-a.z)*c+a.z}},averagePoints:function(a){for(var b={x:0,y:0,z:0},c=0,e=a.length;c<e;++c){var g=a[c];b.x+=g.x;b.y+=g.y;b.z+=g.z}a=1/e;b.x*=a;b.y*=a;b.z*=a;return b}}}}();

// demo_utils.js
var DemoUtils=function(){function r(a,e){if(a<e)return a;return e}function s(a,e){if(a>e)return a;return e}function l(a,e){this.interval_ms_=1E3/a;this.callback_=e;this.t_=0;this.step_=1;this.interval_handle_=null}function t(a,e){var d={first_event:true,is_clicking:false,last_x:0,last_y:0};a.addEventListener("touchstart",function(b){d.is_clicking=true;d.last_x=b.touches[0].clientX;d.last_y=b.touches[0].clientY;b.preventDefault();return false},false);a.addEventListener("touchend",function(b){d.is_clicking=
false;b.preventDefault();return false},false);a.addEventListener("touchmove",function(b){var c=d.last_x-b.touches[0].clientX,g=d.last_y-b.touches[0].clientY;d.last_x=b.touches[0].clientX;d.last_y=b.touches[0].clientY;if(d.first_event)d.first_event=false;else e({is_clicking:d.is_clicking,canvas_x:d.last_x,canvas_y:d.last_y,delta_x:c,delta_y:g,touch:true,shift:false,ctrl:false});b.preventDefault();return false},false)}function p(a,e){function d(c){if(typeof c.offsetX=="number")return{x:c.offsetX,y:c.offsetY};
var g={x:0,y:0},k=c.target,j=k.offsetParent;if(j){g.x+=k.offsetLeft-j.offsetLeft;g.y+=k.offsetTop-j.offsetTop}return{x:c.layerX-g.x,y:c.layerY-g.y}}var b={first_event:true,is_clicking:false,last_x:0,last_y:0};a.addEventListener("mousedown",function(c){var g=d(c);b.is_clicking=true;b.last_x=g.x;b.last_y=g.y;c.preventDefault();return false},false);a.addEventListener("mouseup",function(c){b.is_clicking=false;c.preventDefault();return false},false);a.addEventListener("mouseout",function(c){b.is_clicking=
false;c.preventDefault();return false},false);a.addEventListener("mousemove",function(c){var g=d(c),k=b.last_x-g.x,j=b.last_y-g.y;b.last_x=g.x;b.last_y=g.y;if(b.first_event)b.first_event=false;else e({is_clicking:b.is_clicking,canvas_x:b.last_x,canvas_y:b.last_y,delta_x:k,delta_y:j,shift:c.shiftKey,ctrl:c.ctrlKey});c.preventDefault();return false},false)}function u(a,e){function d(b){e(b.detail?-b.detail:b.wheelDelta/40);b.stopPropagation();b.preventDefault();return false}a.addEventListener("DOMMouseScroll",
d,false);a.addEventListener("mousewheel",d,false)}function m(){this.options_=[]}l.prototype.isRunning=function(){return this.interval_handle_!==null};l.prototype.start=function(){if(!this.isRunning()){var a=this;this.interval_handle_=setInterval(function(){var e=a.callback_;e(a.t_);a.t_+=a.step_},this.interval_ms_)}};l.prototype.stop=function(){if(this.isRunning()){clearInterval(this.interval_handle_);this.interval_handle_=null}};l.prototype.set_t=function(a){this.t_=a};l.prototype.set_step=function(a){this.step_=
a};l.prototype.reverse_step_direction=function(){this.step_=-this.step_};m.prototype.addEntry=function(a,e,d){this.options_.push([a,!!e,d])};m.prototype.populateDiv=function(a){for(var e=this.options_,d=0,b=e.length;d<b;++d){var c=e[d],g=c[0],k=c[1];c=c[2];var j=document.createElement("span");j.style.marginRight="20px";var h=document.createElement("input");h.type="checkbox";if(k)h.checked=true;h.addEventListener("change",c,false);j.appendChild(h);j.appendChild(document.createTextNode(" "+g));a.appendChild(j)}};
m.prototype.createBefore=function(a){var e=document.createElement("div");this.populateDiv(e);a=a.parentNode;a.insertBefore(e,a.firstChild)};return{Ticker:l,registerMouseListener:p,autoCamera:function(a,e,d,b,c,g,k,j,h){function q(){var f=a.camera.transform;f.reset();f.rotateZ(i.rotate_z);f.rotateY(i.rotate_y);f.rotateX(i.rotate_x);f.translate(i.x,i.y,i.z)}function o(f){if(f.is_clicking){if(f.shift&&f.ctrl)a.camera.focal_length=r(10,s(0.05,a.camera.focal_length+f.delta_y*0.01));else if(f.shift){i.z+=
f.delta_y*0.01;if(h.zAxisLimit!==undefined&&i.z>h.zAxisLimit)i.z=h.zAxisLimit}else if(f.ctrl){i.x-=f.delta_x*0.01;i.y-=f.delta_y*0.01}else{i.rotate_y-=f.delta_x*0.01;i.rotate_x-=f.delta_y*0.01}n!=null&&clearTimeout(n);n=setTimeout(function(){n=null;q();f.touch===true?h.touchDrawCallback(false):j()},0)}}var i={rotate_x:c,rotate_y:g,rotate_z:k,x:e,y:d,z:b};h=h!==undefined?h:{};var n=null;p(a.canvas,o);h.touchDrawCallback!==undefined&&t(a.canvas,o);if(h.panZOnMouseWheel===true){var v=h.panZOnMouseWheelScale!==
undefined?h.panZOnMouseWheelScale:30;u(a.canvas,function(f){o({is_clicking:true,canvas_x:null,canvas_y:null,delta_x:0,delta_y:f*v,shift:true,ctrl:false})})}q()},ToggleToolbar:m}}();

// graphycalccalculator.js
var GraphyCalcCalculator=function(){function k(a,c,b,h){return{lbp:c,led:function(g,i){this.left=g;this.right=i.expression(c-b,i);this.type="op_b"+a;return this},nud:function(g){if(h!==1)throw"error in operator nud";this.left=g.expression(70,g);this.type="op_u"+a;return this}}}function l(a){return{type:"value",value:a,led:function(){throw"led called on a value token.";},nud:function(){return this}}}function m(a){return{type:"function",value:a,led:function(){throw"Internal error: led called on a function.";
},nud:function(c){this.left=c.expression(70,c);return this}}}function n(a){return{type:"variable",value:a,led:function(){throw"Internal error: led called on a variable.";},nud:function(){return this}}}function o(a){for(var c=[],b=0,h=a.length,g=/^-?[0-9]+/,i=/^-?(([0-9]+\.[0-9]*)|(\.[0-9]+))/,p=/^[a-zA-Z_][a-zA-Z0-9_]*/;b<h;){var d=a.slice(b),e;switch(d[0]){case "+":case "-":c.push(k(d[0],50,0,1));++b;continue;case "*":case "/":c.push(k(d[0],60,0,0));++b;continue;case "^":c.push(k(d[0],75,1,0));++b;
continue;case ")":c.push({type:")",lbp:0,led:function(){throw"Internal error: led called on ')'";},nud:function(){throw"Internal error: nud called on ')'";}});++b;continue;case "(":c.push({type:"(",lbp:80,led:function(){throw"Interal error, led called on '('";},nud:function(j){var q=j.expression(0,j);if(j.token().type!=")")throw"Unmatched left parenthesis.";j.advance();return q}});++b;continue;case " ":case "\t":case "\r":case "\n":++b;continue;default:}if((e=d.match(i))!==null){c.push(l(parseFloat(e[0])));
b+=e[0].length}else if((e=d.match(g))!==null){c.push(l(parseInt(e[0])));b+=e[0].length}else if((e=d.match(p))!==null){if(e[0]=="x"||e[0]=="y")c.push(n(e[0]));else{d=r[e[0]];if(d!==undefined)c.push(m(d));else{d=s[e[0]];if(d!==undefined)c.push(l(d));else throw"unknown symbol "+e[0];}}b+=e[0].length}else throw"Failed in processing input: "+d;}return c}function t(a){a={tokens:a,i:0,at_end:function(){return this.i>=this.tokens.length},token:function(){if(this.at_end())return{lbp:0,type:"end"};return this.tokens[this.i]},
advance:function(){++this.i},expression:function(c,b){if(!b.at_end()){var h=b.token();b.advance();for(var g=h.nud(b);c<b.token().lbp;){h=b.token();b.advance();g=h.led(g,b)}return g}}};return a.expression(0,a)}function f(a,c,b){if(a===undefined)throw"Error parsing input, probably invalid.";switch(a.type){case "value":return a.value;case "variable":return a.value==="x"?c:b;case "function":return a.value(f(a.left,c,b));case "op_u+":return f(a.left,c,b);case "op_b+":return f(a.left,c,b)+f(a.right,c,b);
case "op_u-":return-f(a.left,c,b);case "op_b-":return f(a.left,c,b)-f(a.right,c,b);case "op_b*":return f(a.left,c,b)*f(a.right,c,b);case "op_b/":return f(a.left,c,b)/f(a.right,c,b);case "op_b^":return Math.pow(f(a.left,c,b),f(a.right,c,b));default:throw"Internal error, unhandled node: "+a.type+" "+a.value;}}var r={abs:Math.abs,acos:Math.acos,asin:Math.asin,atan:Math.atan,ceil:Math.ceil,cos:Math.cos,exp:Math.exp,floor:Math.floor,log:Math.log,round:Math.round,sin:Math.sin,sinc:function(a){return a==
0?1:Math.sin(a)/a},sqrt:Math.sqrt,tan:Math.tan},s={E:Math.E,e:Math.E,pi:Math.PI,PI:Math.PI};return{parse:function(a){return t(o(a))},create_evaluator:function(a){return function(c,b){return f(a,c,b)}}}}();
                                                                                                                     
//graphycalc.js
function start3d(){function v(a,c){if(a<c)return a;return c}function w(a,c){if(a>c)return a;return c}function x(a){for(var c=[],b=3,d=a.length;b<d;b+=1){var e=a.length,g={c0:{x:a[b-1].x/6+a[b-2].x-a[b-3].x/6,y:a[b-1].y/6+a[b-2].y-a[b-3].y/6,z:a[b-1].z/6+a[b-2].z-a[b-3].z/6},c1:{x:a[b].x/-6+a[b-1].x+a[b-2].x/6,y:a[b].y/-6+a[b-1].y+a[b-2].y/6,z:a[b].z/-6+a[b-1].z+a[b-2].z/6}};a.push(g.c0);a.push(g.c1);c.push(new Pre3d.Curve(b-1,e,e+1))}b=new Pre3d.Path;b.points=a;b.curves=c;b.starting_point=1;return b}
function k(a){for(var c=[],b=1,d=a.length;b<d;b+=1)c.push(new Pre3d.Curve(b,b,null));b=new Pre3d.Path;b.points=a;b.curves=c;b.starting_point=0;return b}function l(a){m=[];var c=q?n:0;if(r)for(var b=-1;b<=1;b+=n){for(var d=[],e=-1-c;e<=1+c;e+=n){var g=a(b,e);isFinite(g)&&d.push({x:b,y:v(1E3,w(-1000,g)),z:e})}d.length>=4&&m.push(q===true?x(d):k(d))}if(s)for(e=-1;e<=1;e+=n){d=[];for(b=-1-c;b<=1+c;b+=n){g=a(b,e);isFinite(g)&&d.push({x:b,y:v(1E3,w(-1000,g)),z:e})}d.length>=4&&m.push(q===true?x(d):k(d))}y=
m.length}function z(){h.clearBackground();h.ctx.setStrokeColor(0.4,0.4,0.4,1);for(var a=0;a<C;++a)h.drawPath(A[a])}function f(){z();h.ctx.setStrokeColor(t.r,t.g,t.b,t.a);for(var a=0;a<y;++a)h.drawPath(m[a])}function o(a,c){j=GraphyCalcCalculator.create_evaluator(GraphyCalcCalculator.parse(a));l(j);if(c===true)window.location.hash=encodeURI(a)}var p=document.getElementById("canvas"),h=new Pre3d.Renderer(p),u="sinc(x * 10) * sinc(y * 10)",j=null,s=true,r=true,q=true,n=0.05,B=document.location.hash.slice(1);
if(B.length!==0)u=decodeURI(B);var m=null,y=null,A=[k([{x:-1,y:0,z:0},{x:0,y:0,z:0},{x:1,y:0,z:0}]),k([{x:0,y:-1,z:0},{x:0,y:0,z:0},{x:0,y:1,z:0}]),k([{x:0,y:0,z:-1},{x:0,y:0,z:0},{x:0,y:0,z:1}])],C=A.length,t=new Pre3d.RGBA(109/255,194/255,237/255,1);h.ctx.lineWidth=0.7;p.addEventListener("touchend",function(){setTimeout(function(){f()},50)},false);h.camera.focal_length=2.5;DemoUtils.autoCamera(h,0,0,-3,0.5,0.5,0,f,{panZOnMouseWheel:true,panZOnMouseWheelScale:5,zAxisLimit:-1,touchDrawCallback:z});
o(u,false);f();var i=document.getElementById("equationinput");i.value=u;i.addEventListener("change",function(){try{o(this.value,true);f()}catch(a){}},false);document.getElementById("radio_xy").checked=true;document.getElementById("radio_xy").addEventListener("click",function(){s=r=true;l(j);f()},false);document.getElementById("radio_x").addEventListener("click",function(){s=true;r=false;l(j);f()},false);document.getElementById("radio_y").addEventListener("click",function(){s=false;r=true;l(j);f()},
false);p=document.getElementById("smoothcheck");p.checked=true;p.addEventListener("click",function(){q=this.checked;l(j);f()},false);document.getElementById("ex_sinc").addEventListener("click",function(a){i.value=u;o(i.value,true);f();a.preventDefault();return false},false);document.getElementById("ex_exp").addEventListener("click",function(a){i.value="exp(-(x*3)^2)/3 + exp(-(y*3)^2)/3";o(i.value,true);f();a.preventDefault();return false},false);document.getElementById("ex_dome").addEventListener("click",
function(a){i.value="sqrt(1 - x^2 - y^2)";o(i.value,true);f();a.preventDefault();return false},false);document.getElementById("helplink").addEventListener("click",function(a){var c=document.getElementById("help");if(c.style.display!=="block"){c.style.display="block";a.target.innerHTML="Hide Help"}else{c.style.display="none";a.target.innerHTML="Help"}a.preventDefault();return false},false)};start3d();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="description" content="GraphyCalc is a 3d graphing calculator, allowing you to interactively explore graphs of 3-dimensional functions/formulas." /> 
<title>GraphyCalc - 3d Graphing Calculator</title> 
<link rel="icon" type="image/png" href="/attach/favicon-3.ico" /> 
</head> 
 
<body> 
 
<div id="mainContent"> 
<div id="sidebar"> 
  <div><a href="/"><img src="/attach/graphycalc.png" width="346" height="75" alt="GraphyCalc" /></a></div> 
<div><span class="sidebarLinkbar"><a href="#" id="helplink">Help</a></span></div> 
<div><input id="equationinput" value="Loading..." /></div> 
<div><span class="sidebarHalfCell"><input id="smoothcheck" type="checkbox" /><label for="smoothcheck">smooth curves</label></span><span class="xyRadios"><input type="radio" id="radio_xy" name="xyradios" /><label for="radio_xy">xy</label></span><span class="xyRadios"><input type="radio" id="radio_x" name="xyradios" /><label for="radio_x">x</label></span><span class="xyRadios"><input type="radio" id="radio_y" name="xyradios" /><label for="radio_y">y</label></span></div> 
<div id="help"><p>GraphyCalc is a 3d graphing calculator, allowing you to
interactively explore 3d functions.</p> 
<p><b>Examples</b>:
<a href="#" id="ex_sinc">sinc</a> 
<a href="#" id="ex_exp">exp</a> 
<a href="#" id="ex_dome">dome</a> 
</p> 
<p>Nerdy Details: The formula you supply calculates the height <i>z</i> from the variables <i>x</i> and <i>y</i> between <i>-1</i> and <i>1</i>.  Formulas are composed of arithmetic operators (<i style="white-space: nowrap">+ - * / ^</i>), built-in functions (<i>abs acos asin atan ceil cos exp floor log round sin sinc sqrt tan</i>), and constants (<i>E PI</i>).</p> 
</div> 
 
</div> 
 
<div class="canvasDiv"> 
<canvas id="canvas" width="800" height="600"> 
  <div id="nocanvas"> 
    <p class="centeredBlock" style="margin-top: 10em"> 
    GraphyCalc is a 3d graphing calculator, allowing you to interactively
    explore graphs of 3d functions.  This experience is built using some modern
    web technology that your browser unfortunately does not support.  But don't
    give up yet, you have several great ways to join the cutting edge.
    <br /><br /> 
    <a href="http://www.google.com/chrome">Google Chrome</a><br /> 
    <a href="http://www.apple.com/safari/">Apple Safari</a><br /> 
    <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br /> 
    <a href="http://www.opera.com/">Opera</a><br /> 
    </p> 
  </div> 
</canvas> 
</div> 
 
 
<div class="footer">Brought to you by <a href="http://www.deanmcnamee.com/">Dean McNamee</a>, © 2010.  Powered by <a href="http://deanm.github.com/pre3d/">Pre3d</a>.</div> 
</div> 
 
</body> 
</html>

body {
    background-color: #f8f8f8;
    margin: 0px 0px 0px 0px;
  }
  body * {
    font-family: sans-serif;
    font-size: 14px;
    color: #444;  /* Soften the text a bit. */
  }
  input#equationinput {
    margin-bottom: 5px;
    padding: 1px 1px 1px 1px;
    width: 344px;
    border: solid 1px #e0e0e0;
    color: black; /* Make the input most prominent. */
  }
  div#sidebar {
    float: left;
    width: 348px; /* 348 / 2 = 174  348 / 4 = 87  348 / 3 = 116 */
    margin-right: 20px;
  }
  div#sidebar img {
    display: block; /* Grr, descender space under it normally when inline. */
    margin-left: 1px;  /* The logo is 346, center it within 348. */
    border: 0px;
  }
  span.xyRadios {
    display: inline-block;
    width: 58px;  /* 174 / 3 */
    margin: 0px;
    padding: 0px;
    margin-bottom: 5px; /* kinda dirty, should put it on the div. */
  }
  span.xyRadios label {
    margin-left: 3px;
  }
  span.sidebarHalfCell {
    display: inline-block;
    margin-left: 3px; /* Match the radios margin. */
    width: 171px;
  }
  span.sidebarLinkbar {
    display: inline-block;
    margin-right: 3px; /* Match sidebarHalfCell. */
    width: 345px;
    text-align: right;
  }
  span.sidebarLinkbar a {
    font-size: 10pt;
  }
  div#help {
    display: none;
    padding: 0 5px;
    border: dashed 1px #e0e0e0;
    margin-bottom: 10px;
  }
  div#help * {
    font-size: 10pt;
  }
  canvas#canvas, div#nocanvas {
    border: solid 1px #e0e0e0;
  }
  div#nocanvas {
    width: 800px;
    height: 600px;
    display: inline-block;
  }
  div#nocanvas a {
    margin-left: 10px;
  }
  div.centeredText {
    text-align: center;
  }
  p.centeredBlock {
    margin-left: auto;
    margin-right: auto;
    width: 34em;
  }
  div.footer, div.footer a {
    clear: both;
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
  }
  div#mainContent {
    margin: 8px 8px 8px 8px;
  }

Pop out