Skip to content

Instantly share code, notes, and snippets.

@Tiny-Giant
Created January 6, 2018 04:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Tiny-Giant/085436cedae02b0b9c2ee80b59ca28ad to your computer and use it in GitHub Desktop.
<!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");
let start = performance.now();
while(await (async _ => {
if(counter >= max) return false;
if(performance.now() - start > 15) {
++chunks;
await delay(0);
start = performance.now();
}
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;
return true;
})());
return { counter, chunks };
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment