Interactive Mandelbrot Fractal Using HTML5 Canvas.
(Download and save as html file and open it.)
(Tested only using Firefox browser.)
JavaScript, 145 lines
Download
Copy to clipboard1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <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>
|
