JavaScript Playground

function mandelIter(cx, cy, maxIter) {
    let x = 0.0;
    let y = 0.0;
    let xx = 0;
    let yy = 0;
    let xy = 0;

let i = maxIter;
    while (i-- && xx + yy <= 4) {
        xy = x * y;
        xx = x * x;
        yy = y * y;
        x = xx - yy + cx;
        y = xy + xy + cy;
    }
    return maxIter - i;
}

function mandelbrot(canvas, xmin, xmax, ymin, ymax, iterations) {
    const width = canvas.width;
    const height = canvas.height;
    const ctx = canvas.getContext('2d');
    const img = ctx.getImageData(0, 0, width, height);
    const pix = img.data;

const pixels = Array.from({ length: width * height }, (_, index) => {
        const ix = index % width;
        const iy = Math.floor(index / width);
        const x = xmin + (xmax - xmin) * ix / (width - 1);
        const y = ymin + (ymax - ymin) * iy / (height - 1);
        const i = mandelIter(x, y, iterations);

if (i > iterations) {
            return [0, 0, 0, 255];
        } else {
            const c = 3 * Math.log(i) / Math.log(iterations - 1.0);
            if (c < 1) {
                const shade = Math.floor(255 * c);
                return [shade, shade, shade, 255];
            } else if (c < 2) {
                const shade = Math.floor(255 * (c - 1));
                return [shade, shade, shade, 255];
            } else {
                const shade = Math.floor(255 * (c - 2));
                return [shade, shade, shade, 255];
            }
        }
    });

pixels.forEach(([r, g, b, a], index) => {
        const ppos = 4 * index;
        pix[ppos] = r;
        pix[ppos + 1] = g;
        pix[ppos + 2] = b;
        pix[ppos + 3] = a;
    });

ctx.putImageData(img, 0, 0);
}

mount(playground => {
    const canvas = document.createElement('canvas');
    canvas.width = 900;
    canvas.height = 600;
    playground.appendChild(canvas);
    mandelbrot(canvas, -2, 1, -1, 1, 1000);
});