Skill: conics-parabolas-circles
Conics Explorer Lab
Slide the center, radius, and shape parameter a: watch the circle move and the parabola open, with focus and directrix tracking live.
1 Conics Explorer Lab
Slide the center, radius, and shape parameter a: watch the circle move and the parabola open, with focus and directrix tracking live.
Controls
2 Keep going
Read the lesson, drill practice, or use the calculator.
/* ===== conics lab glue (DOM + canvas) ===== */ (function(){ 'use strict'; var L=window.__FIBO_API__; var state={mode:'circle', h:2, k:-1, r:3, a:1}; var cv=document.getElementById('labCanvas'), ctx=cv.getContext('2d'); var W=cv.width, H=cv.height, S=34, OX=W/2, OY=H/2; function X(x){ return OX+S*x; } function Y(y){ return OY-S*y; } function grid(){ var gx, gy; for(gx=-9;gx<=9;gx++){ ctx.strokeStyle=(gx===0)?'#F4B740':'#dbe4f0'; ctx.lineWidth=(gx===0)?2:1; ctx.beginPath(); ctx.moveTo(X(gx),0); ctx.lineTo(X(gx),H); ctx.stroke(); } for(gy=-7;gy<=7;gy++){ ctx.strokeStyle=(gy===0)?'#F4B740':'#dbe4f0'; ctx.lineWidth=(gy===0)?2:1; ctx.beginPath(); ctx.moveTo(0,Y(gy)); ctx.lineTo(W,Y(gy)); ctx.stroke(); } } function dot(x,y,c,label){ ctx.fillStyle=c; ctx.beginPath(); ctx.arc(X(x),Y(y),5,0,6.2832); ctx.fill(); if(label){ ctx.fillStyle='#172033'; ctx.font='bold 12px Inter,sans-serif'; ctx.fillText(label,X(x)+8,Y(y)-8); } } function draw(){ var d=L.compute(state); ctx.clearRect(0,0,W,H); ctx.fillStyle='#F1F7FF'; ctx.fillRect(0,0,W,H); grid(); if(d.mode==='circle'){ ctx.beginPath(); ctx.arc(X(d.h),Y(d.k),d.r*S,0,6.2832); ctx.fillStyle='rgba(37,99,235,0.10)'; ctx.fill(); ctx.strokeStyle='#2563EB'; ctx.lineWidth=3; ctx.stroke(); dot(d.h,d.k,'#14213D','center ('+d.h+', '+d.k+')'); ctx.strokeStyle='#14B8A6'; ctx.lineWidth=2.5; ctx.setLineDash([6,4]); ctx.beginPath(); ctx.moveTo(X(d.h),Y(d.k)); ctx.lineTo(X(d.h+d.r),Y(d.k)); ctx.stroke(); ctx.setLineDash([]); document.getElementById('labReadout').innerHTML=''+d.eq+' · center ('+d.h+', '+d.k+'), radius '+d.r; } else { ctx.strokeStyle='#2563EB'; ctx.lineWidth=3; ctx.beginPath(); var t, first=true; for(t=-9;t<=9;t+=0.1){ var px, py; if(d.horiz){ py=t; px=d.a*(t-d.k)*(t-d.k)+d.h; } else { px=t; py=d.a*(t-d.h)*(t-d.h)+d.k; } if(Math.abs(px)>10 || Math.abs(py)>8){ first=true; continue; } if(first){ ctx.moveTo(X(px),Y(py)); first=false; } else { ctx.lineTo(X(px),Y(py)); } } ctx.stroke(); ctx.strokeStyle='#F4B740'; ctx.lineWidth=2.5; ctx.setLineDash([7,5]); ctx.beginPath(); if(d.horiz){ var dx=X(d.h-d.p); ctx.moveTo(dx,0); ctx.lineTo(dx,H); } else { var dy=Y(d.k-d.p); ctx.moveTo(0,dy); ctx.lineTo(W,dy); } ctx.stroke(); ctx.setLineDash([]); dot(d.h,d.k,'#14213D','vertex'); dot(d.fx,d.fy,'#b45309','focus'); document.getElementById('labReadout').innerHTML=''+d.eq+' · focus ('+d.fx.toFixed(3)+', '+d.fy.toFixed(3)+ '), directrix '+d.dir+', p = '+d.p.toFixed(3); } } function sync(){ state.mode=document.getElementById('labMode').value; state.h=parseFloat(document.getElementById('labH').value); state.k=parseFloat(document.getElementById('labK').value); state.r=parseFloat(document.getElementById('labR').value); var av=parseFloat(document.getElementById('labA').value); state.a=(av===0)?0.25:av; document.getElementById('labHv').textContent=state.h; document.getElementById('labKv').textContent=state.k; document.getElementById('labRv').textContent=state.r; document.getElementById('labAv').textContent=state.a; document.getElementById('labRctl').style.display=(state.mode==='circle')?'':'none'; document.getElementById('labActl').style.display=(state.mode==='circle')?'none':''; draw(); } ['labMode','labH','labK','labR','labA'].forEach(function(id){ document.getElementById(id).addEventListener(id==='labMode'?'change':'input',sync); }); draw(); })();