function MainComponent() { const [viscosity, setViscosity] = React.useState(0.1); const [diffusion, setDiffusion] = React.useState(0.1); const [velocity, setVelocity] = React.useState(50); const canvasRef = React.useRef(null); React.useEffect(()=>{ const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let animationFrameId; const N = 256; const size = canvas.width; const dx = size / N; const dt = 0.1; let u = new Array(N * N).fill(0); let v = new Array(N * N).fill(0); let u_prev = new Array(N * N).fill(0); let v_prev = new Array(N * N).fill(0); let dens = new Array(N * N).fill(0); let dens_prev = new Array(N * N).fill(0); function IX(x, y) { return x + y * N; } function addSource(x, s, dt) { for(let i = 0; i < N * N; i++)x[i] += dt * s[i]; } function diffuse(b, x, x0, diff, dt) { let a = dt * diff * N * N; for(let k = 0; k < 20; k++){ for(let i = 1; i < N - 1; i++){ for(let j = 1; j < N - 1; j++){ 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)])) / (1 + 4 * a); } } } } function advect(b, d, d0, u, v, dt) { let i0, j0, i1, j1; let x, y, s0, t0, s1, t1, dt0; dt0 = dt * N; for(let i = 1; i < N - 1; i++){ for(let j = 1; j < N - 1; j++){ x = i - dt0 * u[IX(i, j)]; y = j - dt0 * v[IX(i, j)]; if (x < 0.5) x = 0.5; if (x > N + 0.5) x = N + 0.5; i0 = Math.floor(x); i1 = i0 + 1; if (y < 0.5) y = 0.5; if (y > N + 0.5) y = N + 0.5; j0 = Math.floor(y); j1 = j0 + 1; s1 = x - i0; s0 = 1 - s1; t1 = y - 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)]); } } } function project(u, v, p, div) { let h = 1.0 / N; for(let i = 1; i < N - 1; i++){ for(let j = 1; j < N - 1; j++){ div[IX(i, j)] = -0.5 * h * (u[IX(i + 1, j)] - u[IX(i - 1, j)] + v[IX(i, j + 1)] - v[IX(i, j - 1)]); p[IX(i, j)] = 0; } } for(let k = 0; k < 20; k++){ for(let i = 1; i < N - 1; i++){ for(let j = 1; j < N - 1; j++){ p[IX(i, j)] = (div[IX(i, j)] + p[IX(i - 1, j)] + p[IX(i + 1, j)] + p[IX(i, j - 1)] + p[IX(i, j + 1)]) / 4; } } } for(let i = 1; i < N - 1; i++){ for(let j = 1; j < N - 1; j++){ u[IX(i, j)] -= 0.5 * (p[IX(i + 1, j)] - p[IX(i - 1, j)]) / h; v[IX(i, j)] -= 0.5 * (p[IX(i, j + 1)] - p[IX(i, j - 1)]) / h; } } } function velocityStep(u, v, u0, v0, visc, dt) { addSource(u, u0, dt); addSource(v, v0, 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 densityStep(x, x0, u, v, diff, dt) { addSource(x, x0, dt); diffuse(0, x0, x, diff, dt); advect(0, x, x0, u, v, dt); } function drawDensity() { for(let i = 0; i < N; i++){ for(let j = 0; j < N; j++){ const x = i * dx; const y = j * dx; const d = dens[IX(i, j)]; ctx.fillStyle = `rgba(0, 0, 255, ${d})`; ctx.fillRect(x, y, dx, dx); } } } function animate() { velocityStep(u, v, u_prev, v_prev, viscosity, dt); densityStep(dens, dens_prev, u, v, diffusion, dt); ctx.clearRect(0, 0, canvas.width, canvas.height); drawDensity(); for(let i = 0; i < N * N; i++){ u_prev[i] = v_prev[i] = dens_prev[i] = 0; } animationFrameId = requestAnimationFrame(animate); } canvas.addEventListener('mousemove', (e)=>{ const rect = canvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / dx); const y = Math.floor((e.clientY - rect.top) / dx); if (x >= 0 && x < N && y >= 0 && y < N) { dens_prev[IX(x, y)] = 300; u_prev[IX(x, y)] = velocity * (e.clientX - rect.left - canvas.width / 2) / canvas.width; v_prev[IX(x, y)] = velocity * (e.clientY - rect.top - canvas.height / 2) / canvas.height; } }); animate(); return ()=>{ cancelAnimationFrame(animationFrameId); }; }, [ viscosity, diffusion, velocity ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4", __source: { fileName: "", lineNumber: 156, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white mb-6 font-roboto", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, "Fluid Dynamics Simulation"), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: 800, height: 600, className: "w-[800px] h-[600px] bg-black mb-6 text-gray-100", style: { animation: "fluidAnimation 10s infinite ease-in-out" }, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full max-w-3xl", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "viscosity", className: "text-white mb-1 font-roboto", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, "Viscosity"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "viscosity", name: "viscosity", min: "0", max: "1", step: "0.01", value: viscosity, onChange: (e)=>setViscosity(parseFloat(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "diffusion", className: "text-white mb-1 font-roboto", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "Diffusion"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "diffusion", name: "diffusion", min: "0", max: "1", step: "0.01", value: diffusion, onChange: (e)=>setDiffusion(parseFloat(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "velocity", className: "text-white mb-1 font-roboto", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, "Velocity"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "velocity", name: "velocity", min: "0", max: "100", step: "1", value: velocity, onChange: (e)=>setVelocity(parseInt(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, ` @keyframes fluidAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } `)); }