575 lines
20 KiB
JavaScript
575 lines
20 KiB
JavaScript
/* FluidSim — Navier–Stokes 2D sıvı simülatörü
|
||
* ---
|
||
* Sıfır kütüphane · saf Canvas 2D · tek dosya
|
||
* Çekirdek: Jos Stam "Real-Time Fluid Dynamics for Games" (2003) uyarlaması.
|
||
* - diffuse : viskozite & yayılım → Gauss–Seidel iterasyonu
|
||
* - project : basınç (Poisson) çözümü → divergence düzeltme (20 iterasyon)
|
||
* - advect : semi-Lagrangian geriye-akış + bilineer interpolasyon
|
||
* Alanlar: global u,v (hız), dens (yoğunluk) — 128×128 grid (sınır hücresi dahil S=N+2).
|
||
*
|
||
* Etkileşim: sürükle → kuvvet+renk; W rüzgar, V vortex, C renk modu, R reset.
|
||
* Görsel: putImageData ile TEK blit (fillRect kullanılmıyor). Parçacık izleri
|
||
* overlay canvas'ta yaşar (%solma ile kuyruk). 60 FPS hedefi; altına düşünce
|
||
* grid otomatik 128→96→64 küçülür.
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
|
||
/* ────────────────────── DOM ────────────────────── */
|
||
var canvas = document.getElementById('fluidCanvas');
|
||
var pwrap = canvas.parentNode;
|
||
var ctx = canvas.getContext('2d', { alpha: false });
|
||
|
||
var fpsEl = document.getElementById('fpsReadout');
|
||
var gridEl = document.getElementById('gridReadout');
|
||
var modeEl = document.getElementById('modeReadout');
|
||
var partEl = document.getElementById('partReadout');
|
||
var outVis = document.getElementById('viscosityOut');
|
||
var outDiff = document.getElementById('diffusionOut');
|
||
var outParts = document.getElementById('partsOut');
|
||
var stVort = document.getElementById('stVortex');
|
||
var stIter = document.getElementById('stIter');
|
||
var stAuto = document.getElementById('stAuto');
|
||
|
||
// Görünüm modu butonları
|
||
var modeItems = Array.prototype.slice.call(
|
||
document.querySelectorAll('.ml-item[data-mode]')
|
||
);
|
||
|
||
/* ───────────────── grid / alanlar ───────────────── */
|
||
var GRIDS = [128, 96, 64];
|
||
var N = GRIDS[0], S = N + 2, SIZE = S * S;
|
||
var iterProject = 20;
|
||
|
||
var u = new Float32Array(SIZE); // yatay hız
|
||
var v = new Float32Array(SIZE); // dikey hız
|
||
var u0 = new Float32Array(SIZE); // u kaynak (kuvvet tamponu)
|
||
var v0 = new Float32Array(SIZE);
|
||
var dens = new Float32Array(SIZE);
|
||
var dens0 = new Float32Array(SIZE);
|
||
var div = new Float32Array(SIZE); // project yardımcı (p)
|
||
var psc = new Float32Array(SIZE);
|
||
|
||
var visc = 0.0002; // viskozite (slider)
|
||
var diffu = 0.0002; // diffusion
|
||
var dtStep = 0.16;
|
||
|
||
var renderModeState = 'velocity'; // 'density' | 'velocity' | 'magnitude'
|
||
var allowParticles = true;
|
||
|
||
function IX(i, j) { return i + S * j; }
|
||
function CLAMP(x, lo, hi) { return x < lo ? lo : (x > hi ? hi : x); }
|
||
|
||
/* ──────── sınır koşulları (duvara sıkış) ──────── */
|
||
function set_bnd(b, x) {
|
||
for (var j = 1; j <= N; j++) {
|
||
x[IX(0, j)] = b === 2 ? -x[IX(1, j)] : x[IX(1, j)];
|
||
x[IX(N + 1, j)] = b === 2 ? -x[IX(N, j)] : x[IX(N, j)];
|
||
x[IX(j, 0)] = b === 1 ? -x[IX(j, 1)] : x[IX(j, 1)];
|
||
x[IX(j, N + 1)] = b === 1 ? -x[IX(j, N)] : x[IX(j, 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)]);
|
||
}
|
||
|
||
/* ────────────────── çekirdek ───────────────────── */
|
||
function addSource(x, s, dt0) {
|
||
for (var i = 0; i < SIZE; i++) x[i] += dt0 * s[i];
|
||
}
|
||
|
||
// Gauss–Seidel yumuşatma (diffuse / project ortak)
|
||
function linSolve(b, x, x0, a, c) {
|
||
var cr = 1 / c;
|
||
for (var k = 0; k < iterProject; k++) {
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var 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)])) * cr;
|
||
}
|
||
}
|
||
set_bnd(b, x);
|
||
}
|
||
}
|
||
|
||
// viskozite difüzyonu (x kaynağı x0'dan)
|
||
function diffuse(b, x, x0, diff, dt0) {
|
||
var a = dt0 * diff * N * N;
|
||
linSolve(b, x, x0, a, 1 + 4 * a);
|
||
}
|
||
|
||
// semi-Lagrangian advect (geriye iz + bilineer interpolasyon)
|
||
function advect(b, d, d0, uu, vv, dt0) {
|
||
var dt0x = dt0 * N;
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var i = 1; i <= N; i++) {
|
||
var xp = i - dt0x * uu[IX(i, j)];
|
||
var yp = j - dt0x * vv[IX(i, j)];
|
||
if (xp < 0.5) xp = 0.5; else if (xp > N + 0.5) xp = N + 0.5;
|
||
if (yp < 0.5) yp = 0.5; else if (yp > N + 0.5) yp = N + 0.5;
|
||
var i0 = xp | 0, i1 = i0 + 1;
|
||
var j0 = yp | 0, j1 = j0 + 1;
|
||
var s1 = xp - i0, s0 = 1 - s1;
|
||
var t1 = yp - j0, 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)]);
|
||
}
|
||
}
|
||
set_bnd(b, d);
|
||
}
|
||
|
||
// basınç projeksiyonu — divergence temizliği (Poisson yaklaşımı)
|
||
function project(uu, vv, p, divv) {
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var i = 1; i <= N; i++) {
|
||
divv[IX(i, j)] = -0.5 * (uu[IX(i + 1, j)] - uu[IX(i - 1, j)] +
|
||
vv[IX(i, j + 1)] - vv[IX(i, j - 1)]) / N;
|
||
p[IX(i, j)] = 0;
|
||
}
|
||
}
|
||
set_bnd(0, divv);
|
||
set_bnd(0, p);
|
||
// Poisson çözümü (Gauss–Seidel) — 20 iterasyon
|
||
for (var k = 0; k < iterProject; k++) {
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var i = 1; i <= N; i++) {
|
||
p[IX(i, j)] = (divv[IX(i, j)] +
|
||
p[IX(i + 1, j)] + p[IX(i - 1, j)] +
|
||
p[IX(i, j + 1)] + p[IX(i, j - 1)]) * 0.25;
|
||
}
|
||
}
|
||
set_bnd(0, p);
|
||
}
|
||
// basınç gradyanı çıkar → divergence'suz hız
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var i = 1; i <= N; i++) {
|
||
uu[IX(i, j)] -= 0.5 * (p[IX(i + 1, j)] - p[IX(i - 1, j)]) * N;
|
||
vv[IX(i, j)] -= 0.5 * (p[IX(i, j + 1)] - p[IX(i, j - 1)]) * N;
|
||
}
|
||
}
|
||
set_bnd(1, uu);
|
||
set_bnd(2, vv);
|
||
}
|
||
|
||
// bir tam hız adımı — sequence: source→diffuse→project→advect→project
|
||
function stepVel() {
|
||
var dt0 = dtStep;
|
||
addSource(u, u0, dt0);
|
||
addSource(v, v0, dt0);
|
||
diffuse(1, u0, u, visc, dt0);
|
||
diffuse(2, v0, v, visc, dt0);
|
||
u.set(u0); v.set(v0);
|
||
// clear accumulation (u0/v0 artık geçici)
|
||
u0.fill(0); v0.fill(0);
|
||
project(u, v, psc, div);
|
||
// advect — iki pass'i tek geçiş (çift tampon uzun)
|
||
// advect(1, u, u_old, u_vect, v_vect)
|
||
// Önce u'yu tmp'ye kopyalamak istiyoruz: burada global tampon tek yeterli.
|
||
// JS'te diziyi kendi kaynağından okumak "in-place" çalışır ama doğruluk için
|
||
// hedefe ayrı tampon veriyoruz (üst sınır S*S copy, 60fps'de kabul).
|
||
/* semi-lagrangian eşzamanlı : d = F(u), kaynağı d0 ver. Güncelleneni d0,
|
||
sonra ana dizgeye geri koy */
|
||
// u_hızları eşzamanlı erişim: Şu an u projekte edilmiş; advect için
|
||
// ESEK: kaynak(eski u) ile hedef(yeni u) ayrı olmalı. u'yu advect etmeden
|
||
// önce eski halini yedeğe alalım:
|
||
var uOld = u.slice(0);
|
||
var vOld = v.slice(0);
|
||
advect(1, u, uOld, uOld, vOld, dt0); // hedef u ← trac(uOld, uOld,vOld)
|
||
advect(2, v, vOld, uOld, vOld, dt0);
|
||
project(u, v, psc, div);
|
||
}
|
||
|
||
// yoğunluk adımı: source → diffuse → advect
|
||
function stepDens() {
|
||
var dt0 = dtStep;
|
||
addSource(dens, dens0, dt0);
|
||
dens0.fill(0); // dens0 = diffusion için kaynak tamponu olacak
|
||
// diffüz: dens ← yumuşat(dens)
|
||
var dOld = dens.slice(0);
|
||
diffuse(0, dens, dOld, diffu, dt0);
|
||
advect(0, dens, dOld, u, v, dt0);
|
||
}
|
||
|
||
/* ────────────── Koordinat / ölçek ────────────── */
|
||
function canvasRect() {
|
||
var r = canvas.getBoundingClientRect();
|
||
return r;
|
||
}
|
||
function canvasToGridPx() {
|
||
// grid cell coords → canvas piksel
|
||
var w = canvas.width, h = canvas.height;
|
||
return { pw: w / S, ph: h / S };
|
||
}
|
||
|
||
/* ────────────── GÖRSEL (putImageData) ────────── */
|
||
var img = null;
|
||
function paint() {
|
||
if (!img || img.width !== canvas.width || img.height !== canvas.height) {
|
||
img = ctx.createImageData(canvas.width, canvas.height);
|
||
}
|
||
var data = img.data;
|
||
var st = canvasToGridPx();
|
||
var pw = st.pw, ph = st.ph;
|
||
|
||
for (var j = 1; j <= N; j++) {
|
||
var py0 = ((j - 1) * ph) | 0;
|
||
var py1 = (j * ph) | 0;
|
||
for (var i = 1; i <= N; i++) {
|
||
var px0 = ((i - 1) * pw) | 0;
|
||
var px1 = (i * pw) | 0;
|
||
var idxCell = IX(i, j);
|
||
var r0, g0, b0, a0;
|
||
|
||
if (renderModeState === 'density') {
|
||
var d = dens[idxCell];
|
||
var gv = Math.min(1, d);
|
||
var vv = 255 * gv;
|
||
a0 = (gv * 255) | 0; // alpha = density (bulanık görünüm)
|
||
// sarı-yeşil neon, alfa ile görünürlük
|
||
r0 = (180 * gv) | 0;
|
||
g0 = 255;
|
||
b0 = (90 * gv) | 0;
|
||
} else if (renderModeState === 'velocity') {
|
||
var uu = u[idxCell], vv2 = v[idxCell];
|
||
var sp = Math.sqrt(uu * uu + vv2 * vv2);
|
||
var hue = (Math.atan2(vv2, uu) * 57.2958 + 180 + 360) % 360;
|
||
var sat = Math.min(100, 60 + sp * 10);
|
||
var lit = Math.min(55, 14 + sp * 8);
|
||
var c = hslToRgb(hue, sat, lit);
|
||
r0 = c[0]; g0 = c[1]; b0 = c[2]; a0 = 255;
|
||
} else { // magnitude — heatmap (sıcak-soğuk)
|
||
var s = Math.sqrt(u[idxCell] * u[idxCell] + v[idxCell] * v[idxCell]);
|
||
var t = Math.min(1, s / 12);
|
||
// koyu mavi → camgöbeği → sarı-beyaz
|
||
r0 = (20 + t * 235) | 0;
|
||
g0 = (60 + t * 160) | 0;
|
||
b0 = (240 - t * 150) | 0;
|
||
a0 = 255;
|
||
}
|
||
|
||
for (var py = py0; py < py1; py++) {
|
||
var row = py * canvas.width;
|
||
for (var px = px0; px < px1; px++) {
|
||
var o = (row + px) << 2;
|
||
data[o] = r0; data[o + 1] = g0;
|
||
data[o + 2] = b0; data[o + 3] = a0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
ctx.putImageData(img, 0, 0);
|
||
}
|
||
|
||
function hslToRgb(h, s, l) {
|
||
h = h / 360;
|
||
s = s / 100; l = l / 100;
|
||
var m;
|
||
if (s === 0) { m = l; return [m * 255, m * 255, m * 255]; }
|
||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||
var p = 2 * l - q;
|
||
function hu2(h4) {
|
||
if (h4 < 0) h4 += 1;
|
||
if (h4 > 1) h4 -= 1;
|
||
if (h4 < 1 / 6) return p + (q - p) * 6 * h4;
|
||
if (h4 < 1 / 2) return q;
|
||
if (h4 < 2 / 3) return p + (q - p) * (2 / 3 - h4) * 6;
|
||
return p;
|
||
}
|
||
return [hu2(h + 1 / 3) * 255, hu2(h) * 255, hu2(h - 1 / 3) * 255];
|
||
}
|
||
|
||
/* ───────────── PARÇACIK İZLERİ (overlay) ──────── */
|
||
var pctx = null;
|
||
var particles = [];
|
||
var partCount = 200;
|
||
|
||
function ensureOverlay() {
|
||
if (!pctx) {
|
||
var pc = document.createElement('canvas');
|
||
pc.style.cssText =
|
||
'position:absolute;left:0;top:0;width:100%;height:100%;' +
|
||
'pointer-events:none;mix-blend-mode:screen;';
|
||
pwrap.appendChild(pc);
|
||
pctx = pc.getContext('2d');
|
||
pctx.canvas.width = canvas.width;
|
||
pctx.canvas.height = canvas.height;
|
||
}
|
||
if (pctx.canvas.width !== canvas.width) {
|
||
pctx.canvas.width = canvas.width;
|
||
pctx.canvas.height = canvas.height;
|
||
}
|
||
}
|
||
|
||
function resetParticles() {
|
||
particles = [];
|
||
var n = partCount;
|
||
for (var k = 0; k < n; k++) {
|
||
particles.push({
|
||
x: Math.random(), y: Math.random(), // 0..1 sahnede
|
||
px: 0, py: 0
|
||
});
|
||
}
|
||
}
|
||
|
||
function drawParticles() {
|
||
if (!allowParticles) { pctx.clearRect && pctx.clearRect(0, 0, pctx.canvas.width, pctx.canvas.height); return; }
|
||
var n = Math.min(partCount, particles.length);
|
||
ensureOverlay();
|
||
// fade: kuyruk bırak (önceki + hafif silik likit)
|
||
pctx.globalCompositeOperation = 'destination-out';
|
||
pctx.fillStyle = 'rgba(0,0,0,0.10)';
|
||
pctx.fillRect(0, 0, pctx.canvas.width, pctx.canvas.height);
|
||
pctx.globalCompositeOperation = 'lighter';
|
||
pctx.globalAlpha = 0.85;
|
||
|
||
for (var k = 0; k < n; k++) {
|
||
var pt = particles[k];
|
||
pt.px = pt.x; pt.py = pt.y;
|
||
// velocity'den advect (sahne 0..1 → hücre)
|
||
var gx = CLAMP(Math.floor(pt.x * N) + 1, 1, N);
|
||
var gy = CLAMP(Math.floor(pt.y * N) + 1, 1, N);
|
||
var idx = IX(gx, gy);
|
||
var cn = N; // hücre boyutu 1/.. — normalize
|
||
// hareket (uygun hız sabitleri — görsel ahenk için)
|
||
pt.x += u[idx] * 0.004;
|
||
pt.y += v[idx] * 0.004;
|
||
if (pt.x < 0 ) pt.x = 1;
|
||
else if (pt.x > 1) pt.x = 0;
|
||
if (pt.y < 0) pt.y = 1;
|
||
else if (pt.y > 1) pt.y = 0;
|
||
var X = pt.x * pctx.canvas.width;
|
||
var Y = pt.y * pctx.canvas.height;
|
||
var col = hslToRgb2((k * 3) % 360, 90, 60);
|
||
pctx.strokeStyle = 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',0.9)';
|
||
pctx.lineWidth = 1;
|
||
pctx.beginPath();
|
||
pctx.moveTo(pt.px * pctx.canvas.width, pt.py * pctx.canvas.height);
|
||
pctx.lineTo(X, Y);
|
||
pctx.stroke();
|
||
}
|
||
pctx.globalAlpha = 1;
|
||
pctx.globalCompositeOperation = 'source-over';
|
||
}
|
||
function hslToRgb2(h, s, l) {
|
||
// h[0,360] s,l[0,100] — basit rgb
|
||
h = (h % 360 + 360) % 360 / 360; s/=100; l/=100;
|
||
var r,g,b;
|
||
if (s===0){r=g=b=l;}
|
||
else{function hue2giu(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;}
|
||
var q = l<0.5? l*(1+s): l+s-l*s; var p = 2*l-q;
|
||
r=hue2giu(p,q,h+1/3); g=hue2giu(p,q,h); b=hue2giu(p,q,h-1/3);}
|
||
return [r*255|0,g*255|0,b*255|0];
|
||
}
|
||
|
||
/* ───────────── güçler: mouse/W/V ─────────────── */
|
||
function splat(x, y, r, cu, cv) {
|
||
// halkasal değil: Gaussian etkisi yaklaşımı
|
||
var d2 = r * r;
|
||
var xi = Math.floor(x * N) + 1, yi = Math.floor(y * N) + 1;
|
||
for (var j = -2; j <= 2; j++) {
|
||
for (var i = -2; i <= 2; i++) {
|
||
var gx = xi + i, gy = yi + j;
|
||
if (gx < 1 || gx > N || gy < 1 || gy > N) continue;
|
||
var idx = IX(gx, gy);
|
||
var w = Math.max(0, 1 - (i * i + j * j) / (r * r * 0.8));
|
||
u[idx] += cu * w * 0.5;
|
||
v[idx] += cv * w * 0.5;
|
||
dens[idx] += 0.8 * w * 0.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
var windOn = false, vortexOn = false;
|
||
var refX = 0, refY = 0;
|
||
|
||
canvas.addEventListener('pointerdown', function (e) {
|
||
e.preventDefault();
|
||
var r = canvas.getBoundingClientRect();
|
||
refX = (e.clientX - r.left) / r.width;
|
||
refY = (e.clientY - r.top) / r.height;
|
||
try { canvas.setPointerCapture(e.pointerId); } catch (err) {}
|
||
});
|
||
canvas.addEventListener('pointermove', function (e) {
|
||
if (e.buttons !== 1) return;
|
||
var r = canvas.getBoundingClientRect();
|
||
var nx = (e.clientX - r.left) / r.width;
|
||
var ny = (e.clientY - r.top) / r.height;
|
||
// sürükleme yön vektörü
|
||
var dx = nx - refX, dy = ny - refY;
|
||
splat(nx, ny, 0.03, dx * 40, dx * 40); // kuvvet hıza: x dominant
|
||
splat(nx, ny, 0.02, 0, 0); // ayrı yoğunluk damlası
|
||
splat(nx, ny, 0.025, dx * 200, dy * 200);
|
||
refX = nx; refY = ny;
|
||
});
|
||
|
||
function frameAmbient() {
|
||
if (windOn) {
|
||
// soldan sürekli sağa kuvvet (30px kalın sütun)
|
||
for (var j = 1; j <= N; j++) {
|
||
var wf = 0.6 + 0.5 * Math.sin(j / N * Math.PI * 2);
|
||
for (var i = 1; i <= Math.floor(N * 0.15); i++) {
|
||
var idx = IX(i, j);
|
||
u[idx] += (14 + 9 * wf);
|
||
}
|
||
}
|
||
}
|
||
if (vortexOn) {
|
||
// merkez çevresine dönel kuvvet
|
||
var cx = N * 0.5, cy = N * 0.5;
|
||
for (var j = 1; j <= N; j++) {
|
||
for (var i = 1; i <= N; i++) {
|
||
var dx = (i - cx), dy = (j - cy);
|
||
var rr = Math.sqrt(dx * dx + dy * dy);
|
||
if (rr < 4 || rr > N * 0.4) continue;
|
||
// teğet kuvvet (saat yönü)
|
||
var tang = 18 / (rr + 2);
|
||
var idx = IX(i, j);
|
||
u[idx] += -dy / rr * tang;
|
||
v[idx] += dx / rr * tang;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ──── ANA DÖNGÜ / FPS / grid-oupdate ──── */
|
||
var fpsSum = 0, fpsCount = 0, fpsShow = 0;
|
||
var downTicks = 0;
|
||
var RaF = requestAnimationFrame.bind(window);
|
||
|
||
function frameSizeSync() {
|
||
// canvas fiziksel boyutunu aspect + panel ölçüsüne eşle (devicePixelRatio 1)
|
||
var w = canvas.clientWidth;
|
||
var area = canvas.clientHeight || 420; // css
|
||
if (w > 0 && canvas.width !== w) canvas.width = w;
|
||
if (area > 0 && canvas.height !== area) canvas.height = area;
|
||
}
|
||
|
||
function resetScene() {
|
||
u.fill(0); v.fill(0); u0.fill(0); v0.fill(0);
|
||
dens.fill(0.0001); dens0.fill(0);
|
||
windOn = false; vortexOn = false;
|
||
if (stVort) stVort.textContent = '';
|
||
}
|
||
|
||
function doFrame(now) {
|
||
RaF(doFrame);
|
||
// canlı yeniden boyut + FPS
|
||
frameSizeSync();
|
||
// FPS hesapla: her kare akümülasyon
|
||
if (now - (window.__lu || 0) > 500) {
|
||
fpsShow = fpsCount * 1000 / (now - (window.__lu || 1));
|
||
fpsEl.textContent = Math.round(fpsShow);
|
||
// auto-grid (60 hedefin altına ≤ %52 : düşür)
|
||
if (fpsShow < 52) { downTicks++; if (downTicks > 20) downscale(); }
|
||
else downTicks = 0;
|
||
fpsCount = 0; window.__lu = now;
|
||
}
|
||
fpsCount++;
|
||
|
||
frameAmbient();
|
||
|
||
// fizik adımları — dt tipik performans için 0.5 (adım başına yarım çevrim)
|
||
stepVel();
|
||
stepDens();
|
||
|
||
paint();
|
||
drawParticles();
|
||
}
|
||
|
||
function downscale() {
|
||
var ci = GRIDS.indexOf(N);
|
||
if (ci < GRIDS.length - 1) {
|
||
N = GRIDS[ci + 1];
|
||
S = N + 2; SIZE = S * S;
|
||
u = new Float32Array(SIZE); v = new Float32Array(SIZE);
|
||
u0 = new Float32Array(SIZE); v0 = new Float32Array(SIZE);
|
||
dens = new Float32Array(SIZE); dens0 = new Float32Array(SIZE);
|
||
div = new Float32Array(SIZE); psc = new Float32Array(SIZE);
|
||
dens.fill(0.001);
|
||
gridEl.textContent = N;
|
||
resetParticles();
|
||
}
|
||
downTicks = 0;
|
||
}
|
||
|
||
/* ─────────────── KONTROLLER ─────────────── */
|
||
function setupModeButtons() {
|
||
modeEl.textContent = renderModeState.toUpperCase();
|
||
modeItems.forEach(function (el) {
|
||
el.addEventListener('click', function () {
|
||
renderModeState = el.getAttribute('data-mode');
|
||
modeEl.textContent = renderModeState.toUpperCase();
|
||
modeItems.forEach(function (o) { o.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
window.addEventListener('keydown', function (e) {
|
||
var k = e.key.toLowerCase();
|
||
if (k === 'w') { windOn = true; }
|
||
else if (k === 'v') { vortexOn = true; }
|
||
else if (k === 'c') {
|
||
// döngü modu
|
||
var modes = ['density', 'velocity', 'magnitude'];
|
||
var ci = modes.indexOf(renderModeState);
|
||
var nx = modes[(ci + 1) % modes.length];
|
||
renderModeState = nx;
|
||
modeEl.textContent = nx.toUpperCase();
|
||
modeItems.forEach(function (o) { o.classList.remove('active');
|
||
if (o.getAttribute('data-mode') === nx) o.classList.add('active');
|
||
});
|
||
}
|
||
else if (k === 'r') resetScene();
|
||
});
|
||
window.addEventListener('keyup', function (e) {
|
||
var k = e.key.toLowerCase();
|
||
if (k === 'w') windOn = false;
|
||
else if (k === 'v') vortexOn = false;
|
||
});
|
||
|
||
// slider bağlama — 0..200 → 0.00001..0.001 scale
|
||
function bindSlider(id, outId, setter, scale) {
|
||
var el = document.getElementById(id);
|
||
var out = document.getElementById(outId);
|
||
if (!el || !out) return;
|
||
function upd() {
|
||
var raw = parseInt(el.value, 10);
|
||
var val = raw * scale;
|
||
setter(val);
|
||
out.textContent = val.toFixed(5).replace(/0+$/, '').replace(/\.$/, '');
|
||
}
|
||
el.addEventListener('input', upd);
|
||
upd();
|
||
}
|
||
bindSlider('viscosity', 'viscosityOut', function (x) { visc = x; }, 0.00001);
|
||
bindSlider('diffusion', 'diffusionOut', function (x) { diffu = x; }, 0.00001);
|
||
|
||
// parçacık sayısı
|
||
var partsSep = document.getElementById('particles');
|
||
partsSep && partsSep.addEventListener('input', function () {
|
||
partCount = parseInt(partsSep.value, 10);
|
||
partEl.textContent = partCount;
|
||
resetParticles();
|
||
});
|
||
|
||
/* ─────────────── BAŞLAT ─────────────── */
|
||
function boot() {
|
||
outParts && (outParts.textContent = partCount);
|
||
partEl.textContent = partCount;
|
||
gridEl.textContent = N;
|
||
fpsEl.textContent = '0';
|
||
stIter && (stIter.textContent = iterProject);
|
||
stAuto && (stAuto.textContent = N + ' (otomatik)');
|
||
setupModeButtons();
|
||
resetScene();
|
||
resetParticles();
|
||
ensureOverlay();
|
||
RaF(doFrame);
|
||
}
|
||
|
||
boot();
|
||
})();
|