65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
|
import {toFixed, toFloat, mul} from './fixed.js';
|
||
|
|
|
||
|
|
let max = 256;
|
||
|
|
let width = 256;
|
||
|
|
let height = 256;
|
||
|
|
let zoom = 1;
|
||
|
|
|
||
|
|
let black = 0xff000000;
|
||
|
|
let tricolor = [
|
||
|
|
0xffff0000,
|
||
|
|
0xff00ff00,
|
||
|
|
0xff0000ff,
|
||
|
|
];
|
||
|
|
|
||
|
|
let palette = new Uint32Array(256);
|
||
|
|
palette[0] = black;
|
||
|
|
for (let i = 0; i < 255; i++) {
|
||
|
|
palette[i + 1] = tricolor[i % 3];
|
||
|
|
}
|
||
|
|
function nap() {
|
||
|
|
return new Promise((resolve) => setTimeout(() => resolve()));
|
||
|
|
}
|
||
|
|
|
||
|
|
async function setup(id, iterfunc) {
|
||
|
|
let canvas = document.getElementById(id);
|
||
|
|
let ctx = canvas.getContext('2d');
|
||
|
|
let imageData = ctx.createImageData(width, height);
|
||
|
|
let rgba = new Uint32Array(imageData.data.buffer);
|
||
|
|
for (let y = 0; y < height; y++) {
|
||
|
|
let cy = (y * 2 - height) / (height / 2);
|
||
|
|
for (let x = 0; x < width; x++) {
|
||
|
|
let cx = (x * 2 - width) / (width / 2);
|
||
|
|
let i = iterfunc(cx, cy);
|
||
|
|
let color = palette[i];
|
||
|
|
rgba[y * width + x] = color;
|
||
|
|
rgba[(256 - y) * width + x] = color;
|
||
|
|
|
||
|
|
if (x % 16 == 15) {
|
||
|
|
ctx.putImageData(imageData, 0, 0);
|
||
|
|
await nap();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setup('float', (cx, cy) => {
|
||
|
|
let zx = 0;
|
||
|
|
let zy = 0;
|
||
|
|
let zx_2 = 0;
|
||
|
|
let zy_2 = 0;
|
||
|
|
let zx_zy = 0;
|
||
|
|
for (let i = 1; i < max; i++) {
|
||
|
|
zx = zx_2 - zy_2 + cx;
|
||
|
|
zy = zx_zy + zx_zy + cy;
|
||
|
|
zx_2 = zx * zx;
|
||
|
|
zy_2 = zy * zy;
|
||
|
|
zx_zy = zx * zy;
|
||
|
|
if (zx_2 >= 4 || zy_2 >= 4 || zx_2 + zy_2 >= 4) {
|
||
|
|
return i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return 0;
|
||
|
|
}).then(() => {
|
||
|
|
console.log('done');
|
||
|
|
})
|