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]); }