|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Dark‑Matter Hybrid Simulation (Pyodide‑powered)</title> |
|
<style> |
|
:root{font-family:system-ui,sans-serif;background:#0b0e19;color:#e4e7ef} |
|
h1{text-align:center;margin:0.5rem 0;font-size:1.4rem} |
|
#controls{display:flex;justify-content:center;gap:1rem;margin:0.5rem 0;flex-wrap:wrap} |
|
.ctrl{background:#1c2135;border:1px solid #2f3653;border-radius:0.5rem;padding:0.3rem 0.6rem;font-size:0.9rem;cursor:pointer;transition:background .3s} |
|
.ctrl:hover{background:#2b3351} |
|
#sim{display:block;margin:0 auto 1rem;border:1px solid #222b44;background:#000;border-radius:0.5rem} |
|
label{font-size:0.8rem} |
|
input[type=range]{width:8rem} |
|
#status{font-size:0.8rem;text-align:center;margin-bottom:0.4rem;color:#9ac1ff} |
|
</style> |
|
|
|
<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script> |
|
</head> |
|
<body> |
|
<h1>Dark‑Matter Hybrid (Classical + Quantum) Toy Model</h1> |
|
<canvas id="sim" width="600" height="600"></canvas> |
|
<div id="status">Pyodide loading…</div> |
|
<div id="controls"> |
|
<button id="toggle" class="ctrl" disabled>▶︎ Start</button> |
|
<button id="reset" class="ctrl" disabled>⎌ Reset</button> |
|
<button id="qView" class="ctrl" disabled>🌌 Quantum View</button> |
|
<label>Particles |
|
<input id="count" type="range" min="100" max="1000" step="100" value="500" disabled/> |
|
<span id="countVal">500</span> |
|
</label> |
|
<label>Gravity |
|
<input id="grav" type="range" min="0.1" max="2" step="0.1" value="1" disabled/> |
|
<span id="gravVal">1.0</span> |
|
</label> |
|
</div> |
|
|
|
<script> |
|
|
|
let pyodideReady = loadPyodide({indexURL:"https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"}).then(async pyodide=>{ |
|
await pyodide.loadPackage(["numpy"]); |
|
|
|
const pyCode = ` |
|
import json, math, numpy as np |
|
|
|
def quantum_density(size:int=64): |
|
# 2‑D Gaussian wave‑packet as stand‑in for toy quantum result |
|
x = np.linspace(-3,3,size) |
|
X,Y = np.meshgrid(x,x) |
|
Z = np.exp(-(X**2+Y**2)) |
|
Z /= Z.max() # normalize 0‑1 |
|
return json.dumps(Z.tolist()) |
|
`; |
|
pyodide.runPython(pyCode); |
|
return pyodide; |
|
}); |
|
|
|
async function getQuantumDensity(size=64){ |
|
const pyodide = await pyodideReady; |
|
const jsonStr = await pyodide.runPythonAsync(`quantum_density(${size})`); |
|
return JSON.parse(jsonStr); |
|
} |
|
|
|
|
|
const canvas = document.getElementById("sim"); |
|
const ctx = canvas.getContext("2d"); |
|
const W = canvas.width, H = canvas.height; |
|
|
|
const qCanvas = document.createElement("canvas"); |
|
qCanvas.width=W; qCanvas.height=H; |
|
const qCtx = qCanvas.getContext("2d"); |
|
|
|
const $ = id=>document.getElementById(id); |
|
|
|
const softening=4; |
|
let G=1, particles=[], running=false, rafId; |
|
let quantumOn=false, densityLoaded=false; |
|
|
|
const status = $("status"); |
|
|
|
const rand = (min,max)=>Math.random()*(max-min)+min; |
|
const makeParticle = ()=>({x:rand(0,W),y:rand(0,H),vx:rand(-0.1,0.1),vy:rand(-0.1,0.1),m:1+Math.random()*0.5}); |
|
|
|
function init(n=500){particles = Array.from({length:n}, makeParticle); densityLoaded=false; draw();} |
|
|
|
function update(dt){ |
|
const n=particles.length; |
|
for(let i=0;i<n;i++){ |
|
const p=particles[i]; let ax=0, ay=0; |
|
for(let j=0;j<n;j++) if(i!==j){ |
|
const q=particles[j]; const dx=q.x-p.x, dy=q.y-p.y; const r2=dx*dx+dy*dy+softening; const inv=Math.pow(r2,-1.5); |
|
ax+=G*q.m*dx*inv; ay+=G*q.m*dy*inv; |
|
} |
|
p.vx+=ax*dt; p.vy+=ay*dt; |
|
} |
|
for(const p of particles){p.x=(p.x+p.vx*dt+W)%W; p.y=(p.y+p.vy*dt+H)%H;} |
|
} |
|
|
|
function draw(){ |
|
ctx.fillStyle="black"; ctx.fillRect(0,0,W,H); |
|
ctx.fillStyle="white"; for(const p of particles) ctx.fillRect(p.x,p.y,2,2); |
|
if(quantumOn && densityLoaded) ctx.drawImage(qCanvas,0,0); |
|
} |
|
|
|
function step(){update(0.5); draw(); if(running) rafId=requestAnimationFrame(step);} |
|
|
|
function buildDensityTexture(grid){ |
|
const size=grid.length; const scale=W/size; const img=qCtx.createImageData(W,H); |
|
for(let i=0;i<size;i++){ |
|
for(let j=0;j<size;j++){ |
|
const val=Math.min(grid[i][j]*255*20,255); |
|
for(let dx=0;dx<scale;dx++){ |
|
for(let dy=0;dy<scale;dy++){ |
|
const x=j*scale+dx, y=i*scale+dy, idx=(y*W+x)*4; |
|
img.data[idx]=0; img.data[idx+1]=val; img.data[idx+2]=255; img.data[idx+3]=Math.min(val+30,255); |
|
} |
|
} |
|
} |
|
} |
|
qCtx.putImageData(img,0,0); |
|
densityLoaded=true; draw(); |
|
} |
|
|
|
async function computeQuantum(){ |
|
status.textContent="Computing quantum density…"; |
|
try{ |
|
const grid=await getQuantumDensity(64); |
|
buildDensityTexture(grid); |
|
status.textContent="Quantum density ready ✔"; |
|
}catch(e){ |
|
console.error(e); |
|
status.textContent="Quantum compute error"; |
|
quantumOn=false; |
|
$("qView").textContent="🌌 Quantum View"; |
|
} |
|
} |
|
|
|
|
|
pyodideReady.then(()=>{ |
|
status.textContent="Ready"; |
|
["toggle","reset","qView","count","grav"].forEach(id=>$(id).disabled=false); |
|
|
|
$("toggle").onclick=()=>{running=!running; $("toggle").textContent=running?"❚❚ Pause":"▶︎ Start"; if(running) step(); else cancelAnimationFrame(rafId);} ; |
|
$("reset").onclick=()=>init(+$("count").value); |
|
$("count").oninput=e=>$("countVal").textContent=e.target.value; |
|
$("count").onchange=()=>init(+$("count").value); |
|
$("grav").oninput=e=>{G=+e.target.value; $("gravVal").textContent=G.toFixed(1);} ; |
|
$("qView").onclick=()=>{ |
|
quantumOn=!quantumOn; |
|
$("qView").textContent=quantumOn?"🖥 Classical View":"🌌 Quantum View"; |
|
if(quantumOn && !densityLoaded) computeQuantum(); else draw(); |
|
}; |
|
|
|
init(); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
