September 2017 Update
This commit is contained in:
parent
bba7bfd280
commit
ba8067c3b7
14570 changed files with 153136 additions and 63871 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// ...
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue