The coil orientation, magnetic flux, tangent and induced EMF are synchronized. By Faraday’s law, the induced EMF has the opposite sign to the gradient of the magnetic flux graph.
(()=>{
const root=document.getElementById(„coil-simulation”);
if(!root)return;
const get=id=>root.querySelector(„#”+id);
const NS=”http://www.w3.org/2000/svg”;
// ———- phase diagram ———-
const field=get(„field”);
for(let y=48;yp.join(„,”)).join(” „));
// Draw the actual rotation axis through the centre.
axisLine.setAttribute(„x1”,C.x-175*Z.x);axisLine.setAttribute(„y1”,C.y-175*Z.y);
axisLine.setAttribute(„x2”,C.x+175*Z.x);axisLine.setAttribute(„y2”,C.y+175*Z.y);
axisLine.setAttribute(„stroke”,”#555″);axisLine.setAttribute(„stroke-width”,”2″);
axisLine.setAttribute(„stroke-dasharray”,”7 6″);
// Area vector S rotates from +B toward the vertical screen direction.
// Its x-component is cos(theta), so Phi is proportional to cos(theta).
const svx=Math.cos(theta), svy=-0.78*Math.sin(theta);
const norm=Math.hypot(svx,svy)||1, len=108;
const ex=C.x+len*svx/norm, ey=C.y+len*svy/norm;
svec.setAttribute(„x1”,C.x);svec.setAttribute(„y1”,C.y);
svec.setAttribute(„x2”,ex);svec.setAttribute(„y2″,ey);
sLabelPos(ex,ey);
// Display alpha between B and S.
const disp=Math.atan2(svy,svx),r=48,steps=28;let d=””;
for(let i=0;iL+x/xMax*(W-L-R), sy=y=>H-B-(y+1.25)/2.5*(H-T-B);
function add(tag,a,p,text=””){const e=document.createElementNS(NS,tag);Object.entries(a).forEach(([k,v])=>e.setAttribute(k,v));if(text)e.textContent=text;p.appendChild(e);return e;}
function setup(grid,axes,yLabel){
for(let x=0;xadd(„line”,{x1:L,y1:sy(y),x2:W-R,y2:sy(y),stroke:”var(–grid)”,”stroke-width”:1},grid));
add(„line”,{x1:L,y1:sy(0),x2:W-R,y2:sy(0),stroke:”var(–axis)”,”stroke-width”:2.2},axes);
add(„line”,{x1:L,y1:H-B,x2:L,y2:T,stroke:”var(–axis)”,”stroke-width”:2.2},axes);
add(„path”,{d:`M ${W-R-10} ${sy(0)-6} L ${W-R} ${sy(0)} L ${W-R-10} ${sy(0)+6}`,fill:”none”,stroke:”var(–axis)”,”stroke-width”:2.2},axes);
add(„path”,{d:`M ${L-6} ${T+10} L ${L} ${T} L ${L+6} ${T+10}`,fill:”none”,stroke:”var(–axis)”,”stroke-width”:2.2},axes);
[[0,”0″],[.25,”T/4″],[.5,”T/2″],[.75,”3T/4″],[1,”T”]].forEach(([x,s])=>{add(„line”,{x1:sx(x),y1:sy(0)-6,x2:sx(x),y2:sy(0)+6,stroke:”var(–axis)”,”stroke-width”:1.5},axes);add(„text”,{x:sx(x),y:sy(0)+24,”text-anchor”:”middle”,”font-size”:13,fill:”#667085″},axes,s)});
add(„text”,{x:W-R-2,y:sy(0)+36,”text-anchor”:”end”,”font-size”:17,”font-style”:”italic”,fill:”var(–axis)”},axes,”t”);
add(„text”,{x:L-38,y:T+16,”font-size”:18,”font-style”:”italic”,fill:”var(–axis)”},axes,yLabel);
}
setup(get(„fgrid”),get(„faxes”),”Φ”);
setup(get(„egrid”),get(„eaxes”),”EMF”);
const flux=x=>Math.cos(2*Math.PI*x), emf=x=>Math.sin(2*Math.PI*x);
let fd=””,ed=””;
for(let x=0;x<=1.25;x+=.003){fd+=(fd?"L":"M")+sx(x)+" "+sy(flux(x))+" ";ed+=(ed?"L":"M")+sx(x)+" "+sy(emf(x))+" ";}
get("fcurve").setAttribute("d",fd);get("ecurve").setAttribute("d",ed);
const slider=get("slider"),fp=get("fpoint"),ep=get("epoint"),tan=get("ftan"),guide=get("eguide"),read=get("emf");
function update(){
const x=+slider.value,F=flux(x),E=emf(x),theta=2*Math.PI*x;
fp.setAttribute("cx",sx(x));fp.setAttribute("cy",sy(F));ep.setAttribute("cx",sx(x));ep.setAttribute("cy",sy(E));
guide.setAttribute("x1",sx(x));guide.setAttribute("x2",sx(x));guide.setAttribute("y1",sy(0));guide.setAttribute("y2",sy(E));
read.textContent=(Math.abs(E)get(id).addEventListener(„click”,()=>{slider.value=x;update()}));
update();
})();
