`; this.setupCanvas();this.draw(); this.log('EMF Field Mapper initialized.','i'); this.log('Select source type and parameters, then animate.','i'); }, setupCanvas(){const c=document.getElementById('emfCanvas');if(!c)return;c.width=c.offsetWidth||900;c.height=380;}, getColor(v,max){ const cm=document.getElementById('emfCmap')?.value||'orange'; const n=Math.min(v/max,1); if(cm==='orange')return`rgba(255,${Math.floor(170*n+20)},0,${n*0.8+0.1})`; if(cm==='hot')return`hsl(${60-n*60},100%,${30+n*50}%)`; if(cm==='cool')return`hsl(${200+n*40},80%,${30+n*40}%)`; return`hsl(${n*280},80%,50%)`; }, draw(){ const c=document.getElementById('emfCanvas');if(!c)return; const ctx=c.getContext('2d');const W=c.width,H=c.height; ctx.fillStyle='#000';ctx.fillRect(0,0,W,H); // Grid ctx.strokeStyle='rgba(255,170,0,0.06)';ctx.lineWidth=1; for(let x=0;xW||py<0||py>H)break; ctx.lineTo(px,py); } ctx.stroke(); } } // Source indicator const grd=ctx.createRadialGradient(cx,cy,0,cx,cy,30*fs); grd.addColorStop(0,'rgba(255,170,0,0.9)');grd.addColorStop(1,'rgba(255,170,0,0)'); ctx.beginPath();ctx.arc(cx,cy,30*Math.min(fs,3),0,Math.PI*2);ctx.fillStyle=grd;ctx.fill(); ctx.beginPath();ctx.arc(cx,cy,8,0,Math.PI*2);ctx.fillStyle='#ffaa00';ctx.fill(); ctx.strokeStyle='#fff';ctx.lineWidth=1.5;ctx.stroke(); // Update metrics const bmax=(fs*2.5).toFixed(2); if(document.getElementById('emBmax'))document.getElementById('emBmax').textContent=bmax; if(document.getElementById('emEn'))document.getElementById('emEn').textContent=(fs*fs*0.4).toFixed(1); if(document.getElementById('emFlux'))document.getElementById('emFlux').textContent=(fs*3.14).toFixed(2); if(document.getElementById('emGrad'))document.getElementById('emGrad').textContent=(fs*0.12).toFixed(3); ctx.fillStyle='#888';ctx.font='11px monospace';ctx.textAlign='left'; ctx.fillText(`Source: ${src} | Mode: ${disp} | B_max: ${bmax}T`,10,H-10); }, toggle(){ if(this.run){this.run=false;cancelAnimationFrame(this.anim); document.getElementById('emfRunBtn').textContent='▶ ANIMATE FIELD'; document.getElementById('emfStatus').textContent='Paused · EMF v1.1'; this.log('Animation paused.','w'); }else{this.run=true; document.getElementById('emfRunBtn').textContent='⏸ PAUSE'; document.getElementById('emfStatus').textContent='Animating · EMF · Achilles Protocol'; this.log('Field animation started.','s'); this.loop(); } }, loop(){ if(!this.run)return; this.t+=0.02; const c=document.getElementById('emfCanvas');if(c){c.width=c.width;} this.draw(); const s=Math.floor(this.t),h=String(Math.floor(s/3600)).padStart(2,'0'),m=String(Math.floor((s%3600)/60)).padStart(2,'0'),ss=String(s%60).padStart(2,'0'); const el=document.getElementById('emfClock');if(el)el.textContent=`T+${h}:${m}:${ss}`; this.anim=requestAnimationFrame(()=>this.loop()); }, log(msg,type=''){ const log=document.getElementById('emfLog');if(!log)return; const d=new Date(),ts=`[${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}]`; const el=document.createElement('div');el.className=`emf-le ${type}`;el.textContent=`${ts} ${msg}`;log.appendChild(el);log.scrollTop=log.scrollHeight; }, exportData(){ const data={sim:'EMF Fields v1.1',timestamp:new Date().toISOString(),source:document.getElementById('emfSrc')?.value,fieldStrength:document.getElementById('emfFs')?.value,displayMode:document.getElementById('emfDisp')?.value,protocol:'Achilles v1.1',workspace:'W4'}; const blob=new Blob([JSON.stringify(data,null,2)],{type:'application/json'}); const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=`emf_field_${Date.now()}.json`;a.click(); this.log('Field data exported.','s'); }, sendToDataspace(){ this.log('Sending to W4 Dataspace...','i'); setTimeout(()=>{this.log('Data queued for W4 · Transport Dynamics.','s');document.getElementById('emfStatus').textContent='Sent to W4 ✓';},600); } }; window.addEventListener('load',()=>EMF.init()); izing:border-box;margin:0;padding:0} #emfApp{font-family:-apple-system,sans-serif;background:linear-gradient(135deg,#0a0a0a,#1a1a2e);min-height:100vh;color:#fff} .emf-hdr{background:rgba(0,0,0,.95);padding:20px 40px;border-bottom:3px solid #ffaa00;display:flex;justify-content:space-between;align-items:center} .emf-title{font-size:22px;font-weight:700;color:#ffaa00;text-transform:uppercase;letter-spacing:2px} .emf-sub{font-size:13px;color:#888;margin-top:4px} .emf-nav{background:rgba(255,170,0,.1);border:1px solid #ffaa00;color:#ffaa00;padding:9px 18px;cursor:pointer;font-size:12px;text-transform:uppercase;margin-left:10px;transition:all .3s} .emf-nav:hover{background:#ffaa00;color:#000} .emf-body{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 80px)} .emf-ctrl{background:rgba(0,0,0,.85);border-right:2px solid #ffaa00;padding:20px;overflow-y:auto} .emf-ctrl h3{color:#ffaa00;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px} .emf-g{margin-bottom:16px} .emf-g label{display:block;font-size:11px;color:#aaa;margin-bottom:5px;text-transform:uppercase} .emf-g input,.emf-g select{width:100%;padding:8px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,170,0,.4);color:#fff;font-size:13px} .emf-g input[type=range]{padding:0;background:none;border:none;accent-color:#ffaa00} .emf-g input:focus,.emf-g select:focus{outline:none;border-color:#ffaa00} .emf-btn{width:100%;padding:11px;background:#ffaa00;color:#000;border:none;cursor:pointer;font-weight:700;text-transform:uppercase;margin-top:8px;transition:all .3s} .emf-btn:hover{background:#ffc233} .emf-btn.s{background:rgba(255,170,0,.15);border:1px solid #ffaa00;color:#ffaa00} .emf-btn.s:hover{background:rgba(255,170,0,.35)} .emf-main{padding:25px;overflow-y:auto;background:linear-gradient(180deg,#16213e,#0f1724)} .emf-mets{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .emf-m{background:rgba(0,0,0,.5);border-left:3px solid #ffaa00;padding:14px} .emf-ml{font-size:10px;color:#888;text-transform:uppercase;margin-bottom:4px} .emf-mv{font-size:20px;font-weight:700;color:#ffaa00} .emf-mu{font-size:10px;color:#666;margin-top:2px} .emf-cw{background:#000;border:1px solid rgba(255,170,0,.3);border-top:3px solid #ffaa00;margin-bottom:15px} .emf-ch{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,170,0,.2)} .emf-cl{font-size:12px;color:#ffaa00;text-transform:uppercase;letter-spacing:1px} canvas#emfCanvas{width:100%;height:380px;display:block} .emf-log{background:rgba(0,0,0,.7);border:1px solid rgba(255,170,0,.2);padding:12px;height:120px;overflow-y:auto;font-family:monospace;font-size:12px} .emf-le{color:#888;margin-bottom:3px} .emf-le.i{color:#ffaa00}.emf-le.s{color:#00ff88}.emf-le.w{color:#ff6b6b} .emf-ftr{background:rgba(0,0,0,.95);padding:12px 40px;border-top:2px solid #ffaa00;display:flex;justify-content:space-between;align-items:center} .emf-st{font-size:12px;color:#888} .emf-eb{background:#ffaa00;color:#000;padding:9px 22px;border:none;cursor:pointer;font-weight:700;font-size:12px;text-transform:uppercase;margin-left:8px;transition:all .3s} .emf-eb:hover{background:#ffc233;box-shadow:0 0 12px #ffaa00}