danbarber/canvas
1
0
Fork 0
mirror of https://github.com/danbee/canvas synced 2025-03-04 08:39:08 +00:00
Code Issues Releases Wiki Activity

Moved processing to background worker. Added some shading.

Browse Source
This commit is contained in:
Dan Barber 2012-08-21 20:51:48 +01:00
parent fabc2d3354
commit 3d1a985600
2 changed files with 57 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
mandelbrot.html
View File

@ -2,11 +2,16 @@
<html>
<head>
<title>Mandelbrot</title>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<style>
body {
position: relative;
text-align: center;
}
button {
position: absolute;
top: 5px;
left: 5px;
}
canvas {
width: 640px;
height: 640px;
@ -14,38 +19,29 @@
</style>
</head>
<body>
<canvas id="mandelbrot" width="1280" height="1280" />
<canvas id="mandelbrot" width="1280" height="1280">
<script type="text/javascript">
(function() {
var canvas = document.getElementById('mandelbrot');
var context = canvas.getContext('2d');
var canvas = document.getElementById('mandelbrot');
var context = canvas.getContext('2d');
max_i = 200;
context.fillStyle = 'black';
for (n = 0; n <= 1279; n++) {
for (m = 0; m <= 1279; m++) {
x0 = (n - 639) / 320;
y0 = (m - 639) / 320;
i = 0;
x = 0;
y = 0;
while (x * x + y * y < 2 * 2 && i < max_i) {
xtemp = x * x - y * y + x0
y = 2 * x * y + y0
x = xtemp
i++
}
if (i % 2 == 0) {
context.fillRect(n, m, 1, 1);
}
}
worker = new Worker("mandelbrot.js");
worker.addEventListener('message', function(e) {
// console.log("Plot: " + e.data.x + ", " + e.data.y);
if (e.data.i == 0) {
a = 1;
}
else {
a = e.data.i / 100
}
context.fillStyle = "rgba(0, 0, 0, " + a + ")";
console.log(context.fillStyle);
context.fillRect(e.data.x, e.data.y, 1, 1);
}, false);
worker.postMessage("");
})();
</script>

34
mandelbrot.js Normal file
View File

@ -0,0 +1,34 @@
drawMandelbrot = function(e) {
max_i = 100;
for (m = 0; m <= 1279; m++) {
for (n = 0; n <= 1279; n++) {
x0 = (n - 639) / 320;
y0 = (m - 639) / 320;
i = 0;
x = 0;
y = 0;
while (x * x + y * y < 2 * 2 && i < max_i) {
xtemp = x * x - y * y + x0
y = 2 * x * y + y0
x = xtemp
i++
}
if (i == max_i) {
i = 0
}
e.postMessage({x: n, y: m, i: i});
}
}
};
self.addEventListener('message', function(e) {
drawMandelbrot(self);
});