Tiny-Giant · January 6, 2018 04:14
diff --git a/lazy_mandelbrot.html b/lazy_mandelbrot.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-size: 0;
        }
    </style>
 </head>
 <body>
    <script>
        void async function() {
            const delay = ms => new Promise(r => setTimeout(r, ms, true));

            function mandelbrot_check(width, height, x,y) {
                var realComponentOfResult = x;
                var imaginaryComponentOfResult = y;
                var maxIterations = 200;
                for(var i = 0; i < maxIterations; i++) {
                     var tempRealComponent = realComponentOfResult * realComponentOfResult
                                             - imaginaryComponentOfResult * imaginaryComponentOfResult
                                             + x;
                     var tempImaginaryComponent = 2 * realComponentOfResult * imaginaryComponentOfResult
                                             + y;
                     realComponentOfResult = tempRealComponent;
                     imaginaryComponentOfResult = tempImaginaryComponent;

                     // Return a number as a percentage
                     if(realComponentOfResult * imaginaryComponentOfResult > 5) 
                        return (i/maxIterations) * 100;
                }
                return 0;   // Return zero if in set
            }  

            const lazy_mandelbrot = async (scope, width, height, magnification, panX, panY) => {
                let counter = 0;
                let chunks = 0;
                const max = width * height;

                const canvas = document.createElement("canvas");
                canvas.width = width;
                canvas.height = height;
                scope.appendChild(canvas);
                var ctx = canvas.getContext("2d");

                const start = performance.now();

                while(await (async _ => {
                    if(counter >= max) return false;

                    ++chunks;
                    await delay(0);

                    const start = performance.now();
                    while((_ => { 
                        if(counter >= max) return false;

                        const row = (counter / width) | 0;
                        const cell = (counter % width); 

                        mandelbrot_distance = mandelbrot_check(width, height,
                                                               cell/magnification - panX, 
                                                               row /magnification - panY);

                        if(mandelbrot_distance == 0) {
                            ctx.fillStyle = '#000';
                        } else {
                            ctx.fillStyle = 'hsl(0, 100%, ' + mandelbrot_distance + '%)';
                        }
                        ctx.fillRect(cell, row, 1,1); // Draw a pixel

                        ++counter;

                        if(performance.now() - start > 15) return false;
                        return true;
                    })());

                    return true;
                })());

                return { counter, chunks, duration: performance.now() - start };
            }

            const scope = document.body;
            const { width, height } = scope.getBoundingClientRect();

            console.log(await lazy_mandelbrot(scope, width, height, (width + height) / 7, 2, 1.5));
        }();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 0;
	}
	</style>
	</head>
	<body>
	<script>
	void async function() {
	const delay = ms => new Promise(r => setTimeout(r, ms, true));

	function mandelbrot_check(width, height, x,y) {
	var realComponentOfResult = x;
	var imaginaryComponentOfResult = y;
	var maxIterations = 200;
	for(var i = 0; i < maxIterations; i++) {
	var tempRealComponent = realComponentOfResult * realComponentOfResult
	- imaginaryComponentOfResult * imaginaryComponentOfResult
	+ x;
	var tempImaginaryComponent = 2 * realComponentOfResult * imaginaryComponentOfResult
	+ y;
	realComponentOfResult = tempRealComponent;
	imaginaryComponentOfResult = tempImaginaryComponent;

	// Return a number as a percentage
	if(realComponentOfResult * imaginaryComponentOfResult > 5)
	return (i/maxIterations) * 100;
	}
	return 0; // Return zero if in set
	}

	const lazy_mandelbrot = async (scope, width, height, magnification, panX, panY) => {
	let counter = 0;
	let chunks = 0;
	const max = width * height;

	const canvas = document.createElement("canvas");
	canvas.width = width;
	canvas.height = height;
	scope.appendChild(canvas);
	var ctx = canvas.getContext("2d");

	const start = performance.now();

	while(await (async _ => {
	if(counter >= max) return false;

	++chunks;
	await delay(0);

	const start = performance.now();
	while((_ => {
	if(counter >= max) return false;

	const row = (counter / width) \| 0;
	const cell = (counter % width);

	mandelbrot_distance = mandelbrot_check(width, height,
	cell/magnification - panX,
	row /magnification - panY);

	if(mandelbrot_distance == 0) {
	ctx.fillStyle = '#000';
	} else {
	ctx.fillStyle = 'hsl(0, 100%, ' + mandelbrot_distance + '%)';
	}
	ctx.fillRect(cell, row, 1,1); // Draw a pixel

	++counter;

	if(performance.now() - start > 15) return false;
	return true;
	})());

	return true;
	})());

	return { counter, chunks, duration: performance.now() - start };
	}

	const scope = document.body;
	const { width, height } = scope.getBoundingClientRect();

	console.log(await lazy_mandelbrot(scope, width, height, (width + height) / 7, 2, 1.5));
	}();
	</script>
	</body>
	</html>