2020-coding-projects/mandelbrot-webassembly/worker.js

function calcRe(col) {
    return (col * (maxX - minX)) / width + minX;
}

function calcIm(row) {
    return (row * (maxY - minY)) / height + minY;
}

function hslToRgb(h, s, l) {
    var r, g, b;

    if (s == 0) {
        r = g = b = l; // achromatic
    } else {
        var hue2rgb = function hue2rgb(p, q, t) {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1 / 6) return p + (q - p) * 6 * t;
            if (t < 1 / 2) return q;
            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        };

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

function getColor(iterations, maxIterations) {
    const rgb = hslToRgb(iterations / 256, 1, iterations / (iterations + 8));
    return [...rgb, 255];
}

function setPixel(set, width, x, y, color) {
    const startIndex = y * width * 4 + x * 4;
    set[startIndex + 0] = color[0];
    set[startIndex + 1] = color[1];
    set[startIndex + 2] = color[2];
    set[startIndex + 3] = color[3];
    return set;
}

async function getMandelbrotSet(maxIter, minX, minY, maxX, maxY, width, height) {
    let partSet = [];
    for (let i = 0; i < width * height * 4; i++) {
        partSet.push(0);
    }

    for (let row = 0; row < height; row++) {
        for (let col = 0; col < width; col++) {
            const c_re = (col * (maxX - minX)) / width + minX;
            const c_im = (row * (maxY - minY)) / height + minY;

            let x = 0,
                y = 0;

            let iteration = 0;
            for (; x ** 2 + y ** 2 <= 4 && iteration < maxIter; iteration++) {
                const x_new = x * x - y * y + c_re;
                y = 2 * x * y + c_im;
                x = x_new;
            }

            partSet = setPixel(partSet, width, col, row, getColor(iteration, maxIter));
        }
    }

    return partSet;
}

async function loadMandelbrotSet(resolution, minX, minY, maxX, maxY, width, height) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `http://127.0.0.1:8001?minX=${minX}&maxX=${maxX}&minY=${minY}&maxY=${maxY}&width=${width}&height=${height}`, true)
        xhr.send();

        xhr.addEventListener('readystatechange', (e) => {
            if (xhr.readyState == 4) {
                const response = JSON.parse(xhr.responseText);
                console.log(response);
                resolve(response);
            }
        }, false);
    });
}

async function getForResolution(resolution = 1000) {
    const chunks = 4;
    const chunkWidth = Math.round(width / chunks);
    const chunkHeight = Math.round(height / chunks);

    const dx = (maxX - minX) / chunks;
    const dy = (maxY - minY) / chunks;

    const promises = [];

    for (let i = 0; i < chunks; i++) {
        for (let j = 0; j < chunks; j++) {
            promises.push(new Promise((resolve, reject) => {
                const x = i;
                const y = j;
                loadMandelbrotSet(resolution,
                    minX + x * dx,
                    minY + y * dy,
                    minX + (x + 1) * dx,
                    minY + (y + 1) * dy,
                    chunkWidth,
                    chunkHeight
                ).then(partSet => {
                    console.log('finished', x, y);

                    const startRow = y * chunkHeight;
                    const startCol = x * chunkWidth;
                    console.log(startRow, startCol, chunkHeight, chunkWidth);

                    for (let row = 0; row < chunkHeight; row++) {
                        for (let col = 0; col < chunkWidth; col++) {
                            for (let i = 0; i < 4; i++) {
                                mandelbrot.data[(row + startRow) * width * 4 + (startCol + col) * 4 + i] = partSet[row * chunkWidth * 4 + col * 4 + i];
                            }
                        }
                    }
                    sendMandelbrot();
                    resolve();
                });
            }));
        }
    }

    await Promise.all(promises);
}

let mandelbrot;
let width,
    height;
let minX,
    maxX,
    minY,
    maxY;

onmessage = function (e) {
    const data = e.data[0];
    mandelbrot = data.mandelbrot;
    width = data.width;
    height = data.height;
    minX = data.minX;
    minY = data.minY;
    maxX = data.maxX;
    maxY = data.maxY;

    getForResolution();
};

function sendMandelbrot() {
    postMessage([mandelbrot]);
}