Mandelbrot set is a mathematical set of points whose boundary is a distinctive and easily recognizable two-dimensional fractal shape. The Mandelbrot set is defined over the complex number plane. The definition of the Mandelbrot set is simple but the structure of the set is really complex and beautiful.
Mandelbrot Set Overview
Mandelbrot set is defined mathematically as the set of values of c in the complex plane for which the orbit of 0 under iteration of the complex quadratic polynomial zn+1 = zn2 + c remains bounded. That is, a complex number c is part of the Mandelbrot set if, when starting with z0 = 0 and applying the iteration repeatedly, the absolute value of zn remains bounded however large n gets.
Below is the structure of the Mandelbrot set that is generated using our application.
Mandelbrot Set
HTML 5 Canvas Overview
HTML5 is the latest version of the standard HTML. It comes with new cool element, Canvas that allows you to draw directly and manipulate every single pixels in the canvas. A canvas is a rectangular area on an HTML page, and it is specified with the [cci]
We’ll not cover all the definition of cool function in the canvas. There are documentation of those over the web. We only give an attention to several functions that will be used in our tutorial.
Every canvas element has a graphics context that will be used to modify the pixel on the canvas. We’ll use [cci]2d[/cci] context. To get the context, use [cci]getContext[/cci] function of the canvas object.
[sourcecode lang=”javascript”]
var canvas = document.getElementById(‘thecanvas’);
var ctx = canvas.getContext(‘2d’);
[/sourcecode]
The above code assumes that we have defined a canvas element which id [cci]thecanvas[/cci].
[sourcecode lang=”javascript”]
<canvas id="thecanvas" width="500" height="500"></canvas>
[/sourcecode]
Our requirement is to get all the pixels data of the canvas and modify the color of the pixels. To get all pixels data, use [cci]getImageData[/cci] function of the context. The function has 4 arguments [cci]x[/cci],[cci]y[/cci],[cci]width[/cci] and [cci]height[/cci]. [cci]x[/cci] and [cci]y[/cci] arguments define the square top left position from which the pixels will be taken. [cci]width[/cci] and [cci]height[/cci] define the dimension of the square.
[sourcecode lang=”javascript”]
var imageData = ctx.getImageData(0, 0, 100, 100);
var pixels = imageData.data;
[/sourcecode]
The variable [cci]pixels[/cci] above contains 100×100=10.000 pixels that is save in 1 dimension array. 1 pixels have 4 elements, red,green,blue and alpha component. So [cci]pixels[/cci] variable has 10.000×4 = 40.000 elements. 1 element pixel is an integer from 0 to 255.
We now can modify the pixels data. After the pixels have been modified, we must put the pixels back to canvas in order to our modification takes effect.
[sourcecode lang=”javascript”]
ctx.putImageData(imageData, 0, 0);
[/sourcecode]
Drawing Mandelbrot Set on HTML 5 Canvas
Javascript doesn’t provides built in complex number data type. So, we have to define our complex number data type. For simplicity of the tutorial, we will represent any complex number in javascript object with two properties. The [cci]x[/cci] property represents the real part and [cci]y[/cci] property represents the imaginary part.
[sourcecode lang=”javascript”]
//define complex data type
var Complex = function(x, y) {
this.x = x; // real part
this.y = y; // imaginary part
};
//define new complex number 1+2i
var complex = new Complex(1,2);
[/sourcecode]
We have now a simple complex number data type for our application. Before we start to code, remember from above explanation. The mandelbrot definition requires to use two operation on complex number. We’ll not define all number operations in complex number, but we’ll create only two operations, multiplication and addition that will be used in generating mandelbrot set.
[sourcecode lang=”javascript”]
//define two complex number
var a = 1, b = 2, c = 3, d = 4;
var complex1 = new Complex(a,b);
var complex1 = new Complex(c,d);
//add complex1 and complex1 will result
var addition = new Complex(a+c, b+d);
//multiply complex1 and complex 2 will result
var multiplication = new Complex(a*c – b*d, b*c + a*d);
[/sourcecode]
The Mandelbrot Set Drawing Algorithm
We’ll use different approach from mandelbrot set definition to visualize the set. Rather than finding all complex numbers [cci]c[/cci] which is bounded, our goal is to colorize all of the pixels in the canvas based on number of iterations. This will result great visualization for mandelbrot set.
Step by Step Mandelbrot Set Drawing
- Define user interface. Our application will has simple user interface. It’ll contains color scheme selection box, a button and the canvas.
Mandelbrot Generator Simple User Interface
Below is HTML tags that defines our simple user interface.
[sourcecode lang=”html”]
<html>
<head>
<title>Drawing Mandelbrot set on HTML5 graphics canvas</title>
</head>
<body onload="setupCanvas();">
<div style="margin:0 auto;width:505px;padding-top:10px;">
<div>Color Scheme:
<select id="scheme">
<option value="1" selected>Color Scheme 1</option>
<option value="2">Color Scheme 2</option>
<option value="3">Color Scheme 3</option>
<option value="4">Color Scheme 4</option>
<option value="5">Color Scheme 5</option>
<option value="6">Color Scheme 6</option>
</select>
<input type="button" value="Render" id="render_btn" onclick="render()"/>
Scroll your mouse on the canvas to zoomin/zoomout
</div>
<canvas style="border:1px solid;" id="thecanvas" width="500" height="500"></canvas>
</div>
</body>
</html>
[/sourcecode]
After the html page is loaded, immediately we call javascript function [cci]setupCanvas[/cci]. This function will checks whether the browser support html5 canvas then get canvas’s drawing context and save it as global variable [cci]ctx[/cci]. We’ll use the context to modify each pixels on the canvas.
- Define [cci]setupCanvas[/cci] function.
[sourcecode lang=”javascript”]
var setupCanvas = function() {
canvas = document.getElementById(‘thecanvas’);
setupMouseListener();if (!canvas.getContext) {
alert("I’m sorry, seems your browser not support HTML 5, try another browser.");
return;
}// get drawing context
ctx = canvas.getContext(‘2d’);
};
[/sourcecode] - Define render function.
In this function we get the selected color scheme in the selection box. Save the canvas size as global variables then define the scaling ratio from canvas coordinats to mandelbrot coordinats.
[sourcecode lang=”javascript”]
var render = function() {
if (!canvas.getContext) return;
//get color scheme
var a = document.getElementById(‘scheme’);
colorScheme = parseInt((a.value || a.options[a.selectedIndex].value));
//save canvas size into variable
cw = canvas.width;
ch = canvas.height;
//define scaling ratio from canvas coordinat to mandlebort coordinat
scaleX = (mx[1] – mx[0])/cw;
scaleY = (my[1] – my[0])/ch;
drawMandlebrot();
};
[/sourcecode]
- Define the [cci]drawMandelbrot[/cci] function.
In this function, we iterate to each pixels in the canvas and find the iteration for each pixels then color the pixel based on number iterations.[sourcecode lang=”javascript”]
var drawMandlebrot = function() {
if(isDrawing) return;isDrawing = true;
var imageData = ctx.getImageData(0, 0, cw, ch);
pixels = imageData.data;for(var x = 0; x < cw; x++) {
for(var y = 0; y < ch; y++) {
iteration = 0;
// scale canvas coordinat to mandlebrot complex coordinat
var x0 = scaleX*x + mx[0], y0 = scaleY*y + my[0];
// define complex number c
var c = new Complex(x0, y0), z = new Complex(0, 0);while(iteration < maxIteration) { // check if z still inbound if(z.x*z.x + z.y*z.y >= 2*2) {
break;
}// multiply z and z
z = new Complex(z.x*z.x – z.y*z.y, z.y*z.x + z.x*z.y);
// add z and c
z = new Complex(z.x+c.x, z.y+c.y);
// inrease iteration
iteration++;
}// colorize current pixel
setPixelColor(x, y, iteration);
}
}ctx.putImageData(imageData, 0, 0);
isDrawing = false;
};
[/sourcecode] - Define [cci]setPixelColor[/cci]
This function will color the current pixels and get the color from [cci]getColor[/cci] function. [cci]getColor[/cci] function will generate a color based on number of iteration and selected color scheme.[sourcecode lang=”javascript”]
var getColor = function(i) {
i /= maxIteration;
var cr = 0.0;
var cg = 0.0;
var cb = 0.0;switch(colorScheme) {
case 1:
if (i >= 0.66) cr = i;
else if (i >= 0.33) cg = i;
else cb = i;
break;
case 2:
if (i >= 0.66) cr = i;
else if (i >= 0.33) cb = i;
else cg = i;
break;
case 3:
if (i >= 0.66) cb = i;
else if (i >= 0.33) cg = i;
else cr = i;
break;
case 4:
if (i >= 0.66) cg = i;
else if (i >= 0.33) cr = i;
else cb = i;
break;
case 5:
if (i >= 0.66) cg = i;
else if (i >= 0.33) cb = i;
else cr = i;
break;
case 6:
if (i >= 0.66) cb = i;
else if (i >= 0.33) cr = i;
else cg = i;
break;
};var r = parseInt(cr * 3 * maxColor);
var g = parseInt(cg * 3 * maxColor);
var b = parseInt(cb * 3 * maxColor);
return [r, g, b];
};
var setPixelColor = function(x, y, i) {
var c = getColor(i);
var off = 4 * (y * cw + x);
pixels[off] = c[0]; //red
pixels[off + 1] = c[1]; //green
pixels[off + 2] = c[2]; //blue
pixels[off + 3] = 255; //alpha
};
[/sourcecode] - Finally, add the zoom capability.
[sourcecode lang=”javascript”]
var mouseWheelHandler = function(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
// get delta scroll
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//get mouse position
var mousePos = getMousePos(e);// scale canvas coordinat to mandlebrot complex coordinat
var x0 = scaleX*mousePos.x + mx[0], y0 = scaleY*mousePos.y + my[0];//scale the mandelbrot coordinat size
var scale = 1 – delta*zoomScale;
var sizeX = (mx[1]-mx[0])*scale;
var sizeY = (my[1]-my[0])*scale;// redefine mandelbrot boundaries
mx = [x0-sizeX/2, x0+sizeX/2];
my = [y0-sizeY/2, y0+sizeY/2];
render();
};
var getMousePos = function(evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX – rect.left,
y: evt.clientY – rect.top
};
};
[/sourcecode]
Final Source Code
[sourcecode lang=”javascript”]
<html>
<head>
<title>Drawing Mandelbrot set on HTML5 graphics canvas</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20var%20canvas%2C%20ctx%3B%0A%20%20%20%20%20%20%20%20var%20iteration%2C%20maxIteration%20%3D%20100%2C%20maxColor%20%3D%20255%3B%0A%20%20%20%20%20%20%20%20var%20cw%2C%20ch%2C%20scaleX%2C%20scaleY%3B%0A%20%20%20%20%20%20%20%20var%20zoomScale%20%3D%200.3%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2F%20color%20schemes%0A%20%20%20%20%20%20%20%20var%20colorScheme%20%3D%201%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2Fdefine%20mandlebort%20boundaries%0A%20%20%20%20%20%20%20%20var%20mx%20%3D%20%5B-2%2C2%5D%2C%20my%20%3D%20%5B-2%2C2%5D%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20hold%20all%20pixels%20image%20data%0A%20%20%20%20%20%20%20%20var%20pixels%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20isDrawing%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2Fdefine%20complex%20data%20type%0A%20%20%20%20%20%20%20%20var%20Complex%20%3D%20function(x%2C%20y)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20this.x%20%3D%20x%3B%20%2F%2F%20real%20part%0A%20%20%20%20%20%20%20%20%20%20%20%20this.y%20%3D%20y%3B%20%2F%2F%20imaginary%20part%0A%20%20%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20setupCanvas%20%3D%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20canvas%20%3D%20document.getElementById(‘thecanvas’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20setupMouseListener()%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(!canvas.getContext)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22I’m%20sorry%2C%20seems%20your%20browser%20not%20support%20HTML%205%2C%20try%20another%20browser.%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20get%20drawing%20context%0A%20%20%20%20%20%20%20%20%20%20%20%20ctx%20%3D%20canvas.getContext(‘2d’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20render()%3B%0A%20%20%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20render%20%3D%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(!canvas.getContext)%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fget%20color%20scheme%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20a%20%3D%20document.getElementById(‘scheme’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20colorScheme%20%3D%20parseInt((a.value%20%7C%7C%20a.options%5Ba.selectedIndex%5D.value))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fsave%20canvas%20size%20into%20variable%0A%20%20%20%20%20%20%20%20%20%20%20%20cw%20%3D%20canvas.width%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20ch%20%3D%20canvas.height%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fdefine%20scaling%20ratio%20from%20canvas%20coordinat%20to%20mandlebort%20coordinat%0A%20%20%20%20%20%20%20%20%20%20%20%20scaleX%20%3D%20(mx%5B1%5D%20-%20mx%5B0%5D)%2Fcw%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20scaleY%20%3D%20(my%5B1%5D%20-%20my%5B0%5D)%2Fch%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20drawMandlebrot()%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20drawMandlebrot%20%3D%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(isDrawing)%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20isDrawing%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20imageData%20%3D%20ctx.getImageData(0%2C%200%2C%20cw%2C%20ch)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20pixels%20%3D%20imageData.data%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20x%20%3D%200%3B%20x%20%3C%20cw%3B%20x%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20y%20%3D%200%3B%20y%20%3C%20ch%3B%20y%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iteration%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20scale%20canvas%20coordinat%20to%20mandlebrot%20complex%20coordinat%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20×0%20%3D%20scaleX*x%20%2B%20mx%5B0%5D%2C%20y0%20%3D%20scaleY*y%20%2B%20my%5B0%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20define%20complex%20number%20c%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20c%20%3D%20new%20Complex(x0%2C%20y0)%2C%20z%20%3D%20new%20Complex(0%2C%200)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20while(iteration%20%3C%20maxIteration)%20%7B%20%2F%2F%20check%20if%20z%20still%20inbound%20if(z.x*z.x%20%2B%20z.y*z.y%20%3E%3D%202*2)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20multiply%20z%20and%20z%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20z%20%3D%20new%20Complex(z.x*z.x%20-%20z.y*z.y%2C%20z.y*z.x%20%2B%20z.x*z.y)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20add%20z%20and%20c%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20z%20%3D%20new%20Complex(z.x%2Bc.x%2C%20z.y%2Bc.y)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20inrease%20iteration%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iteration%2B%2B%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20colorize%20current%20pixel%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setPixelColor(x%2C%20y%2C%20iteration)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20ctx.putImageData(imageData%2C%200%2C%200)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20isDrawing%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20getColor%20%3D%20function(i)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20i%20%2F%3D%20maxIteration%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20cr%20%3D%200.0%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20cg%20%3D%200.0%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20cb%20%3D%200.0%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20switch(colorScheme)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%201%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%202%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%203%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%204%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%205%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20case%206%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(i%20%3E%3D%200.66)%20cb%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20if%20(i%20%3E%3D%200.33)%20cr%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20cg%20%3D%20i%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20r%20%3D%20parseInt(cr%20*%203%20*%20maxColor)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20g%20%3D%20parseInt(cg%20*%203%20*%20maxColor)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20b%20%3D%20parseInt(cb%20*%203%20*%20maxColor)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%5Br%2C%20g%2C%20b%5D%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20setPixelColor%20%3D%20function(x%2C%20y%2C%20i)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20c%20%3D%20getColor(i)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20off%20%3D%204%20*%20(y%20*%20cw%20%2B%20x)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20pixels%5Boff%5D%20%3D%20c%5B0%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20pixels%5Boff%20%2B%201%5D%20%3D%20c%5B1%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20pixels%5Boff%20%2B%202%5D%20%3D%20c%5B2%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20pixels%5Boff%20%2B%203%5D%20%3D%20255%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20setupMouseListener%20%3D%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(canvas.addEventListener)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20IE9%2C%20Chrome%2C%20Safari%2C%20Opera%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20canvas.addEventListener(%22mousewheel%22%2C%20mouseWheelHandler%2C%20false)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Firefox%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20canvas.addEventListener(%22DOMMouseScroll%22%2C%20mouseWheelHandler%2C%20false)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20IE%206%2F7%2F8%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20canvas.attachEvent(%22onmousewheel%22%2C%20mouseWheelHandler)%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20mouseWheelHandler%20%3D%20function(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20cross-browser%20wheel%20delta%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20e%20%3D%20window.event%20%7C%7C%20e%3B%20%2F%2F%20old%20IE%20support%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20get%20delta%20scroll%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20delta%20%3D%20Math.max(-1%2C%20Math.min(1%2C%20(e.wheelDelta%20%7C%7C%20-e.detail)))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fget%20mouse%20position%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20mousePos%20%3D%20getMousePos(e)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20scale%20canvas%20coordinat%20to%20mandlebrot%20complex%20coordinat%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20×0%20%3D%20scaleX*mousePos.x%20%2B%20mx%5B0%5D%2C%20y0%20%3D%20scaleY*mousePos.y%20%2B%20my%5B0%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fscale%20the%20mandelbrot%20coordinat%20size%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20scale%20%3D%201%20-%20delta*zoomScale%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sizeX%20%3D%20(mx%5B1%5D-mx%5B0%5D)*scale%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sizeY%20%3D%20(my%5B1%5D-my%5B0%5D)*scale%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20redefine%20mandelbrot%20boundaries%0A%20%20%20%20%20%20%20%20%20%20%20%20mx%20%3D%20%5Bx0-sizeX%2F2%2C%20×0%2BsizeX%2F2%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20my%20%3D%20%5By0-sizeY%2F2%2C%20y0%2BsizeY%2F2%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20render()%3B%0A%20%20%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20getMousePos%20%3D%20function(evt)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20rect%20%3D%20canvas.getBoundingClientRect()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20evt.clientX%20-%20rect.left%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3A%20evt.clientY%20-%20rect.top%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body onload="setupCanvas();">
<div style="margin:0 auto;width:505px;padding-top:10px;">
<div>Color Scheme:
<select id="scheme">
<option value="1" selected>Color Scheme 1</option>
<option value="2">Color Scheme 2</option>
<option value="3">Color Scheme 3</option>
<option value="4">Color Scheme 4</option>
<option value="5">Color Scheme 5</option>
<option value="6">Color Scheme 6</option>
</select>
<input type="button" value="Render" id="render_btn" onclick="render()"/>
Scroll your mouse on the canvas to zoomin/zoomout
</div>
<canvas style="border:1px solid;" id="thecanvas" width="500" height="500"></canvas>
</div>
</body>
</html>
[/sourcecode]
0 Comments