Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
graphing calculator using html5 canvas and web workers
var sin = Math.sin;
var cos = Math.cos;
var tan = Math.tan;
var ln = Math.log;
var log = Math.LOG10E;
var pi = Math.PI;
onmessage = function (event) {
var n = event.data;
var p = [];
var a = -100*pi;
var b = 100*pi;
var dx = (b-a)/(pi*10000);
limits = [a,b];
var i = 0;
for(var x = 0; x < (b-a); x+=dx) {
p[i++] = [f(x+a),g(x+a)];
}
postMessage(p);
}
function f(x) {
return (cos(x/100)+cos(x))*1000/pi/2;
}
function g(x) {
return (sin(x/100)+sin(x))*1000/pi/2;
}
<!DOCTYPE html>
<html>
<title>Worker</title>
<style type="text/css">
html, body {
padding: 10px;
margin: 0;
}
</style>
<body>
<script type="text/javascript">
var w = new Worker('calculator.js');
var wi,hi;
draw(0);
function draw(n) {
w.postMessage(n);
/*if(n<10) {
n+=1;
w.postMessage(n);
setTimeout("draw("+n+")",250);
}*/
}
w.onmessage = function (event) {
var p = event.data;
p[p.length] = p[p.length-1];
var canvas = document.createElement('canvas');
canvas.height = hi = window.innerHeight-50;
canvas.width = wi = window.innerWidth-50;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
for(var i = 0; i < p.length; i++) {
var p1 = transform(p[i]);
var p2 = (p[i+1])?transform(p[i+1]):p1;
context.moveTo(p1[0],p1[1]);
context.lineTo(p2[0],p2[1]);
}
context.strokeStyle = "rgb(50,100,55)";
context.stroke();
context.save();
}
function transform(p) {
x = wi/2 + p[0];
y = hi/2 - p[1];
return [x,y];
}
</script>
</body>
</html>
@sbussard

This comment has been minimized.

Copy link
Owner Author

@sbussard sbussard commented Feb 27, 2011

fun shape:

function f(x) { return (cos(x/100+cos(x)))*1000/pi/2; }
function g(x) { return (sin(x/100+sin(x)))*1000/pi/2; }

@sbussard

This comment has been minimized.

Copy link
Owner Author

@sbussard sbussard commented Feb 27, 2011

function f(x) { return (cos(x/100+cos(x))+cos(x))*1000/pi/2; }
function g(x) { return (sin(x/100+sin(x))+cos(x))*1000/pi/2; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.