September 2017 Update

This commit is contained in:
Ingy döt Net 2017-09-23 10:01:46 +02:00
parent bba7bfd280
commit ba8067c3b7
14570 changed files with 153136 additions and 63871 deletions

View file

@ -1,66 +1,69 @@
function Mandeliter(cx, cy, maxiter)
{
var i;
function mandelIter(cx, cy, maxIter) {
var x = 0.0;
var y = 0.0;
for (i = 0; i < maxiter && x*x + y*y <= 4; ++i)
{
var tmp = 2*x*y;
x = x*x - y*y + cx;
y = tmp + cy;
var xx = 0;
var yy = 0;
var xy = 0;
var i = maxIter;
while (i-- && xx + yy <= 4) {
xy = x * y;
xx = x * x;
yy = y * y;
x = xx - yy + cx;
y = xy + xy + cy;
}
return i;
return maxIter - i;
}
function Mandelbrot()
{
var width = 900;
var height = 600;
var cd = document.getElementById('calcdata');
var xmin = parseFloat(cd.xmin.value);
var xmax = parseFloat(cd.xmax.value);
var ymin = parseFloat(cd.ymin.value);
var ymax = parseFloat(cd.ymax.value);
var iterations = parseInt(cd.iterations.value);
var ctx = document.getElementById('mandelimage').getContext("2d");
function mandelbrot(canvas, xmin, xmax, ymin, ymax, iterations) {
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');
var img = ctx.getImageData(0, 0, width, height);
var pix = img.data;
for (var ix = 0; ix < width; ++ix)
for (var iy = 0; iy < height; ++iy)
{
var x = xmin + (xmax-xmin)*ix/(width-1);
var y = ymin + (ymax-ymin)*iy/(height-1);
var i = Mandeliter(x, y, iterations);
var ppos = 4*(900*iy + ix);
if (i == iterations)
{
for (var ix = 0; ix < width; ++ix) {
for (var iy = 0; iy < height; ++iy) {
var x = xmin + (xmax - xmin) * ix / (width - 1);
var y = ymin + (ymax - ymin) * iy / (height - 1);
var i = mandelIter(x, y, iterations);
var ppos = 4 * (width * iy + ix);
if (i > iterations) {
pix[ppos] = 0;
pix[ppos+1] = 0;
pix[ppos+2] = 0;
}
else
{
var c = 3*Math.log(i)/Math.log(iterations - 1.0);
if (c < 1)
{
pix[ppos] = 255*c;
pix[ppos+1] = 0;
pix[ppos+2] = 0;
pix[ppos + 1] = 0;
pix[ppos + 2] = 0;
} else {
var c = 3 * Math.log(i) / Math.log(iterations - 1.0);
if (c < 1) {
pix[ppos] = 255 * c;
pix[ppos + 1] = 0;
pix[ppos + 2] = 0;
}
else if (c < 2)
{
else if ( c < 2 ) {
pix[ppos] = 255;
pix[ppos+1] = 255*(c-1);
pix[ppos+2] = 0;
}
else
{
pix[ppos + 1] = 255 * (c - 1);
pix[ppos + 2] = 0;
} else {
pix[ppos] = 255;
pix[ppos+1] = 255;
pix[ppos+2] = 255*(c-2);
pix[ppos + 1] = 255;
pix[ppos + 2] = 255 * (c - 2);
}
}
pix[ppos+3] = 255;
pix[ppos + 3] = 255;
}
ctx.putImageData(img,0,0);
}
ctx.putImageData(img, 0, 0);
}
var canvas = document.createElement('canvas');
canvas.width = 900;
canvas.height = 600;
document.body.insertBefore(canvas, document.body.childNodes[0]);
mandelbrot(canvas, -2, 1, -1, 1, 1000);

View file

@ -1,38 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot set</title>
<script src="Mandelbrot.js" type="text/javascript"></script>
</head>
var mandelIter;
fetch("./mandelIter.wasm")
.then(res => {
if (res.ok) return res.arrayBuffer();
throw new Error('Unable to fetch WASM.');
})
.then(bytes => { return WebAssembly.compile(bytes); })
.then(module => { return WebAssembly.instantiate(module); })
.then(instance => { WebAssembly.instance = instance; draw(); })
<body onload="Mandelbrot()">
<h1>Mandelbrot set</h1>
function mandelbrot(canvas, xmin, xmax, ymin, ymax, iterations) {
// ...
var i = WebAssembly.instance.exports.mandelIter(x, y, iterations);
// ...
}
<form id="calcdata" onsubmit="javascript:Mandelbrot(); return false;">
<table>
<tr>
<td>xmin =</td>
<td><input name="xmin" type="text" size="10" value="-2"></td>
<td>xmax =</td>
<td><input name="xmax" type="text" size="10" value="1"></td>
</tr>
<tr>
<td>ymin =</td>
<td><input name="ymin" type="text" size="10" value="-1"></td>
<td>ymax =</td>
<td><input name="ymax" type="text" size="10" value="1"></td>
</tr>
</table>
<p>iterations =
<input name="iterations" type="text" size="10" value="1000"></p>
<p>
<input type="submit" value=" Calculate ">
<input type="reset" value=" Reset form ">
</p>
</form>
<canvas id="mandelimage" width="900" height="600">
This page needs a browser with canvas support.
</canvas>
</body>
</html>
function draw() {
// canvas initialization if necessary
// ...
mandelbrot(canvas, -2, 1, -1, 1, 1000);
// ...
}

View file

@ -1,69 +0,0 @@
function mandelIter(cx, cy, maxIter) {
var x = 0.0;
var y = 0.0;
var xx = 0;
var yy = 0;
var xy = 0;
var i = maxIter;
while (i-- && xx + yy <= 4) {
xy = x * y;
xx = x * x;
yy = y * y;
x = xx - yy + cx;
y = xy + xy + cy;
}
return maxIter - i;
}
function mandelbrot(canvas, xmin, xmax, ymin, ymax, iterations) {
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');
var img = ctx.getImageData(0, 0, width, height);
var pix = img.data;
for (var ix = 0; ix < width; ++ix) {
for (var iy = 0; iy < height; ++iy) {
var x = xmin + (xmax - xmin) * ix / (width - 1);
var y = ymin + (ymax - ymin) * iy / (height - 1);
var i = mandelIter(x, y, iterations);
var ppos = 4 * (width * iy + ix);
if (i > iterations) {
pix[ppos] = 0;
pix[ppos + 1] = 0;
pix[ppos + 2] = 0;
} else {
var c = 3 * Math.log(i) / Math.log(iterations - 1.0);
if (c < 1) {
pix[ppos] = 255 * c;
pix[ppos + 1] = 0;
pix[ppos + 2] = 0;
}
else if ( c < 2 ) {
pix[ppos] = 255;
pix[ppos + 1] = 255 * (c - 1);
pix[ppos + 2] = 0;
} else {
pix[ppos] = 255;
pix[ppos + 1] = 255;
pix[ppos + 2] = 255 * (c - 2);
}
}
pix[ppos + 3] = 255;
}
}
ctx.putImageData(img, 0, 0);
}
var canvas = document.createElement('canvas');
canvas.width = 900;
canvas.height = 600;
document.body.insertBefore(canvas, document.body.childNodes[0]);
mandelbrot(canvas, -2, 1, -1, 1, 1000);