896 lines
28 KiB
HTML
896 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Coming Soon</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0f0f0f;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.main-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.video-wrapper { flex: 1; min-width: 0; }
|
|
|
|
.video-wrapper video {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 40px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.button-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 1rem 2rem;
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
letter-spacing: 0.5px;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: #16213e;
|
|
border-color: #4a4a8a;
|
|
box-shadow: 0 0 20px rgba(74,74,138,0.3);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.92);
|
|
z-index: 100;
|
|
}
|
|
|
|
.overlay.open { display: block; }
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 1.5rem; right: 2rem;
|
|
background: none; border: none;
|
|
color: #888;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.close-btn:hover { color: #fff; }
|
|
|
|
.fractal-layout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: 1.5rem;
|
|
padding: 3rem;
|
|
}
|
|
|
|
.fractal-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.fractal-sidebar button {
|
|
padding: 0.6rem 1.2rem;
|
|
background: transparent;
|
|
color: #666;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.7rem;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.fractal-sidebar button:hover { color: #ccc; border-color: #555; }
|
|
|
|
.fractal-sidebar button.active {
|
|
color: #fff;
|
|
border-color: #4a4a8a;
|
|
background: #1a1a2e;
|
|
box-shadow: 0 0 12px rgba(74,74,138,0.2);
|
|
}
|
|
|
|
.fractal-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.fractal-main canvas {
|
|
max-width: 75vw;
|
|
max-height: 80vh;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 60px rgba(74,74,138,0.2);
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.fractal-label {
|
|
color: #666;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.fluid-canvas-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.fluid-canvas-wrap canvas {
|
|
max-width: 95vw;
|
|
max-height: 90vh;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 60px rgba(74,74,138,0.15);
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.fluid-label {
|
|
position: absolute;
|
|
bottom: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #444;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.main-content { flex-direction: column; align-items: center; }
|
|
.button-sidebar { flex-direction: row; }
|
|
.fractal-layout { flex-direction: column; }
|
|
.fractal-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; max-height: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="main-content">
|
|
<div class="video-wrapper">
|
|
<video autoplay loop muted playsinline id="bgVideo">
|
|
<source src="Whiplash%20doggo%20edition%20%23memes%20%20%23shorts.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="button-sidebar">
|
|
<button class="action-btn" id="fractalBtn">FRACTAL</button>
|
|
<button class="action-btn" id="fluidBtn">FLUID SIM</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="fractalOverlay">
|
|
<button class="close-btn" id="fractalClose">✕</button>
|
|
<div class="fractal-layout">
|
|
<div class="fractal-sidebar" id="fractalTypes">
|
|
<button data-type="julia" class="active">Julia</button>
|
|
<button data-type="mandelbrot">Mandelbrot</button>
|
|
<button data-type="burning">Burning Ship</button>
|
|
<button data-type="tricorn">Tricorn</button>
|
|
<button data-type="newton">Newton</button>
|
|
<button data-type="celtic">Celtic</button>
|
|
<button data-type="cubic_mandel">Cubic M</button>
|
|
<button data-type="cubic_julia">Cubic J</button>
|
|
<button data-type="phoenix">Phoenix</button>
|
|
<button data-type="z4_mandel">z⁴ M</button>
|
|
</div>
|
|
<div class="fractal-main">
|
|
<canvas id="fractalCanvas"></canvas>
|
|
<div class="fractal-label" id="fractalLabel">∞ julia set</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="fluidOverlay">
|
|
<button class="close-btn" id="fluidClose">✕</button>
|
|
<div class="fluid-canvas-wrap">
|
|
<canvas id="fluidCanvas"></canvas>
|
|
</div>
|
|
<div class="fluid-label">drag to disturb the fluid</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ─── procedural palette ───
|
|
const palettes = [
|
|
{ name: 'neon', stops: [
|
|
[0,0,0], [10,10,50], [20,40,120], [60,120,200],
|
|
[100,200,220], [200,220,80], [240,140,40], [200,40,80], [100,10,60]
|
|
]},
|
|
{ name: 'fire', stops: [
|
|
[0,0,0], [40,10,0], [100,20,0], [180,60,0],
|
|
[240,140,20], [255,220,80], [255,255,200]
|
|
]},
|
|
{ name: 'ocean', stops: [
|
|
[0,0,10], [5,20,60], [10,60,120], [40,120,180],
|
|
[80,180,200], [160,220,220], [200,240,240]
|
|
]},
|
|
{ name: 'forest', stops: [
|
|
[5,15,5], [10,40,15], [20,80,30], [60,140,50],
|
|
[120,200,80], [200,220,140], [240,240,200]
|
|
]},
|
|
{ name: 'psych', stops: [
|
|
[0,0,0], [80,0,80], [200,0,100], [255,100,0],
|
|
[255,255,0], [0,200,100], [0,100,200], [80,0,120]
|
|
]},
|
|
];
|
|
|
|
let currentPalette = 0;
|
|
|
|
function buildPalette(name) {
|
|
const p = palettes.find(x => x.name === name) || palettes[0];
|
|
const arr = [];
|
|
const segs = p.stops.length - 1;
|
|
for (let i = 0; i < 256; i++) {
|
|
const t = i / 255;
|
|
const seg = Math.min(segs - 1, Math.floor(t * segs));
|
|
const f = (t * segs) - seg;
|
|
const a = p.stops[seg];
|
|
const b = p.stops[seg + 1];
|
|
arr.push([
|
|
Math.round(a[0] + (b[0] - a[0]) * f),
|
|
Math.round(a[1] + (b[1] - a[1]) * f),
|
|
Math.round(a[2] + (b[2] - a[2]) * f),
|
|
]);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
let palette = buildPalette('neon');
|
|
|
|
function getPaletteColor(t) {
|
|
const i = Math.max(0, Math.min(255, Math.floor(t * 255)));
|
|
return palette[i];
|
|
}
|
|
|
|
function cyclePalette() {
|
|
currentPalette = (currentPalette + 1) % palettes.length;
|
|
palette = buildPalette(palettes[currentPalette].name);
|
|
}
|
|
|
|
// ─── overlay helpers ───
|
|
function openOverlay(id) { document.getElementById(id).classList.add('open'); }
|
|
function closeOverlay(id) { document.getElementById(id).classList.remove('open'); }
|
|
|
|
// ─── FRACTAL ───
|
|
(function() {
|
|
const canvas = document.getElementById('fractalCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const overlay = document.getElementById('fractalOverlay');
|
|
const closeBtn = document.getElementById('fractalClose');
|
|
const label = document.getElementById('fractalLabel');
|
|
const typeBtns = document.querySelectorAll('#fractalTypes button');
|
|
|
|
let running = false;
|
|
let animId = null;
|
|
let startTime = 0;
|
|
let currentType = 'julia';
|
|
|
|
function fractalRender(type, px, py, maxIter, cx, cy) {
|
|
const render = renderers[type];
|
|
if (!render) return { iter: maxIter, zx: 0, zy: 0, maxIter };
|
|
return render(px, py, maxIter, cx, cy);
|
|
}
|
|
|
|
const renderers = {
|
|
julia(px, py, maxIter, cx, cy) {
|
|
let zx = px, zy = py, iter = 0;
|
|
while (zx * zx + zy * zy < 4 && iter < maxIter) {
|
|
const tmp = zx * zx - zy * zy + cx;
|
|
zy = 2 * zx * zy + cy;
|
|
zx = tmp;
|
|
iter++;
|
|
}
|
|
return { iter, zx, zy, maxIter };
|
|
},
|
|
mandelbrot(px, py, maxIter, cx, cy) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const tmp = rz * rz - iz * iz + px;
|
|
iz = 2 * rz * iz + py;
|
|
rz = tmp;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
burning(px, py, maxIter, cx, cy) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const tmp = rz * rz - iz * iz + px;
|
|
iz = Math.abs(2 * rz * iz) + py;
|
|
rz = Math.abs(tmp);
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
tricorn(px, py, maxIter, cx, cy) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const tmp = rz * rz - iz * iz + px;
|
|
iz = -2 * rz * iz + py;
|
|
rz = tmp;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
newton(px, py, maxIter) {
|
|
let rz = px, iz = py, iter = 0;
|
|
const tol = 1e-6;
|
|
while (iter < maxIter) {
|
|
const r2 = rz * rz - iz * iz;
|
|
const i2 = 2 * rz * iz;
|
|
const r3 = r2 * rz - i2 * iz;
|
|
const i3 = r2 * iz + i2 * rz;
|
|
const denomR = 3 * r2;
|
|
const denomI = 3 * i2;
|
|
const denomMag = denomR * denomR + denomI * denomI;
|
|
if (denomMag < 1e-20) break;
|
|
const fR = r3 - 1;
|
|
const fI = i3;
|
|
const nR = rz - (fR * denomR + fI * denomI) / denomMag;
|
|
const nI = iz - (fI * denomR - fR * denomI) / denomMag;
|
|
const dr = nR - rz, di = nI - iz;
|
|
rz = nR; iz = nI; iter++;
|
|
if (dr * dr + di * di < tol) break;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
celtic(px, py, maxIter) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const tmp = Math.abs(rz * rz - iz * iz) + px;
|
|
iz = 2 * Math.abs(rz * iz) + py;
|
|
rz = tmp;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
cubic_mandel(px, py, maxIter) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const r2 = rz * rz - iz * iz;
|
|
const i2 = 2 * rz * iz;
|
|
const r3 = r2 * rz - i2 * iz;
|
|
const i3 = r2 * iz + i2 * rz;
|
|
rz = r3 + px;
|
|
iz = i3 + py;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
cubic_julia(px, py, maxIter, cx, cy) {
|
|
let rz = px, iz = py, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const r2 = rz * rz - iz * iz;
|
|
const i2 = 2 * rz * iz;
|
|
const r3 = r2 * rz - i2 * iz;
|
|
const i3 = r2 * iz + i2 * rz;
|
|
rz = r3 + cx;
|
|
iz = i3 + cy;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
phoenix(px, py, maxIter, cx, cy) {
|
|
let rz = px, iz = py, iter = 0;
|
|
let prevR = 0, prevI = 0;
|
|
const h = 0.4 + 0.2 * Math.sin(startTime * 0.05);
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const tmp = rz * rz - iz * iz + cx + h * prevR;
|
|
prevI = iz;
|
|
iz = 2 * rz * iz + cy + h * prevI;
|
|
prevR = rz;
|
|
rz = tmp;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
z4_mandel(px, py, maxIter) {
|
|
let rz = 0, iz = 0, iter = 0;
|
|
while (rz * rz + iz * iz < 4 && iter < maxIter) {
|
|
const r2 = rz * rz - iz * iz;
|
|
const i2 = 2 * rz * iz;
|
|
const r4 = r2 * r2 - i2 * i2;
|
|
const i4 = 2 * r2 * i2;
|
|
rz = r4 + px;
|
|
iz = i4 + py;
|
|
iter++;
|
|
}
|
|
return { iter, zx: rz, zy: iz, maxIter };
|
|
},
|
|
};
|
|
|
|
function renderFractal(time) {
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
const imageData = ctx.createImageData(w, h);
|
|
const data = imageData.data;
|
|
|
|
const isJulia = currentType === 'julia' || currentType === 'cubic_julia' || currentType === 'phoenix';
|
|
|
|
let cx, cy, zoom, maxIter;
|
|
if (currentType === 'julia') {
|
|
cx = -0.7269 + 0.15 * Math.sin(time * 0.08);
|
|
cy = 0.1889 + 0.15 * Math.cos(time * 0.11);
|
|
zoom = 1.5 + 0.3 * Math.sin(time * 0.04);
|
|
maxIter = 100 + Math.floor(40 * Math.sin(time * 0.06));
|
|
} else if (currentType === 'cubic_julia') {
|
|
cx = 0.4 + 0.3 * Math.sin(time * 0.07);
|
|
cy = 0.4 + 0.3 * Math.cos(time * 0.09);
|
|
zoom = 1.5 + 0.3 * Math.sin(time * 0.04);
|
|
maxIter = 80 + Math.floor(30 * Math.sin(time * 0.06));
|
|
} else if (currentType === 'phoenix') {
|
|
cx = -0.5 + 0.2 * Math.sin(time * 0.06);
|
|
cy = 0.2 + 0.2 * Math.cos(time * 0.08);
|
|
zoom = 1.5 + 0.3 * Math.sin(time * 0.04);
|
|
maxIter = 80 + Math.floor(30 * Math.sin(time * 0.06));
|
|
} else if (currentType === 'newton') {
|
|
cx = 0; cy = 0;
|
|
zoom = 2.0 + 0.4 * Math.sin(time * 0.03);
|
|
maxIter = 40 + Math.floor(20 * Math.sin(time * 0.05));
|
|
} else {
|
|
cx = -0.5 + 0.1 * Math.sin(time * 0.05);
|
|
cy = 0;
|
|
zoom = 1.8 + 0.4 * Math.sin(time * 0.03);
|
|
maxIter = 80 + Math.floor(30 * Math.sin(time * 0.07));
|
|
}
|
|
|
|
const aspect = w / h;
|
|
const xMin = -zoom * aspect;
|
|
const xMax = zoom * aspect;
|
|
const yMin = -zoom;
|
|
const yMax = zoom;
|
|
const renderFn = renderers[currentType];
|
|
|
|
const paletteCycle = time * 0.015;
|
|
|
|
for (let y = 0; y < h; y++) {
|
|
for (let x = 0; x < w; x++) {
|
|
const px = xMin + (x / w) * (xMax - xMin);
|
|
const py = yMin + (y / h) * (yMax - yMin);
|
|
|
|
const result = renderFn(px, py, maxIter, cx, cy);
|
|
const idx = (y * w + x) * 4;
|
|
|
|
if (currentType === 'newton') {
|
|
if (result.iter >= maxIter) {
|
|
data[idx] = 0; data[idx + 1] = 0; data[idx + 2] = 0;
|
|
} else {
|
|
const t = ((result.iter / maxIter + paletteCycle) % 1.0);
|
|
const c = getPaletteColor(t);
|
|
data[idx] = c[0]; data[idx + 1] = c[1]; data[idx + 2] = c[2];
|
|
}
|
|
} else if (result.iter === maxIter) {
|
|
data[idx] = 0; data[idx + 1] = 0; data[idx + 2] = 0;
|
|
} else {
|
|
const smooth = result.iter + 1 - Math.log(Math.log2(Math.sqrt(result.zx * result.zx + result.zy * result.zy)));
|
|
const t = ((smooth / maxIter) + paletteCycle) % 1.0;
|
|
const c = getPaletteColor(t);
|
|
data[idx] = c[0]; data[idx + 1] = c[1]; data[idx + 2] = c[2];
|
|
}
|
|
data[idx + 3] = 255;
|
|
}
|
|
}
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
function resizeCanvas() {
|
|
const sidebarW = document.querySelector('.fractal-sidebar').offsetWidth;
|
|
const availW = window.innerWidth * 0.92 - sidebarW - 48;
|
|
const availH = window.innerHeight * 0.85;
|
|
let size = Math.min(availW, availH, 800);
|
|
size = Math.floor(size / 2) * 2;
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
}
|
|
|
|
function animate() {
|
|
if (!running) return;
|
|
const elapsed = (performance.now() - startTime) / 1000;
|
|
renderFractal(elapsed);
|
|
animId = requestAnimationFrame(animate);
|
|
}
|
|
|
|
function startFractal() {
|
|
running = true;
|
|
startTime = performance.now();
|
|
resizeCanvas();
|
|
animate();
|
|
}
|
|
|
|
function stopFractal() {
|
|
running = false;
|
|
if (animId) { cancelAnimationFrame(animId); animId = null; }
|
|
}
|
|
|
|
function setType(type) {
|
|
currentType = type;
|
|
typeBtns.forEach(b => b.classList.toggle('active', b.dataset.type === type));
|
|
const names = {
|
|
julia: 'julia set', mandelbrot: 'mandelbrot set', burning: 'burning ship',
|
|
tricorn: 'tricorn', newton: 'newton', celtic: 'celtic mandelbrot',
|
|
cubic_mandel: 'cubic mandelbrot', cubic_julia: 'cubic julia',
|
|
phoenix: 'phoenix julia', z4_mandel: 'z⁴ mandelbrot',
|
|
};
|
|
label.textContent = `∞ ${names[type] || type}`;
|
|
}
|
|
|
|
typeBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => setType(btn.dataset.type));
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'p' || e.key === 'P') cyclePalette();
|
|
if (e.key === 'Escape') {
|
|
if (overlay.classList.contains('open')) {
|
|
closeOverlay('fractalOverlay');
|
|
stopFractal();
|
|
}
|
|
if (document.getElementById('fluidOverlay').classList.contains('open')) {
|
|
closeOverlay('fluidOverlay');
|
|
document.getElementById('fluidOverlay').__stopFluid();
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('fractalBtn').addEventListener('click', () => {
|
|
openOverlay('fractalOverlay');
|
|
resizeCanvas();
|
|
startFractal();
|
|
});
|
|
|
|
closeBtn.addEventListener('click', () => { closeOverlay('fractalOverlay'); stopFractal(); });
|
|
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) { closeOverlay('fractalOverlay'); stopFractal(); }
|
|
});
|
|
|
|
window.addEventListener('resize', () => { if (running) resizeCanvas(); });
|
|
|
|
setType('julia');
|
|
})();
|
|
|
|
// ─── FLUID SIMULATION ───
|
|
(function() {
|
|
const canvas = document.getElementById('fluidCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const overlay = document.getElementById('fluidOverlay');
|
|
const closeBtn = document.getElementById('fluidClose');
|
|
|
|
const N = 120;
|
|
const IX = (i, j) => i + j * (N + 2);
|
|
const S = N + 2;
|
|
|
|
let u = new Float32Array(S * S);
|
|
let v = new Float32Array(S * S);
|
|
let d = new Float32Array(S * S);
|
|
let u0 = new Float32Array(S * S);
|
|
let v0 = new Float32Array(S * S);
|
|
let d0 = new Float32Array(S * S);
|
|
|
|
let mouseX = -1, mouseY = -1;
|
|
let prevMouseX = -1, prevMouseY = -1;
|
|
let isDown = false;
|
|
let running = false;
|
|
let animId = null;
|
|
|
|
const dt = 0.15;
|
|
const visc = 0.000001;
|
|
const diff = 0.0000005;
|
|
const forceAmt = 8;
|
|
|
|
overlay.__stopFluid = () => stopFluid();
|
|
|
|
function setBnd(b, x) {
|
|
for (let i = 1; i <= N; i++) {
|
|
x[IX(0, i)] = b === 1 ? -x[IX(1, i)] : x[IX(1, i)];
|
|
x[IX(N+1, i)] = b === 1 ? -x[IX(N, i)] : x[IX(N, i)];
|
|
x[IX(i, 0)] = b === 2 ? -x[IX(i, 1)] : x[IX(i, 1)];
|
|
x[IX(i, N+1)] = b === 2 ? -x[IX(i, N)] : x[IX(i, N)];
|
|
}
|
|
x[IX(0, 0)] = 0.5 * (x[IX(1, 0)] + x[IX(0, 1)]);
|
|
x[IX(0, N+1)] = 0.5 * (x[IX(1, N+1)] + x[IX(0, N)]);
|
|
x[IX(N+1, 0)] = 0.5 * (x[IX(N, 0)] + x[IX(N+1, 1)]);
|
|
x[IX(N+1, N+1)] = 0.5 * (x[IX(N, N+1)] + x[IX(N+1, N)]);
|
|
}
|
|
|
|
function linSolve(b, x, x0, a, c, iter) {
|
|
const cRecip = 1 / c;
|
|
for (let k = 0; k < iter; k++) {
|
|
for (let j = 1; j <= N; j++) {
|
|
for (let i = 1; i <= N; i++) {
|
|
x[IX(i,j)] = (x0[IX(i,j)] + a * (
|
|
x[IX(i-1,j)] + x[IX(i+1,j)] + x[IX(i,j-1)] + x[IX(i,j+1)]
|
|
)) * cRecip;
|
|
}
|
|
}
|
|
setBnd(b, x);
|
|
}
|
|
}
|
|
|
|
function diffuse(b, x, x0, vsc, dt) {
|
|
const a = dt * vsc * N * N;
|
|
linSolve(b, x, x0, a, 1 + 4 * a, 20);
|
|
}
|
|
|
|
function advect(b, d, d0, u, v, dt) {
|
|
const dt0 = dt * N;
|
|
for (let j = 1; j <= N; j++) {
|
|
for (let i = 1; i <= N; i++) {
|
|
let x = i - dt0 * u[IX(i,j)];
|
|
let y = j - dt0 * v[IX(i,j)];
|
|
if (x < 0.5) x = 0.5; if (x > N + 0.5) x = N + 0.5;
|
|
if (y < 0.5) y = 0.5; if (y > N + 0.5) y = N + 0.5;
|
|
const i0 = Math.floor(x); const i1 = i0 + 1;
|
|
const j0 = Math.floor(y); const j1 = j0 + 1;
|
|
const s1 = x - i0; const s0 = 1 - s1;
|
|
const t1 = y - j0; const t0 = 1 - t1;
|
|
d[IX(i,j)] = s0 * (t0 * d0[IX(i0,j0)] + t1 * d0[IX(i0,j1)])
|
|
+ s1 * (t0 * d0[IX(i1,j0)] + t1 * d0[IX(i1,j1)]);
|
|
}
|
|
}
|
|
setBnd(b, d);
|
|
}
|
|
|
|
function project(u, v, p, div) {
|
|
for (let j = 1; j <= N; j++) {
|
|
for (let i = 1; i <= N; i++) {
|
|
div[IX(i,j)] = -0.5 * (
|
|
u[IX(i+1,j)] - u[IX(i-1,j)] + v[IX(i,j+1)] - v[IX(i,j-1)]
|
|
) / N;
|
|
p[IX(i,j)] = 0;
|
|
}
|
|
}
|
|
setBnd(0, div); setBnd(0, p);
|
|
linSolve(0, p, div, 1, 4, 20);
|
|
for (let j = 1; j <= N; j++) {
|
|
for (let i = 1; i <= N; i++) {
|
|
u[IX(i,j)] -= 0.5 * N * (p[IX(i+1,j)] - p[IX(i-1,j)]);
|
|
v[IX(i,j)] -= 0.5 * N * (p[IX(i,j+1)] - p[IX(i,j-1)]);
|
|
}
|
|
}
|
|
setBnd(1, u); setBnd(2, v);
|
|
}
|
|
|
|
function densStep(x, x0, u, v, diff, dt) {
|
|
diffuse(0, x, x0, diff, dt);
|
|
x0.set(x);
|
|
advect(0, x, x0, u, v, dt);
|
|
}
|
|
|
|
function velStep(u, v, u0, v0, visc, dt) {
|
|
diffuse(1, u0, u, visc, dt);
|
|
diffuse(2, v0, v, visc, dt);
|
|
project(u0, v0, u, v);
|
|
advect(1, u, u0, u0, v0, dt);
|
|
advect(2, v, v0, u0, v0, dt);
|
|
project(u, v, u0, v0);
|
|
}
|
|
|
|
function addForce(fx, fy, cx, cy, radius) {
|
|
const px = Math.floor(cx * N);
|
|
const py = Math.floor(cy * N);
|
|
const r = Math.floor(radius * N);
|
|
for (let j = Math.max(1, py - r); j <= Math.min(N, py + r); j++) {
|
|
for (let i = Math.max(1, px - r); i <= Math.min(N, px + r); i++) {
|
|
const dist = Math.sqrt((i - px) ** 2 + (j - py) ** 2);
|
|
if (dist <= r) {
|
|
const strength = (1 - dist / r) * forceAmt;
|
|
u[IX(i,j)] += fx * strength;
|
|
v[IX(i,j)] += fy * strength;
|
|
d[IX(i,j)] += (1 - dist / r) * 3.0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function burstCenter() {
|
|
const px = Math.floor(0.5 * N);
|
|
const py = Math.floor(0.5 * N);
|
|
const r = Math.floor(0.1 * N);
|
|
for (let j = Math.max(1, py - r); j <= Math.min(N, py + r); j++) {
|
|
for (let i = Math.max(1, px - r); i <= Math.min(N, px + r); i++) {
|
|
const dist = Math.sqrt((i - px) ** 2 + (j - py) ** 2);
|
|
if (dist <= r) d[IX(i,j)] += (1 - dist / r) * 5.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
function step() {
|
|
velStep(u, v, u0, v0, visc, dt);
|
|
d0.set(d);
|
|
densStep(d, d0, u, v, diff, dt);
|
|
d0.set(d);
|
|
u0.set(u);
|
|
v0.set(v);
|
|
}
|
|
|
|
function render() {
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
const imageData = ctx.createImageData(w, h);
|
|
const data = imageData.data;
|
|
const scaleX = N / w;
|
|
const scaleY = N / h;
|
|
const paletteShift = (performance.now() - startTime) * 0.0001;
|
|
|
|
for (let y = 0; y < h; y++) {
|
|
for (let x = 0; x < w; x++) {
|
|
const gi = Math.min(N, Math.max(1, Math.floor(x * scaleX) + 1));
|
|
const gj = Math.min(N, Math.max(1, Math.floor(y * scaleY) + 1));
|
|
const dens = d[IX(gi, gj)];
|
|
const idx = (y * w + x) * 4;
|
|
if (dens > 0.01) {
|
|
const t = (Math.min(dens * 0.4, 0.95) + paletteShift) % 1.0;
|
|
const c = getPaletteColor(t);
|
|
data[idx] = c[0]; data[idx + 1] = c[1]; data[idx + 2] = c[2];
|
|
} else {
|
|
data[idx] = 5; data[idx + 1] = 5; data[idx + 2] = 10;
|
|
}
|
|
data[idx + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
let startTime = 0;
|
|
|
|
function resizeFluid() {
|
|
const maxW = window.innerWidth * 0.95;
|
|
const maxH = window.innerHeight * 0.9;
|
|
let size = Math.min(maxW, maxH);
|
|
size = Math.floor(size);
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
}
|
|
|
|
function fluidLoop() {
|
|
if (!running) return;
|
|
if (isDown && prevMouseX >= 0) {
|
|
const dx = mouseX - prevMouseX;
|
|
const dy = mouseY - prevMouseY;
|
|
addForce(dx * 3, dy * 3, mouseX / canvas.width, mouseY / canvas.height, 0.04);
|
|
}
|
|
step();
|
|
render();
|
|
animId = requestAnimationFrame(fluidLoop);
|
|
prevMouseX = mouseX;
|
|
prevMouseY = mouseY;
|
|
}
|
|
|
|
function startFluid() {
|
|
running = true;
|
|
startTime = performance.now();
|
|
resizeFluid();
|
|
fluidLoop();
|
|
}
|
|
|
|
function stopFluid() {
|
|
running = false;
|
|
if (animId) { cancelAnimationFrame(animId); animId = null; }
|
|
}
|
|
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
mouseX = e.clientX - rect.left;
|
|
mouseY = e.clientY - rect.top;
|
|
prevMouseX = mouseX;
|
|
prevMouseY = mouseY;
|
|
isDown = true;
|
|
});
|
|
|
|
window.addEventListener('mouseup', () => { isDown = false; prevMouseX = -1; prevMouseY = -1; });
|
|
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
mouseX = e.clientX - rect.left;
|
|
mouseY = e.clientY - rect.top;
|
|
});
|
|
|
|
canvas.addEventListener('touchstart', (e) => {
|
|
e.preventDefault();
|
|
const rect = canvas.getBoundingClientRect();
|
|
const t = e.touches[0];
|
|
mouseX = t.clientX - rect.left;
|
|
mouseY = t.clientY - rect.top;
|
|
prevMouseX = mouseX;
|
|
prevMouseY = mouseY;
|
|
isDown = true;
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchmove', (e) => {
|
|
e.preventDefault();
|
|
const rect = canvas.getBoundingClientRect();
|
|
const t = e.touches[0];
|
|
mouseX = t.clientX - rect.left;
|
|
mouseY = t.clientY - rect.top;
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchend', (e) => {
|
|
e.preventDefault();
|
|
isDown = false;
|
|
prevMouseX = -1;
|
|
prevMouseY = -1;
|
|
}, { passive: false });
|
|
|
|
document.getElementById('fluidBtn').addEventListener('click', () => {
|
|
u.fill(0); v.fill(0); d.fill(0);
|
|
u0.fill(0); v0.fill(0); d0.fill(0);
|
|
mouseX = -1; mouseY = -1;
|
|
prevMouseX = -1; prevMouseY = -1;
|
|
isDown = false;
|
|
burstCenter();
|
|
openOverlay('fluidOverlay');
|
|
startFluid();
|
|
});
|
|
|
|
closeBtn.addEventListener('click', () => { closeOverlay('fluidOverlay'); stopFluid(); });
|
|
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) { closeOverlay('fluidOverlay'); stopFluid(); }
|
|
});
|
|
|
|
window.addEventListener('resize', () => { if (running) resizeFluid(); });
|
|
})();
|
|
|
|
// ─── unstoppable video ───
|
|
(function() {
|
|
const v = document.getElementById('bgVideo');
|
|
if (!v) return;
|
|
v.addEventListener('contextmenu', e => e.preventDefault());
|
|
v.addEventListener('pause', () => v.play());
|
|
setInterval(() => { if (v.paused) v.play(); }, 200);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|