let pixelSize = 1;
let width = 500;
let height = 500;
let maxIterations = 100;
let mandelMin = -2.5;
let mandelMax = 2.5;
let infinity = 2;
let brightness;

function draw() {
    let ctx = document.getElementById('canvas').getContext('2d');
    for (var y = 0; y < height; y++) 
    {
        for (var x = 0; x < width; x++) 
        {
            const map = function(num, in_min, in_max, out_min, out_max) {
                return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
            };
            let a = map(y, 0, height, mandelMin, mandelMax);
            let b = map(x, 0, width, mandelMin, mandelMax);
            const initialA = a;
            const initialB = b;
            let iterationCount = 0;
            while (iterationCount < maxIterations)
            {
                let aa = (a * a) - (b * b);
                let bb = (2 * a * b);
                a = aa + initialA;
                b = bb + initialB;
                let result = Math.abs(a + b);
                if (result >= infinity)
                {
                    brightness = 255;
                    ctx.fillStyle = 'rgb(' + brightness + ', ' + brightness + ', ' + brightness + ')';
                    break;
                }
                else
                {
                    brightness = 0;
                    ctx.fillStyle = 'rgb(' + brightness + ', ' + brightness + ', ' + brightness + ')';
                }
                iterationCount++;
            }
            ctx.fillRect(y * pixelSize, x * pixelSize, pixelSize, pixelSize);
        }
        ctx.fillRect(y * pixelSize, x * pixelSize, pixelSize, pixelSize);
    }
}
draw();