<html>
<head><title>Interactive Mandelbrot Fractal Using HTML5 Canvas</title></head>
<body>
<canvas id="canvas" width="512" height="512">
Your browser does not support HTML5 Canvas.
</canvas>
<br>
<b>Keys:</b>
<br>
<b>+: zoom in</b>
<br>
<b>-: zoom out</b>
<br>
<b>a: move left</b>
<br>
<b>d: move right</b>
<br>
<b>w: move up</b>
<br>
<b>s: move down</b>
<script type="text/javascript">
// FB36 - 201706050 (0:Monday)
// Tested only using Firefox
document.onkeypress = function(evt)
{
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
var p = 0.1; // 10 percent
var d = 0.0;
// zoom in
if(charStr == '+')
{
d = (xmax - xmin) * p;
xmin = xmin + d;
xmax = xmax - d;
d = (ymax - ymin) * p;
ymin = ymin + d;
ymax = ymax - d;
};
// zoom out
if(charStr == '-')
{
d = (xmax - xmin) * p;
xmin = xmin - d;
xmax = xmax + d;
d = (ymax - ymin) * p;
ymin = ymin - d;
ymax = ymax + d;
};
// move left
if(charStr == 'a')
{
d = (xmax - xmin) * p;
xmin = xmin - d;
xmax = xmax - d;
};
// move right
if(charStr == 'd')
{
d = (xmax - xmin) * p;
xmin = xmin + d;
xmax = xmax + d;
};
// move up
if(charStr == 'w')
{
d = (ymax - ymin) * p;
ymin = ymin - d;
ymax = ymax - d;
};
// move down
if(charStr == 's')
{
d = (ymax - ymin) * p;
ymin = ymin + d;
ymax = ymax + d;
};
DrawMandelbrotFractal(xmin, xmax, ymin, ymax, mr0, mr1, mg0, mg1, mb0, mb1);
};
function DrawMandelbrotFractal(xmin, xmax, ymin, ymax, mr0, mr1, mg0, mg1, mb0, mb1)
{
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var xr = context.canvas.width;
var yr = context.canvas.height;
var imgd = context.createImageData(xr, yr);
var pix = imgd.data;
var maxIt = 256;
var x = 0.0; var y = 0.0;
var zx = 0.0; var zx0 = 0.0; var zy = 0.0;
var zx2 = 0.0; var zy2 = 0.0;
for (var ky = 0; ky < yr; ky++)
{
y = ymin + (ymax - ymin) * ky / yr;
for(var kx = 0; kx < xr; kx++)
{
x = xmin + (xmax - xmin) * kx / xr;
zx = x; zy = y;
for(var i = 0; i < maxIt; i++)
{
zx2 = zx * zx; zy2 = zy * zy;
if(zx2 + zy2 > 4.0) break;
zx0 = zx2 - zy2 + x;
zy = 2.0 * zx * zy + y;
zx = zx0;
}
var p = (xr * ky + kx) * 4;
pix[p] = i % mr0 * mr1; // red
pix[p + 1] = i % mg0 * mg1; // green
pix[p + 2] = i % mb0 * mb1; // blue
pix[p + 3] = 255; // alpha
}
}
context.putImageData(imgd, 0, 0);
}
// main
var xmin = -2.0; var xmax = 1.0;
var ymin = -1.5; var ymax = 1.5;
// these are for coloring the image
var mr0 = 0; var mg0 = 0; var mb0 = 0;
while(mr0 == mg0 || mr0 == mb0 || mg0 == mb0)
{
mr0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
mg0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
mb0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
}
var mr1 = 256 / mr0; var mg1 = 256 / mg0; var mb1 = 256 / mb0;
DrawMandelbrotFractal(xmin, xmax, ymin, ymax, mr0, mr1, mg0, mg1, mb0, mb1);
</script>
</body>
</html>
