525 lines
20 KiB
JavaScript
525 lines
20 KiB
JavaScript
// Julia distance-isolines background.
|
|
// Renderer: WebGL (default) -> Canvas2D -> flat dark backdrop.
|
|
//
|
|
// The 512x512 distance field is precomputed (live per-pixel iteration is too slow).
|
|
// It ships as `dist-strips.bin`: full-resolution horizontal bands, each WebP-compressed,
|
|
// concatenated in CENTER-OUT order. We stream the file and upload each band to its texture
|
|
// sub-rectangle as its bytes arrive.
|
|
//
|
|
// The DISPLAY FOLLOWS THE STREAM: instead of drawing the whole screen over a half-loaded
|
|
// texture (which looked like a "glow"), the shader only reveals the field rows that have
|
|
// actually streamed in, blooming outward from the center over a flat dark backdrop. The
|
|
// revealed extent eases smoothly, so it reads as an intentional reveal, not jank.
|
|
// Palette: BSOD-blue, smooth cosine bands, 1024-entry LUT (Canvas2D path only).
|
|
|
|
var FIELD_URL = '/routes/root/dist-strips.bin?v=1'; // streamed WebP bands (bump ?v on regen)
|
|
var DIST_URL = '/routes/root/dist.png'; // monolithic source (Canvas2D fallback)
|
|
var DARK_HEX = '#060a10'; // backdrop / unloaded tone
|
|
|
|
// The old palette cycle advanced quickly enough to look shimmery on some displays.
|
|
// Keep the camera drift slow, cap redraws below display refresh, and pause real work
|
|
// while the tab is hidden. The field still streams at full speed; only presentation
|
|
// frames are rate-limited.
|
|
var MOTION_SPEED = 0.045;
|
|
var COLOR_CYCLE_SPEED = 4.2;
|
|
var WEBGL_TARGET_FPS = 30;
|
|
var CANVAS_TARGET_FPS = 24;
|
|
var DITHER_STRENGTH = 0.45;
|
|
|
|
function _prefersReducedMotion() {
|
|
return window.matchMedia &&
|
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
}
|
|
|
|
function initFractal(canvasId) {
|
|
console.log('[fractal-gl] initFractal:', canvasId);
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
if (!canvas) {
|
|
console.warn('[fractal-gl] canvas not found:', canvasId);
|
|
return;
|
|
}
|
|
|
|
// Flat dark backdrop: clean start state, and the tone the reveal blooms over.
|
|
document.body.style.background = DARK_HEX;
|
|
|
|
var gl = null;
|
|
try {
|
|
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
|
} catch (e) {
|
|
console.warn('[fractal-gl] WebGL exception:', e);
|
|
}
|
|
|
|
if (gl) {
|
|
console.log('[fractal-gl] using WebGL path');
|
|
initWebGL(canvas, gl);
|
|
} else {
|
|
console.warn('[fractal-gl] WebGL unavailable; using Canvas2D fallback');
|
|
initCanvas2D(canvas);
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Shared streamed-field loader
|
|
// Emits each band as a decoded ImageBitmap the moment its bytes land.
|
|
// cb = { onHeader(header), onStrip(bitmap, y, h), onError(err) }
|
|
// File: u32(LE) headerLen | JSON header | concatenated band WebPs.
|
|
// JSON: { fullW, fullH, bands:[{y,h,off,len}] } in stream (center-out) order.
|
|
// ----------------------------------------------------------------
|
|
function streamFieldBands(cb) {
|
|
var TD = new TextDecoder();
|
|
|
|
function emitBand(bytes, b) {
|
|
// bytes is an independent copy, safe to keep past the next read.
|
|
// Disable color management so the grayscale field bytes survive intact.
|
|
createImageBitmap(new Blob([bytes], { type: 'image/webp' }),
|
|
{ colorSpaceConversion: 'none', premultiplyAlpha: 'none' })
|
|
.then(function (bmp) {
|
|
try { cb.onStrip(bmp, b.y, b.h); }
|
|
catch (e) { console.warn('[fractal-gl] band upload failed', e); }
|
|
})
|
|
.catch(function (e) { console.warn('[fractal-gl] band decode failed', e); });
|
|
}
|
|
|
|
function emitAll(buf) {
|
|
var hlen = new DataView(buf.buffer, buf.byteOffset, 4).getUint32(0, true);
|
|
var header = JSON.parse(TD.decode(buf.subarray(4, 4 + hlen)));
|
|
var ps = 4 + hlen;
|
|
cb.onHeader(header);
|
|
header.bands.forEach(function (b) {
|
|
emitBand(buf.subarray(ps + b.off, ps + b.off + b.len).slice(), b);
|
|
});
|
|
}
|
|
|
|
fetch(FIELD_URL).then(function (res) {
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
if (!res.body || !res.body.getReader) {
|
|
return res.arrayBuffer().then(function (ab) { emitAll(new Uint8Array(ab)); });
|
|
}
|
|
|
|
var reader = res.body.getReader();
|
|
var chunks = [];
|
|
var total = 0;
|
|
var header = null;
|
|
var ps = 0;
|
|
var next = 0;
|
|
|
|
function assemble() {
|
|
var out = new Uint8Array(total);
|
|
var o = 0;
|
|
for (var i = 0; i < chunks.length; i++) { out.set(chunks[i], o); o += chunks[i].length; }
|
|
return out;
|
|
}
|
|
|
|
function step() {
|
|
return reader.read().then(function (r) {
|
|
if (r.value) { chunks.push(r.value); total += r.value.length; }
|
|
var buf = assemble();
|
|
|
|
if (!header && total >= 4) {
|
|
var hlen = new DataView(buf.buffer, 0, 4).getUint32(0, true);
|
|
if (total >= 4 + hlen) {
|
|
header = JSON.parse(TD.decode(buf.subarray(4, 4 + hlen)));
|
|
ps = 4 + hlen;
|
|
cb.onHeader(header);
|
|
}
|
|
}
|
|
if (header) {
|
|
while (next < header.bands.length) {
|
|
var b = header.bands[next];
|
|
var end = ps + b.off + b.len;
|
|
if (total < end) break;
|
|
emitBand(buf.subarray(ps + b.off, end).slice(), b);
|
|
next++;
|
|
}
|
|
}
|
|
if (r.done) return;
|
|
return step();
|
|
});
|
|
}
|
|
return step();
|
|
}).catch(function (e) {
|
|
console.error('[fractal-gl] field stream failed', e);
|
|
if (cb.onError) cb.onError(e);
|
|
});
|
|
}
|
|
|
|
function _hslToRgb(h, s, l) {
|
|
var a = s * Math.min(l, 1 - l);
|
|
function f(n) {
|
|
var k = (n + h * 12) % 12;
|
|
return Math.round((l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))) * 255);
|
|
}
|
|
return [f(0), f(8), f(4)];
|
|
}
|
|
|
|
// 1024-entry palette: 4x finer than the iteration-count space (0..255),
|
|
// which kills visible quantization banding in the band peaks/troughs.
|
|
var PALETTE_SIZE = 1024;
|
|
function _buildPalette32() {
|
|
var p32 = new Uint32Array(PALETTE_SIZE);
|
|
for (var i = 0; i < PALETTE_SIZE; i++) {
|
|
var f = i / 4; // logical index in [0, 256)
|
|
var band = 0.5 + 0.5 * Math.cos(f * 2 * Math.PI / 56);
|
|
var h = 0.665 + 0.015 * Math.sin(f * Math.PI / 128);
|
|
var s = 0.80;
|
|
var l = 0.18 + 0.28 * band;
|
|
var rgb = _hslToRgb(h, s, l);
|
|
p32[i] = (255 << 24) | (rgb[2] << 16) | (rgb[1] << 8) | rgb[0];
|
|
}
|
|
return p32;
|
|
}
|
|
|
|
// ----------------------------------------------------------------
|
|
// WebGL path (default) — streams bands in, reveals only what has loaded
|
|
// ----------------------------------------------------------------
|
|
var FIELD_VERT_GLSL = [
|
|
'attribute vec2 a_pos;',
|
|
'void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }'
|
|
].join('\n');
|
|
|
|
// Same field-sampling math as before, plus a feathered reveal mask gated on the
|
|
// loaded field-row extent [u_loadV0, u_loadV1]. Unloaded rows show the dark backdrop.
|
|
var FIELD_FRAG_GLSL = [
|
|
'precision highp float;',
|
|
'uniform float u_time;',
|
|
'uniform vec2 u_resolution;',
|
|
'uniform sampler2D u_dist;',
|
|
'uniform float u_loadV0;',
|
|
'uniform float u_loadV1;',
|
|
'const vec3 DARK = vec3(0.024, 0.039, 0.063);',
|
|
'vec3 hslToRgb(float h, float s, float l) {',
|
|
' float a = s * min(l, 1.0 - l);',
|
|
' vec3 k = mod(vec3(0.0, 8.0, 4.0) + h * 12.0, 12.0);',
|
|
' vec3 v = max(min(min(k - 3.0, 9.0 - k), vec3(1.0)), vec3(-1.0));',
|
|
' return vec3(l) - a * v;',
|
|
'}',
|
|
'vec3 calmBand(float idx) {',
|
|
' float f = mod(idx, 256.0);',
|
|
' float band = 0.5 + 0.5 * cos(f * 6.28318530 / 56.0);',
|
|
' float h = 0.665 + 0.015 * sin(f * 3.14159265 / 128.0);',
|
|
' float s = 0.80;',
|
|
' float l = 0.18 + 0.28 * band;',
|
|
' return hslToRgb(h, s, l);',
|
|
'}',
|
|
'void main() {',
|
|
' vec2 uv = gl_FragCoord.xy / u_resolution;',
|
|
' float aspect = u_resolution.x / u_resolution.y;',
|
|
' float t = u_time * 0.045;',
|
|
' float maxH = 1.0 / max(aspect, 1.0);',
|
|
' float zoomFrac = 0.65 + 0.15 * sin(t * 0.4);',
|
|
' float halfH = maxH * zoomFrac * 0.5;',
|
|
' float halfW = halfH * aspect;',
|
|
' float fx = 0.5 - halfW;',
|
|
' float fy = 0.5 - halfH;',
|
|
' float cx = 0.5 + fx * 0.5 * cos(t * 0.55);',
|
|
' float cy = 0.5 + fy * 0.5 * sin(t * 0.45);',
|
|
' float sx = cx + (uv.x - 0.5) * 2.0 * halfW;',
|
|
' float sy = cy + (uv.y - 0.5) * 2.0 * halfH;',
|
|
' float fv = 1.0 - sy;', // field v-coordinate (texture uploaded natural orientation)
|
|
' // Reveal only loaded field rows; nothing loaded yet => all dark.',
|
|
' if (u_loadV1 - u_loadV0 < 0.001) { gl_FragColor = vec4(DARK, 1.0); return; }',
|
|
' float E = 0.03;',
|
|
' float m = smoothstep(u_loadV0 - E, u_loadV0 + E, fv) *',
|
|
' (1.0 - smoothstep(u_loadV1 - E, u_loadV1 + E, fv));',
|
|
' float v = texture2D(u_dist, vec2(sx, fv)).r * 255.0;',
|
|
' float ditherMix = clamp((v - 180.0) / 60.0, 0.0, 1.0);',
|
|
' float noise = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453) - 0.5;',
|
|
' v += noise * 0.45 * ditherMix;',
|
|
' float offset = u_time * 4.2;',
|
|
' vec3 color = calmBand(v - offset);',
|
|
' gl_FragColor = vec4(mix(DARK, color, m), 1.0);',
|
|
'}'
|
|
].join('\n');
|
|
|
|
function initWebGL(canvas, gl) {
|
|
function compile(type, src) {
|
|
var s = gl.createShader(type);
|
|
gl.shaderSource(s, src);
|
|
gl.compileShader(s);
|
|
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
|
|
console.error('[fractal-gl] shader compile error:', gl.getShaderInfoLog(s));
|
|
return null;
|
|
}
|
|
return s;
|
|
}
|
|
|
|
var vs = compile(gl.VERTEX_SHADER, FIELD_VERT_GLSL);
|
|
var fs = compile(gl.FRAGMENT_SHADER, FIELD_FRAG_GLSL);
|
|
if (!vs || !fs) return initCanvas2D(canvas);
|
|
|
|
var prog = gl.createProgram();
|
|
gl.attachShader(prog, vs);
|
|
gl.attachShader(prog, fs);
|
|
gl.linkProgram(prog);
|
|
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
|
|
console.error('[fractal-gl] link error:', gl.getProgramInfoLog(prog));
|
|
return initCanvas2D(canvas);
|
|
}
|
|
gl.useProgram(prog);
|
|
|
|
var buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
|
var aPos = gl.getAttribLocation(prog, 'a_pos');
|
|
gl.enableVertexAttribArray(aPos);
|
|
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
var uTime = gl.getUniformLocation(prog, 'u_time');
|
|
var uRes = gl.getUniformLocation(prog, 'u_resolution');
|
|
var uDist = gl.getUniformLocation(prog, 'u_dist');
|
|
var uV0 = gl.getUniformLocation(prog, 'u_loadV0');
|
|
var uV1 = gl.getUniformLocation(prog, 'u_loadV1');
|
|
|
|
var tex = gl.createTexture();
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
|
|
gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
gl.uniform1i(uDist, 0);
|
|
|
|
// Drawing the band bitmap to a 2D canvas yields a universally-supported
|
|
// TexImageSource (works on WebGL1 and WebGL2 alike).
|
|
var scratch = document.createElement('canvas');
|
|
var sctx = scratch.getContext('2d');
|
|
|
|
// ---- reveal state: which field rows have streamed in ----
|
|
var totalH = 1;
|
|
var spatial = []; // bands sorted top->bottom: {y, h}
|
|
var loadedSlots = []; // parallel booleans
|
|
var centerSlot = 0, lastSlot = 0;
|
|
var targetV0 = 0.5, targetV1 = 0.5; // loaded extent (v-fraction), grows from center
|
|
var dispV0 = 0.5, dispV1 = 0.5; // eased toward target for a smooth bloom
|
|
|
|
// Bloom only on the first page of a tab session; on later navigations the field
|
|
// is cached, so snap straight to it instead of replaying the ~1s intro.
|
|
var revealed = false;
|
|
try { revealed = sessionStorage.getItem('fractalRevealed') === '1'; } catch (e) {}
|
|
|
|
streamFieldBands({
|
|
onHeader: function (header) {
|
|
var w = header.fullW, h = header.fullH;
|
|
totalH = h;
|
|
spatial = header.bands.slice().sort(function (a, b) { return a.y - b.y; });
|
|
loadedSlots = spatial.map(function () { return false; });
|
|
lastSlot = spatial.length - 1;
|
|
centerSlot = 0;
|
|
for (var i = 0; i < spatial.length; i++) {
|
|
if (h / 2 >= spatial[i].y && h / 2 < spatial[i].y + spatial[i].h) { centerSlot = i; break; }
|
|
}
|
|
// Allocate the full texture (black; masked until rows load).
|
|
var fill = new Uint8Array(w * h * 4);
|
|
for (var k = 3; k < fill.length; k += 4) fill[k] = 255;
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, fill);
|
|
},
|
|
onStrip: function (bitmap, y, h) {
|
|
scratch.width = bitmap.width;
|
|
scratch.height = bitmap.height;
|
|
sctx.drawImage(bitmap, 0, 0);
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
|
|
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, y, gl.RGBA, gl.UNSIGNED_BYTE, scratch);
|
|
|
|
var s = -1;
|
|
for (var i = 0; i < spatial.length; i++) { if (spatial[i].y === y) { s = i; break; } }
|
|
if (s < 0) return;
|
|
loadedSlots[s] = true;
|
|
// Grow the contiguous loaded run around the center (guards against a late
|
|
// middle band briefly revealing an unloaded gap).
|
|
if (loadedSlots[centerSlot]) {
|
|
var lo = centerSlot; while (lo - 1 >= 0 && loadedSlots[lo - 1]) lo--;
|
|
var hi = centerSlot; while (hi + 1 < spatial.length && loadedSlots[hi + 1]) hi++;
|
|
// Push the extent past the field edge once the outermost band is in, so the
|
|
// feather never darkens the true field edge in the steady state.
|
|
targetV0 = (lo === 0) ? -1.0 : spatial[lo].y / totalH;
|
|
targetV1 = (hi === lastSlot) ? 2.0 : (spatial[hi].y + spatial[hi].h) / totalH;
|
|
if (lo === 0 && hi === lastSlot) {
|
|
try { sessionStorage.setItem('fractalRevealed', '1'); } catch (e) {}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
var startTime = performance.now();
|
|
var reducedMotion = _prefersReducedMotion();
|
|
var targetFrameMs = 1000 / WEBGL_TARGET_FPS;
|
|
var lastFrameTime = 0;
|
|
function frame(now) {
|
|
requestAnimationFrame(frame);
|
|
if (document.hidden) return;
|
|
if (now - lastFrameTime < targetFrameMs) return;
|
|
lastFrameTime = now;
|
|
|
|
var t = reducedMotion ? 0 : (now - startTime) * 0.001;
|
|
// Ease the displayed extent toward the loaded extent for a smooth bloom.
|
|
// On a repeat visit (cached field) snap instead of replaying the intro.
|
|
var ease = revealed ? 1.0 : 0.12;
|
|
dispV0 += (targetV0 - dispV0) * ease;
|
|
dispV1 += (targetV1 - dispV1) * ease;
|
|
gl.uniform1f(uTime, t);
|
|
gl.uniform2f(uRes, canvas.width, canvas.height);
|
|
gl.uniform1f(uV0, dispV0);
|
|
gl.uniform1f(uV1, dispV1);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
}
|
|
requestAnimationFrame(frame);
|
|
console.log('[fractal-gl] WebGL loop started');
|
|
}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Canvas2D fallback (rare; ancient / no-GPU browsers)
|
|
// - 1024-entry palette (4x finer than the byte-quantized iteration value)
|
|
// - bilinear sample of source buffer (no nearest-neighbor jaggies)
|
|
// - Uint32 writes (one packed write per pixel instead of four byte writes)
|
|
// Loads the monolithic dist.png and renders once decoded (fades in).
|
|
// ----------------------------------------------------------------
|
|
function initCanvas2D(canvas) {
|
|
var ctx2d = canvas.getContext('2d');
|
|
if (!ctx2d) {
|
|
console.error('[fractal-gl] Canvas2D also unavailable; body backdrop remains');
|
|
return;
|
|
}
|
|
var palette32 = _buildPalette32();
|
|
|
|
var img = new Image();
|
|
img.onerror = function (e) { console.error('[fractal-gl] dist.png load failed (canvas2d)', e); };
|
|
img.onload = function () {
|
|
var SW = img.width, SH = img.height;
|
|
console.log('[fractal-gl] PNG decoded (canvas2d):', SW, 'x', SH);
|
|
var off = document.createElement('canvas');
|
|
off.width = SW; off.height = SH;
|
|
var octx = off.getContext('2d');
|
|
octx.drawImage(img, 0, 0);
|
|
var data = octx.getImageData(0, 0, SW, SH).data;
|
|
var gray = new Uint8Array(SW * SH);
|
|
for (var i = 0, j = 0; i < gray.length; i++, j += 4) gray[i] = data[j];
|
|
|
|
// Fade the canvas in once the first frame is ready.
|
|
canvas.style.transition = 'opacity 400ms ease';
|
|
canvas.style.opacity = '0';
|
|
|
|
// Higher internal resolution = sharper. Capped to keep frame budget reasonable.
|
|
function targetSize() {
|
|
var h = Math.min(800, Math.max(360, Math.floor(window.innerHeight * 0.7)));
|
|
var aspect = window.innerWidth / window.innerHeight;
|
|
return { w: Math.max(2, Math.floor(h * aspect)), h: h };
|
|
}
|
|
|
|
function resize() {
|
|
var s = targetSize();
|
|
canvas.width = s.w; canvas.height = s.h;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
var imgOut = ctx2d.createImageData(canvas.width, canvas.height);
|
|
var out32 = new Uint32Array(imgOut.data.buffer);
|
|
var lastW = canvas.width, lastH = canvas.height;
|
|
var startTime = performance.now();
|
|
var reducedMotion = _prefersReducedMotion();
|
|
var targetFrameMs = 1000 / CANVAS_TARGET_FPS;
|
|
var lastFrameTime = 0;
|
|
var faded = false;
|
|
|
|
// 4x4 Bayer matrix, recentered to ±0.6 source units. Only applied where
|
|
// v is in the outer-smooth band (ramp 180→240) so inner detail stays crisp.
|
|
var BAYER = new Float32Array([0,8,2,10, 12,4,14,6, 3,11,1,9, 15,7,13,5]);
|
|
for (var bi = 0; bi < 16; bi++) BAYER[bi] = (BAYER[bi] - 7.5) * 0.6 / 7.5;
|
|
|
|
function frame(now) {
|
|
requestAnimationFrame(frame);
|
|
if (document.hidden) return;
|
|
if (now - lastFrameTime < targetFrameMs) return;
|
|
lastFrameTime = now;
|
|
var W = canvas.width, H = canvas.height;
|
|
if (W !== lastW || H !== lastH) {
|
|
imgOut = ctx2d.createImageData(W, H);
|
|
out32 = new Uint32Array(imgOut.data.buffer);
|
|
lastW = W; lastH = H;
|
|
}
|
|
var elapsed = reducedMotion ? 0 : (now - startTime) * 0.001;
|
|
var t = elapsed * MOTION_SPEED;
|
|
var aspect = W / H;
|
|
var maxH = 1.0 / Math.max(aspect, 1.0);
|
|
var zoomFrac = 0.65 + 0.15 * Math.sin(t * 0.4);
|
|
var halfH = maxH * zoomFrac * 0.5;
|
|
var halfW = halfH * aspect;
|
|
var fxRem = 0.5 - halfW, fyRem = 0.5 - halfH;
|
|
var cx = 0.5 + fxRem * 0.5 * Math.cos(t * 0.55);
|
|
var cy = 0.5 + fyRem * 0.5 * Math.sin(t * 0.45);
|
|
var x0 = (cx - halfW) * SW;
|
|
var y0 = (cy - halfH) * SH;
|
|
var dxs = (2 * halfW) / W * SW;
|
|
var dys = (2 * halfH) / H * SH;
|
|
// offset in 1024-entry space (4x granularity), deliberately slow to avoid shimmer.
|
|
var offsetHD = (elapsed * COLOR_CYCLE_SPEED * 4) | 0;
|
|
|
|
var SW1 = SW - 1, SH1 = SH - 1;
|
|
var idx = 0;
|
|
var sy = y0;
|
|
for (var y = 0; y < H; y++) {
|
|
var sy0i = sy | 0;
|
|
if (sy0i < 0) sy0i = 0; else if (sy0i > SH1) sy0i = SH1;
|
|
var sy1i = sy0i + 1;
|
|
if (sy1i > SH1) sy1i = SH1;
|
|
var fy = sy - (sy | 0);
|
|
var ify = 1 - fy;
|
|
var row0 = sy0i * SW;
|
|
var row1 = sy1i * SW;
|
|
|
|
var sx = x0;
|
|
for (var x = 0; x < W; x++) {
|
|
var sx0i = sx | 0;
|
|
if (sx0i < 0) sx0i = 0; else if (sx0i > SW1) sx0i = SW1;
|
|
var sx1i = sx0i + 1;
|
|
if (sx1i > SW1) sx1i = SW1;
|
|
var fx = sx - (sx | 0);
|
|
var ifx = 1 - fx;
|
|
|
|
var a = gray[row0 + sx0i];
|
|
var b = gray[row0 + sx1i];
|
|
var c = gray[row1 + sx0i];
|
|
var d = gray[row1 + sx1i];
|
|
var v = (a * ifx + b * fx) * ify + (c * ifx + d * fx) * fy;
|
|
// Selective dither: only the outer smooth region (v 180→240 ramps in).
|
|
if (v > 180) {
|
|
var mix = v >= 240 ? 1 : (v - 180) / 60;
|
|
v += BAYER[(y & 3) * 4 + (x & 3)] * DITHER_STRENGTH * mix;
|
|
}
|
|
// Multiply by 4 to index into 1024-entry palette, then wrap.
|
|
out32[idx++] = palette32[(((v * 4) | 0) - offsetHD) & 1023];
|
|
|
|
sx += dxs;
|
|
}
|
|
sy += dys;
|
|
}
|
|
ctx2d.putImageData(imgOut, 0, 0);
|
|
if (!faded) { faded = true; canvas.style.opacity = '1'; }
|
|
}
|
|
requestAnimationFrame(frame);
|
|
console.log('[fractal-gl] Canvas2D loop started; internal',
|
|
canvas.width, 'x', canvas.height);
|
|
};
|
|
img.src = DIST_URL;
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function () { initFractal('fractal-canvas'); });
|
|
} else {
|
|
initFractal('fractal-canvas');
|
|
}
|