Kirjoittaja: peran
Kirjoitettu: 08.03.2014 – 10.03.2014
Tagit: algoritmit, grafiikka, matematiikka, koodi näytille, vinkki
Tämä koodi piirtää JavaScriptilla Mandelbrotin fraktaalin HTML5:n Canvas-elementille.
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=620" />
<title>Demo: Mandelbrot HTML5-päivitys glaze/biomassan koodiin</title>
</head>
<body>
<canvas width="240" height="240" id="example"></canvas>
<script>
function mandelbrot(canvas, x1, y1, x2, y2) {
var r = new Array(64);
var g = new Array(64);
var b = new Array(64);
var h = canvas.height; // kuvion korkeus ja leveys
var w = canvas.width;
var imgd;
var ctx = canvas.getContext("2d"); // Otetaan kynä käteen
if (ctx.createImageData) { // Pistematriisina
imgd = ctx.createImageData(w, h);
} else if (ctx.getImageData) {
imgd = ctx.getImageData(0, 0, w, h);
} else {
imgd = {'width': w, 'height': h, 'data': new Array(w * h * 4)};
}
for (var i = 0; i < 64; i++) { // määritellään väripaletti
r[i] = 85 * ((i & 1) + (i & 8) / 4);
g[i] = 85 * ((i & 2) + (i & 16) / 4) / 2;
b[i] = 85 * ((i & 4) + (i & 32) / 4) / 4;
}
var data = imgd.data;
var j = 0;
for (var y = 0; y < h; y++) {
var ci = y1 + ((y2 - y1) * y) / h; //imaginaariosa
for (var x = 0; x < w; x++) {
var cr = x1 + ((x2 - x1) * x) / w; //reaaliosa
var zr = 0, zi = 0, res = 0;
for (var i = 0; i < 63; i++) { //iterointi
var nzr = zr * zr - zi * zi;
var nzi = zr * zi + zi * zr;
zr = nzr + cr;
zi = nzi + ci;
if ((zr * zr + zi * zi) <= 4.0) res++; //osuuko settiin?
}
data[j++] = r[63 - res % 64];
data[j++] = g[63 - res % 64];
data[j++] = b[63 - res % 64];
data[j++] = 255;
} //x ends
}
ctx.putImageData(imgd, 0, 0); // Piirretään kuvio canvasiin.
}
function load() {
mandelbrot(document.getElementById("example"), -2, -2, 2, 2);
}
window.addEventListener('load', load, false);
</script>
</body>
</html>