draw and fixes
This commit is contained in:
+773
@@ -0,0 +1,773 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>awesome johnruina site</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;
|
||||
background: #0f0f0f;
|
||||
font-family: 'Inter', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fluid-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.fluid-canvas-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.fluid-canvas-wrap canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 60px rgba(74,74,138,0.15);
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-bar > * { pointer-events: auto; }
|
||||
|
||||
.back-btn {
|
||||
text-decoration: none;
|
||||
color: #888;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.2s;
|
||||
background: rgba(15,15,15,0.7);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.back-btn:hover { color: #fff; border-color: #555; }
|
||||
|
||||
.fluid-label {
|
||||
position: fixed;
|
||||
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;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* ─── fluid settings panel ─── */
|
||||
|
||||
.fluid-settings {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
padding: 1.2rem;
|
||||
background: rgba(20,20,35,0.85);
|
||||
border: 1px solid #2a2a4a;
|
||||
border-radius: 12px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fluid-settings::-webkit-scrollbar { width: 4px; }
|
||||
.fluid-settings::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
|
||||
|
||||
.settings-title {
|
||||
color: #aaa;
|
||||
font-weight: 800;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.settings-group label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #888;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.settings-group label span {
|
||||
color: #bbb;
|
||||
font-weight: 800;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.settings-group input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #2a2a4a;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-group input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #4a4a8a;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.settings-group input[type="range"]::-webkit-slider-thumb:hover {
|
||||
background: #6a6aaa;
|
||||
}
|
||||
|
||||
.settings-group input[type="range"]::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #4a4a8a;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-subtitle {
|
||||
color: #888;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.palette-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.palette-swatch {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.palette-swatch:hover { border-color: #666; transform: scale(1.1); }
|
||||
.palette-swatch.active { border-color: #4a4a8a; box-shadow: 0 0 8px rgba(74,74,138,0.4); }
|
||||
|
||||
.settings-info {
|
||||
color: #555;
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.settings-info strong { color: #777; }
|
||||
|
||||
.settings-btn {
|
||||
padding: 0.5rem 0;
|
||||
background: transparent;
|
||||
color: #666;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.fluid-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; }
|
||||
.fluid-settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.8rem; }
|
||||
.fluid-settings .settings-title { width: 100%; }
|
||||
.fluid-settings .settings-group { flex: 1; min-width: 100px; }
|
||||
.fluid-settings .palette-row { width: 100%; }
|
||||
.fluid-settings .settings-btn { flex: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<a class="back-btn" href="index.html">← Back</a>
|
||||
</div>
|
||||
|
||||
<div class="fluid-layout">
|
||||
<div class="fluid-canvas-wrap">
|
||||
<canvas id="fluidCanvas"></canvas>
|
||||
</div>
|
||||
<div class="fluid-settings">
|
||||
<div class="settings-title">Fluid Settings</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Viscosity <span id="viscVal">1.0e-6</span></label>
|
||||
<input type="range" id="viscSlider" min="0" max="10" step="0.1" value="1">
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Diffusion <span id="diffVal">5.0e-7</span></label>
|
||||
<input type="range" id="diffSlider" min="0" max="10" step="0.1" value="1">
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Force <span id="forceVal">8.0</span></label>
|
||||
<input type="range" id="forceSlider" min="0.5" max="50" step="0.5" value="8">
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Speed <span id="speedVal">0.15</span></label>
|
||||
<input type="range" id="speedSlider" min="0.01" max="0.5" step="0.01" value="0.15">
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Fade <span id="dissipVal">0.5%</span></label>
|
||||
<input type="range" id="dissipSlider" min="0" max="5" step="0.1" value="0.5">
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>Damping <span id="dampVal">0.2%</span></label>
|
||||
<input type="range" id="dampSlider" min="0" max="2" step="0.05" value="0.2">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="settings-subtitle">Palette</div>
|
||||
<div class="palette-row" id="fluidPaletteRow"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-info">
|
||||
Zoom: <strong id="fluidZoomDisplay">1.00x</strong>
|
||||
</div>
|
||||
|
||||
<button class="settings-btn" id="resetFluidView">Reset View</button>
|
||||
<button class="settings-btn" id="resetFluid">Reset Fluid</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid-label">drag to disturb · WASD to pan · scroll to zoom</div>
|
||||
|
||||
<script>
|
||||
// ─── 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 setPalette(name) {
|
||||
const idx = palettes.findIndex(x => x.name === name);
|
||||
if (idx >= 0) currentPalette = idx;
|
||||
palette = buildPalette(name);
|
||||
document.querySelectorAll('#fluidPaletteRow .palette-swatch').forEach(s => {
|
||||
s.classList.toggle('active', s.dataset.name === name);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── key state ───
|
||||
const keyState = {};
|
||||
document.addEventListener('keydown', (e) => { keyState[e.key.toLowerCase()] = true; });
|
||||
document.addEventListener('keyup', (e) => { keyState[e.key.toLowerCase()] = false; });
|
||||
|
||||
// ─── fluid sim ───
|
||||
const canvas = document.getElementById('fluidCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const offscreen = document.createElement('canvas');
|
||||
const offCtx = offscreen.getContext('2d');
|
||||
|
||||
const N = 160;
|
||||
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 = true;
|
||||
let animId = null;
|
||||
|
||||
function canvasCoords(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: (e.clientX - rect.left) * (canvas.width / rect.width),
|
||||
y: (e.clientY - rect.top) * (canvas.height / rect.height),
|
||||
};
|
||||
}
|
||||
let startTime = 0;
|
||||
|
||||
let dt = 0.15;
|
||||
let visc = 1e-6;
|
||||
let diff = 5e-7;
|
||||
let forceAmt = 8;
|
||||
let dissipation = 0.005;
|
||||
let damping = 0.002;
|
||||
|
||||
let fluidZoom = 1;
|
||||
let fluidPanX = 0;
|
||||
let fluidPanY = 0;
|
||||
|
||||
// ─── slider refs ───
|
||||
const viscSlider = document.getElementById('viscSlider');
|
||||
const diffSlider = document.getElementById('diffSlider');
|
||||
const forceSlider = document.getElementById('forceSlider');
|
||||
const speedSlider = document.getElementById('speedSlider');
|
||||
const dissipSlider = document.getElementById('dissipSlider');
|
||||
const dampSlider = document.getElementById('dampSlider');
|
||||
const viscVal = document.getElementById('viscVal');
|
||||
const diffVal = document.getElementById('diffVal');
|
||||
const forceVal = document.getElementById('forceVal');
|
||||
const speedVal = document.getElementById('speedVal');
|
||||
const dissipVal = document.getElementById('dissipVal');
|
||||
const dampVal = document.getElementById('dampVal');
|
||||
const fluidZoomDisplay = document.getElementById('fluidZoomDisplay');
|
||||
const paletteRow = document.getElementById('fluidPaletteRow');
|
||||
|
||||
function updateSliders() {
|
||||
visc = parseFloat(viscSlider.value) * 1e-6;
|
||||
diff = parseFloat(diffSlider.value) * 5e-7;
|
||||
forceAmt = parseFloat(forceSlider.value);
|
||||
dt = parseFloat(speedSlider.value);
|
||||
dissipation = parseFloat(dissipSlider.value) * 0.01;
|
||||
damping = parseFloat(dampSlider.value) * 0.01;
|
||||
|
||||
const f = (v) => v.toExponential(1);
|
||||
viscVal.textContent = f(visc);
|
||||
diffVal.textContent = f(diff);
|
||||
forceVal.textContent = forceAmt.toFixed(1);
|
||||
speedVal.textContent = dt.toFixed(2);
|
||||
dissipVal.textContent = (dissipation * 100).toFixed(1) + '%';
|
||||
dampVal.textContent = (damping * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
viscSlider.addEventListener('input', updateSliders);
|
||||
diffSlider.addEventListener('input', updateSliders);
|
||||
forceSlider.addEventListener('input', updateSliders);
|
||||
speedSlider.addEventListener('input', updateSliders);
|
||||
dissipSlider.addEventListener('input', updateSliders);
|
||||
dampSlider.addEventListener('input', updateSliders);
|
||||
|
||||
// ─── palette swatches ───
|
||||
(function buildPaletteSwatches() {
|
||||
paletteRow.innerHTML = '';
|
||||
palettes.forEach((p) => {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.className = 'palette-swatch' + (p.name === 'neon' ? ' active' : '');
|
||||
const col = buildPalette(p.name);
|
||||
const avg = col[Math.floor(col.length * 0.6)];
|
||||
swatch.style.background = `rgb(${avg[0]},${avg[1]},${avg[2]})`;
|
||||
swatch.title = p.name;
|
||||
swatch.dataset.name = p.name;
|
||||
swatch.addEventListener('click', () => {
|
||||
setPalette(p.name);
|
||||
});
|
||||
paletteRow.appendChild(swatch);
|
||||
});
|
||||
})();
|
||||
|
||||
// ─── simulation core ───
|
||||
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);
|
||||
|
||||
for (let j = 1; j <= N; j++) {
|
||||
for (let i = 1; i <= N; i++) {
|
||||
d[IX(i,j)] *= (1 - dissipation);
|
||||
u[IX(i,j)] *= (1 - damping);
|
||||
v[IX(i,j)] *= (1 - damping);
|
||||
}
|
||||
}
|
||||
|
||||
d0.set(d);
|
||||
u0.set(u);
|
||||
v0.set(v);
|
||||
}
|
||||
|
||||
function render() {
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
if (w === 0 || h === 0) return;
|
||||
const paletteShift = (performance.now() - startTime) * 0.0001;
|
||||
|
||||
const imgData = offCtx.createImageData(N, N);
|
||||
const data = imgData.data;
|
||||
for (let j = 0; j < N; j++) {
|
||||
for (let i = 0; i < N; i++) {
|
||||
const dens = d[IX(i + 1, j + 1)];
|
||||
const idx = (j * N + i) * 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;
|
||||
}
|
||||
}
|
||||
offCtx.putImageData(imgData, 0, 0);
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.fillStyle = '#05050a';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
const srcSize = N / fluidZoom;
|
||||
const srcX = (0.5 - fluidPanX) * N - srcSize / 2;
|
||||
const srcY = (0.5 - fluidPanY) * N - srcSize / 2;
|
||||
const scale = Math.min(w / srcSize, h / srcSize);
|
||||
const dstW = srcSize * scale;
|
||||
const dstH = srcSize * scale;
|
||||
const dstX = (w - dstW) / 2;
|
||||
const dstY = (h - dstH) / 2;
|
||||
|
||||
const sX = Math.max(0, srcX);
|
||||
const sY = Math.max(0, srcY);
|
||||
const sW = Math.min(N - sX, srcX + srcSize - sX);
|
||||
const sH = Math.min(N - sY, srcY + srcSize - sY);
|
||||
|
||||
if (sW > 0 && sH > 0) {
|
||||
const ratioX = (sX - srcX) / srcSize;
|
||||
const ratioY = (sY - srcY) / srcSize;
|
||||
const ratioW = sW / srcSize;
|
||||
const ratioH = sH / srcSize;
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.drawImage(offscreen, sX, sY, sW, sH,
|
||||
dstX + ratioX * dstW, dstY + ratioY * dstH,
|
||||
ratioW * dstW, ratioH * dstH);
|
||||
}
|
||||
}
|
||||
|
||||
function resizeFluid() {
|
||||
const wrap = document.querySelector('.fluid-canvas-wrap');
|
||||
const rect = wrap.getBoundingClientRect();
|
||||
let size = Math.floor(Math.min(rect.width, rect.height, 800));
|
||||
if (size < 50) size = 400;
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
offscreen.width = N;
|
||||
offscreen.height = N;
|
||||
}
|
||||
|
||||
function fluidLoop() {
|
||||
if (!running) return;
|
||||
|
||||
if (keyState['w']) fluidPanY += 0.01 / fluidZoom;
|
||||
if (keyState['s']) fluidPanY -= 0.01 / fluidZoom;
|
||||
if (keyState['a']) fluidPanX += 0.01 / fluidZoom;
|
||||
if (keyState['d']) fluidPanX -= 0.01 / fluidZoom;
|
||||
|
||||
if (isDown && prevMouseX >= 0) {
|
||||
const mx = (mouseX - canvas.width / 2) / canvas.width / fluidZoom + fluidPanX + 0.5;
|
||||
const my = (mouseY - canvas.height / 2) / canvas.height / fluidZoom + fluidPanY + 0.5;
|
||||
const pmx = (prevMouseX - canvas.width / 2) / canvas.width / fluidZoom + fluidPanX + 0.5;
|
||||
const pmy = (prevMouseY - canvas.height / 2) / canvas.height / fluidZoom + fluidPanY + 0.5;
|
||||
const dx = mx - pmx;
|
||||
const dy = my - pmy;
|
||||
addForce(dx * 3, dy * 3, mx, my, 0.04 / fluidZoom);
|
||||
}
|
||||
|
||||
step();
|
||||
render();
|
||||
fluidZoomDisplay.textContent = fluidZoom.toFixed(2) + 'x';
|
||||
|
||||
animId = requestAnimationFrame(fluidLoop);
|
||||
prevMouseX = mouseX;
|
||||
prevMouseY = mouseY;
|
||||
}
|
||||
|
||||
function resetFluid() {
|
||||
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();
|
||||
}
|
||||
|
||||
// ─── events ───
|
||||
function mouseDown(e) {
|
||||
const p = canvasCoords(e);
|
||||
mouseX = p.x; mouseY = p.y;
|
||||
prevMouseX = mouseX; prevMouseY = mouseY;
|
||||
isDown = true;
|
||||
}
|
||||
|
||||
function mouseMove(e) {
|
||||
const p = canvasCoords(e);
|
||||
mouseX = p.x; mouseY = p.y;
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', mouseDown);
|
||||
window.addEventListener('mouseup', () => { isDown = false; prevMouseX = -1; prevMouseY = -1; });
|
||||
canvas.addEventListener('mousemove', mouseMove);
|
||||
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0) fluidZoom *= 1.15;
|
||||
else fluidZoom /= 1.15;
|
||||
fluidZoom = Math.max(0.1, Math.min(100, fluidZoom));
|
||||
}, { passive: false });
|
||||
|
||||
function touchStart(e) {
|
||||
e.preventDefault();
|
||||
const p = canvasCoords(e.touches[0]);
|
||||
mouseX = p.x; mouseY = p.y;
|
||||
prevMouseX = mouseX; prevMouseY = mouseY;
|
||||
isDown = true;
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
e.preventDefault();
|
||||
const p = canvasCoords(e.touches[0]);
|
||||
mouseX = p.x; mouseY = p.y;
|
||||
}
|
||||
|
||||
canvas.addEventListener('touchstart', touchStart, { passive: false });
|
||||
canvas.addEventListener('touchmove', touchMove, { passive: false });
|
||||
canvas.addEventListener('touchend', (e) => {
|
||||
e.preventDefault();
|
||||
isDown = false;
|
||||
prevMouseX = -1;
|
||||
prevMouseY = -1;
|
||||
}, { passive: false });
|
||||
|
||||
document.getElementById('resetFluidView').addEventListener('click', () => {
|
||||
fluidZoom = 1;
|
||||
fluidPanX = 0;
|
||||
fluidPanY = 0;
|
||||
});
|
||||
|
||||
document.getElementById('resetFluid').addEventListener('click', resetFluid);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') window.location.href = 'index.html';
|
||||
});
|
||||
|
||||
window.addEventListener('resize', resizeFluid);
|
||||
|
||||
// ─── start ───
|
||||
updateSliders();
|
||||
resizeFluid();
|
||||
burstCenter();
|
||||
startTime = performance.now();
|
||||
fluidLoop();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user