<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .math-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .math-title span {
      color: #0284c7;
      font-weight: 600;
    }
    .layout {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: stretch;
    }
    .table-panel {
      flex: 1 1 200px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 190px;
    }
    .point-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .point-card:hover {
      background: #f1f5f9;
    }
    .point-card.active {
      background: #e0f2fe;
      border-color: #0284c7;
      box-shadow: 0 0 0 1px #0284c7;
      font-weight: 600;
    }
    .badge {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
    .badge-init { background: #fef3c7; color: #b45309; }
    .badge-term { background: #dcfce7; color: #15803d; }
    .badge-mid { background: #f1f5f9; color: #64748b; }
    
    .graph-panel {
      flex: 1 1 240px;
      min-height: 240px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 290px;
      overflow: visible;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      padding-top: 2px;
    }
    .btn {
      background: #0284c7;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #0369a1; }
    .btn-secondary {
      background: #e2e8f0;
      color: #1e2945;
    }
    .btn-secondary:active { background: #cbd5e1; }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="math-title">
      x(t) = t² − 2, &nbsp; y(t) = 2t &nbsp; <span style="font-size:13px; color:#64748b;">[−2 ≤ t ≤ 2]</span>
    </div>
    <div class="controls">
      <button class="btn btn-secondary" id="prevBtn" title="Previous t">◀</button>
      <button class="btn" id="playBtn"><span id="playIcon">▶</span> Trace</button>
      <button class="btn btn-secondary" id="nextBtn" title="Next t">▶</button>
    </div>
  </div>

  <div class="layout">
    
    <div class="table-panel" id="cardList">
      <div class="point-card active" data-idx="0">
        <div><strong>t = −2</strong> → (2, −4)</div>
        <span class="badge badge-init">Initial</span>
      </div>
      <div class="point-card" data-idx="1">
        <div><strong>t = −1</strong> → (−1, −2)</div>
        <span class="badge badge-mid">t = −1</span>
      </div>
      <div class="point-card" data-idx="2">
        <div><strong>t = 0</strong> → (−2, 0)</div>
        <span class="badge badge-mid">Vertex</span>
      </div>
      <div class="point-card" data-idx="3">
        <div><strong>t = 1</strong> → (−1, 2)</div>
        <span class="badge badge-mid">t = 1</span>
      </div>
      <div class="point-card" data-idx="4">
        <div><strong>t = 2</strong> → (2, 4)</div>
        <span class="badge badge-term">Terminal</span>
      </div>
    </div>

    
    <div class="graph-panel">
      <svg viewBox="0 0 320 280" id="svgGraph">
        <defs>
          
          <marker id="arrow" viewBox="0 0 8 8" refX="5" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 1 1 L 7 4 L 1 7 z" fill="#0284c7" />
          </marker>
          <marker id="axisArrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M 0 1 L 6 3 L 0 5 z" fill="#94a3b8" />
          </marker>
        </defs>

        
        <g id="gridGroup" stroke="#e2e8f0" stroke-width="1"></g>
        <g id="axesGroup" stroke="#94a3b8" stroke-width="1.5"></g>
        <g id="ticksGroup" fill="#64748b" font-size="10" font-family="system-ui"></g>

        
        <path id="curvePath" fill="none" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
        
        <path id="tracedPath" fill="none" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round" />

        
        <path id="orient1" fill="none" stroke="#0284c7" stroke-width="2.5" marker-end="url(#arrow)" />
        <path id="orient2" fill="none" stroke="#0284c7" stroke-width="2.5" marker-end="url(#arrow)" />

        
        <g id="dotsGroup"></g>

        
        <circle id="tracker" r="6.5" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
        <text id="trackerLabel" font-size="11" font-weight="700" fill="#0f172a" text-anchor="middle" dy="-10"></text>
      </svg>
    </div>
  </div>

  <script>
    // Coordinate mapping: Math range X: [-3, 3], Y: [-5, 5]
    // SVG Dimensions: 320x280, Margins: 30, 20
    const W = 320, H = 280;
    const minX = -3.2, maxX = 3.2;
    const minY = -5.2, maxY = 5.2;

    function toSvgX(x) {
      return ((x - minX) / (maxX - minX)) * (W - 50) + 25;
    }
    function toSvgY(y) {
      return H - (((y - minY) / (maxY - minY)) * (H - 40) + 20);
    }

    // Draw Grid & Axes
    const gridGroup = document.getElementById('gridGroup');
    const axesGroup = document.getElementById('axesGroup');
    const ticksGroup = document.getElementById('ticksGroup');

    for (let x = -3; x <= 3; x++) {
      const sx = toSvgX(x);
      gridGroup.innerHTML += `<line x1="${sx}" y1="${toSvgY(minY)}" x2="${sx}" y2="${toSvgY(maxY)}" />`;
      if (x !== 0) {
        ticksGroup.innerHTML += `<text x="${sx}" y="${toSvgY(0) + 14}" text-anchor="middle">${x}</text>`;
      }
    }
    for (let y = -4; y <= 4; y += 2) {
      const sy = toSvgY(y);
      gridGroup.innerHTML += `<line x1="${toSvgX(minX)}" y1="${sy}" x2="${toSvgX(maxX)}" y2="${sy}" />`;
      if (y !== 0) {
        ticksGroup.innerHTML += `<text x="${toSvgX(0) - 6}" y="${sy + 3.5}" text-anchor="end">${y}</text>`;
      }
    }

    // Axes
    const originX = toSvgX(0);
    const originY = toSvgY(0);
    axesGroup.innerHTML = `
      <line x1="${toSvgX(minX)}" y1="${originY}" x2="${toSvgX(maxX)}" y2="${originY}" marker-end="url(#axisArrow)" />
      <line x1="${originX}" y1="${toSvgY(minY)}" x2="${originX}" y2="${toSvgY(maxY)}" marker-end="url(#axisArrow)" />
      <text x="${toSvgX(maxX) - 4}" y="${originY - 6}" font-size="11" font-weight="600" fill="#64748b">x</text>
      <text x="${originX + 8}" y="${toSvgY(maxY) + 10}" font-size="11" font-weight="600" fill="#64748b">y</text>
    `;

    // Mathematical calculations
    function getXY(t) {
      return { x: t * t - 2, y: 2 * t };
    }

    // Generate Path String
    function generatePath(tStart, tEnd, step = 0.04) {
      let d = '';
      for (let t = tStart; t <= tEnd + 0.001; t += step) {
        const pt = getXY(t);
        const sx = toSvgX(pt.x);
        const sy = toSvgY(pt.y);
        d += (d === '' ? `M ${sx} ${sy}` : ` L ${sx} ${sy}`);
      }
      return d;
    }

    document.getElementById('curvePath').setAttribute('d', generatePath(-2, 2));

    // Direction arrows along curve segments
    document.getElementById('orient1').setAttribute('d', generatePath(-1.8, -0.6));
    document.getElementById('orient2').setAttribute('d', generatePath(0.4, 1.6));

    // 5 Specific Evaluated Points
    const evalPoints = [
      { t: -2, x: 2, y: -4, label: '(2, −4)' },
      { t: -1, x: -1, y: -2, label: '(−1, −2)' },
      { t: 0, x: -2, y: 0, label: '(−2, 0)' },
      { t: 1, x: -1, y: 2, label: '(−1, 2)' },
      { t: 2, x: 2, y: 4, label: '(2, 4)' }
    ];

    const dotsGroup = document.getElementById('dotsGroup');
    evalPoints.forEach((p, idx) => {
      const sx = toSvgX(p.x);
      const sy = toSvgY(p.y);
      const align = p.x < 0 ? 'end' : 'start';
      const dx = p.x < 0 ? -9 : 9;
      dotsGroup.innerHTML += `
        <circle id="dot-${idx}" cx="${sx}" cy="${sy}" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" style="cursor:pointer;" />
        <text id="dotlabel-${idx}" x="${sx + dx}" y="${sy + 4}" font-size="11" font-weight="600" fill="#334155" text-anchor="${align}">${p.label}</text>
      `;
    });

    // Step state & Interaction
    let currentIdx = 0;
    let autoInterval = null;
    const cards = document.querySelectorAll('.point-card');
    const tracker = document.getElementById('tracker');
    const trackerLabel = document.getElementById('trackerLabel');
    const tracedPath = document.getElementById('tracedPath');

    function updateStep(idx) {
      currentIdx = idx;
      cards.forEach((c, i) => c.classList.toggle('active', i === idx));

      const p = evalPoints[idx];
      const sx = toSvgX(p.x);
      const sy = toSvgY(p.y);

      tracker.setAttribute('cx', sx);
      tracker.setAttribute('cy', sy);
      trackerLabel.setAttribute('x', sx);
      trackerLabel.setAttribute('y', sy - 2);
      trackerLabel.textContent = `t=${p.t}`;

      tracedPath.setAttribute('d', generatePath(-2, p.t));
    }

    cards.forEach((card) => {
      card.addEventListener('click', () => {
        pauseAuto();
        updateStep(parseInt(card.getAttribute('data-idx'), 10));
      });
    });

    evalPoints.forEach((_, idx) => {
      const dot = document.getElementById(`dot-${idx}`);
      if (dot) {
        dot.addEventListener('click', () => {
          pauseAuto();
          updateStep(idx);
        });
      }
    });

    function nextStep() {
      updateStep((currentIdx + 1) % evalPoints.length);
    }
    function prevStep() {
      updateStep((currentIdx - 1 + evalPoints.length) % evalPoints.length);
    }

    document.getElementById('nextBtn').addEventListener('click', () => {
      pauseAuto();
      nextStep();
    });
    document.getElementById('prevBtn').addEventListener('click', () => {
      pauseAuto();
      prevStep();
    });

    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function pauseAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        playIcon.textContent = '▶';
      }
    }

    function toggleAuto() {
      if (autoInterval) {
        pauseAuto();
      } else {
        playIcon.textContent = '⏸';
        if (currentIdx === evalPoints.length - 1) updateStep(0);
        autoInterval = setInterval(() => {
          if (currentIdx >= evalPoints.length - 1) {
            updateStep(0);
          } else {
            nextStep();
          }
        }, 1500);
      }
    }

    playBtn.addEventListener('click', toggleAuto);

    // Initial view
    updateStep(0);
  </script>
</body>
</html>

Introduction to Parametric Equations and Curve Tracing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      gap: 12px;
      user-select: none;
    }
    .diagram-stage {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: stretch;
      justify-content: center;
    }
    .panel {
      background: transparent;
      border: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .main-panel {
      flex: 1.5;
      min-width: 200px;
      padding: 4px;
    }
    .side-panel {
      flex: 0.85;
      min-width: 130px;
      padding: 4px;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 240px;
      overflow: visible;
    }
    .readout {
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      margin-top: 6px;
      text-align: center;
      white-space: nowrap;
    }
    .controls {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: center;
    }
    .btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #94a3b8;
      background: #ffffff;
      color: #0f172a;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #64748b;
    }
    .btn.active {
      background: #0369a1;
      color: #ffffff;
      border-color: #0369a1;
    }
    .btn.active:hover {
      background: #0284c7;
      border-color: #0284c7;
    }
    .btn-play {
      background: #f8fafc;
      min-width: 42px;
      font-size: 14px;
    }
    @media (max-width: 480px) {
      .diagram-stage {
        flex-direction: column;
        gap: 8px;
      }
      .side-panel {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px;
      }
      svg {
        max-height: 180px;
      }
      #svgSide {
        max-height: 120px;
        width: 120px;
      }
      .btn {
        padding: 6px 9px;
        font-size: 12px;
      }
      .readout {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    
    <div class="panel main-panel">
      <svg id="svgMain" viewBox="-170 -115 360 230">
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
          </marker>
          <marker id="axisArr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8" />
          </marker>
        </defs>

        
        <g stroke="#e2e8f0" stroke-width="1">
          <line x1="-140" y1="-80" x2="140" y2="-80"/>
          <line x1="-140" y1="-40" x2="140" y2="-40"/>
          <line x1="-140" y1="40" x2="140" y2="40"/>
          <line x1="-140" y1="80" x2="140" y2="80"/>
          <line x1="-105" y1="-100" x2="-105" y2="100"/>
          <line x1="-70" y1="-100" x2="-70" y2="100"/>
          <line x1="-35" y1="-100" x2="-35" y2="100"/>
          <line x1="35" y1="-100" x2="35" y2="100"/>
          <line x1="70" y1="-100" x2="70" y2="100"/>
          <line x1="105" y1="-100" x2="105" y2="100"/>
        </g>

        
        <g stroke="#94a3b8" stroke-width="1.5">
          <line x1="-140" y1="0" x2="140" y2="0" marker-end="url(#axisArr)" />
          <line x1="0" y1="105" x2="0" y2="-105" marker-end="url(#axisArr)" />
        </g>

        
        <text x="142" y="-5" font-size="11" fill="#64748b" font-weight="600">x</text>
        <text x="6" y="-95" font-size="11" fill="#64748b" font-weight="600">y</text>

        
        <ellipse cx="0" cy="0" rx="105" ry="80" fill="none" stroke="#cbd5e1" stroke-width="2.5" />
        
        
        <path id="tracedPath" fill="none" stroke="#0284c7" stroke-width="3" d="" />

        
        <path d="M 74.2 -56.5 L 72 -58.5" fill="none" stroke="#0284c7" stroke-width="2" marker-end="url(#arr)" />
        <path d="M -74.2 -56.5 L -76.5 -54.5" fill="none" stroke="#0284c7" stroke-width="2" marker-end="url(#arr)" />
        <path d="M -74.2 56.5 L -72 58.5" fill="none" stroke="#0284c7" stroke-width="2" marker-end="url(#arr)" />
        <path d="M 74.2 56.5 L 76.5 54.5" fill="none" stroke="#0284c7" stroke-width="2" marker-end="url(#arr)" />

        
        <g id="milestones" font-size="10" font-weight="600" fill="#334155">
          
          <circle cx="105" cy="0" r="4" fill="#475569" />
          <text x="112" y="14">t=0, 2π (3, 0)</text>

          
          <circle cx="0" cy="-80" r="4" fill="#475569" />
          <text x="8" y="-83">t=π/2 (0, 2)</text>

          
          <circle cx="-105" cy="0" r="4" fill="#475569" />
          <text x="-112" y="-6" text-anchor="end">t=π (-3, 0)</text>

          
          <circle cx="0" cy="80" r="4" fill="#475569" />
          <text x="8" y="92">t=3π/2 (0, -2)</text>
        </g>

        
        <circle id="currPoint" cx="105" cy="0" r="6" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
      </svg>
      <div id="mainReadout" class="readout">(x, y) = (3.00, 0.00)</div>
    </div>

    
    <div class="panel side-panel">
      <svg id="svgSide" viewBox="-60 -60 120 120">
        
        <circle cx="0" cy="0" r="45" fill="none" stroke="#e2e8f0" stroke-width="2" />
        <line x1="-50" y1="0" x2="50" y2="0" stroke="#cbd5e1" stroke-width="1" />
        <line x1="0" y1="-50" x2="0" y2="50" stroke="#cbd5e1" stroke-width="1" />

        
        <path id="angleSector" fill="rgba(2, 132, 199, 0.15)" stroke="none" d="" />
        
        
        <line id="angleRay" x1="0" y1="0" x2="45" y2="0" stroke="#0284c7" stroke-width="2.5" />
        <circle id="angleDot" cx="45" cy="0" r="4.5" fill="#0284c7" />

        
        <path id="angleArc" fill="none" stroke="#0284c7" stroke-width="1.5" marker-end="url(#arr)" d="" />
      </svg>
      <div id="sideReadout" class="readout">t = 0.00 rad</div>
    </div>
  </div>

  
  <div class="controls">
    <button id="btnPlay" class="btn btn-play" title="Play / Pause">⏸</button>
    <button class="btn btn-step active" data-t="0">t = 0</button>
    <button class="btn btn-step" data-t="1.570796">t = π/2</button>
    <button class="btn btn-step" data-t="3.141592">t = π</button>
    <button class="btn btn-step" data-t="4.712388">t = 3π/2</button>
    <button class="btn btn-step" data-t="6.283185">t = 2π</button>
  </div>

  <script>
    const A = 105; // 3 units * 35
    const B = 80;  // 2 units * 40
    const R_SIDE = 45;

    let t = 0;
    let playing = true;
    let targetT = null;
    const TWO_PI = Math.PI * 2;

    const currPoint = document.getElementById('currPoint');
    const tracedPath = document.getElementById('tracedPath');
    const angleRay = document.getElementById('angleRay');
    const angleDot = document.getElementById('angleDot');
    const angleSector = document.getElementById('angleSector');
    const angleArc = document.getElementById('angleArc');
    const mainReadout = document.getElementById('mainReadout');
    const sideReadout = document.getElementById('sideReadout');
    const btnPlay = document.getElementById('btnPlay');
    const stepBtns = document.querySelectorAll('.btn-step');

    function formatT(val) {
      const eps = 0.08;
      if (Math.abs(val) < eps || Math.abs(val - TWO_PI) < eps) return val > 3 ? "2π" : "0";
      if (Math.abs(val - Math.PI / 2) < eps) return "π/2";
      if (Math.abs(val - Math.PI) < eps) return "π";
      if (Math.abs(val - 3 * Math.PI / 2) < eps) return "3π/2";
      return val.toFixed(2);
    }

    function updateVisuals(angle) {
      // Main Ellipse Point (SVG y inverted)
      const px = A * Math.cos(angle);
      const py = -B * Math.sin(angle);
      currPoint.setAttribute('cx', px);
      currPoint.setAttribute('cy', py);

      // Traced path dynamic generation
      const steps = Math.max(2, Math.floor((angle / TWO_PI) * 64));
      let d = `M ${A} 0`;
      for (let i = 1; i <= steps; i++) {
        const theta = (i / steps) * angle;
        d += ` L ${A * Math.cos(theta)} ${-B * Math.sin(theta)}`;
      }
      tracedPath.setAttribute('d', d);

      // Side Angle Tracker
      const sx = R_SIDE * Math.cos(angle);
      const sy = -R_SIDE * Math.sin(angle);
      angleRay.setAttribute('x2', sx);
      angleRay.setAttribute('y2', sy);
      angleDot.setAttribute('cx', sx);
      angleDot.setAttribute('cy', sy);

      // Side Sector Fill
      if (angle > 0.02) {
        const largeArc = angle > Math.PI ? 1 : 0;
        angleSector.setAttribute('d', `M 0 0 L ${R_SIDE} 0 A ${R_SIDE} ${R_SIDE} 0 ${largeArc} 0 ${sx} ${sy} Z`);
        
        // Small arc with arrow
        const rArc = 20;
        const ax = rArc * Math.cos(angle);
        const ay = -rArc * Math.sin(angle);
        angleArc.setAttribute('d', `M ${rArc} 0 A ${rArc} ${rArc} 0 ${largeArc} 0 ${ax} ${ay}`);
        angleArc.style.display = 'inline';
      } else {
        angleSector.setAttribute('d', '');
        angleArc.style.display = 'none';
      }

      // Readouts
      const mathX = (3 * Math.cos(angle)).toFixed(2);
      const mathY = (2 * Math.sin(angle)).toFixed(2);
      mainReadout.textContent = `(x, y) = (${mathX}, ${mathY})`;
      sideReadout.textContent = `t = ${formatT(angle)}`;

      // Active button highlight
      stepBtns.forEach(btn => {
        const bt = parseFloat(btn.dataset.t);
        btn.classList.toggle('active', Math.abs(bt - angle) < 0.15);
      });
    }

    let lastTime = null;
    function animate(timestamp) {
      if (!lastTime) lastTime = timestamp;
      const dt = (timestamp - lastTime) / 1000;
      lastTime = timestamp;

      if (playing) {
        t += dt * 0.9; // ~7s full rotation
        if (t >= TWO_PI) t = 0;
      } else if (targetT !== null) {
        const diff = targetT - t;
        if (Math.abs(diff) < 0.03) {
          t = targetT;
          targetT = null;
        } else {
          t += diff * 0.15;
        }
      }

      updateVisuals(t);
      requestAnimationFrame(animate);
    }

    btnPlay.addEventListener('click', () => {
      playing = !playing;
      targetT = null;
      btnPlay.textContent = playing ? '⏸' : '▶';
    });

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        playing = false;
        btnPlay.textContent = '▶';
        targetT = parseFloat(btn.dataset.t);
      });
    });

    updateVisuals(0);
    requestAnimationFrame(animate);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parametric Equations</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      padding: 12px;
      user-select: none;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      gap: 14px;
      align-items: stretch;
      max-width: 720px;
      margin: 0 auto;
    }

    @media (max-width: 540px) {
      .main-layout {
        flex-direction: column;
      }
    }

    .left-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 150px;
    }

    .control-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .label-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    .val-highlight {
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      font-variant-numeric: tabular-nums;
    }

    input[type="range"] {
      width: 100%;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .func-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 9px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .func-box.x-box {
      border-left: 4px solid #2563eb;
    }

    .func-box.y-box {
      border-left: 4px solid #059669;
    }

    .func-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .func-expr {
      font-size: 13.5px;
      font-weight: 700;
      color: #1e293b;
    }

    .func-calc {
      font-size: 12.5px;
      color: #334155;
      font-variant-numeric: tabular-nums;
      margin-top: 1px;
    }

    .coord-result {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
      font-size: 13.5px;
      font-weight: 700;
      color: #1d4ed8;
      font-variant-numeric: tabular-nums;
    }

    .right-panel {
      flex: 1.5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      position: relative;
      min-height: 250px;
      padding: 4px;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 310px;
      display: block;
      overflow: visible;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    .axis-label {
      font-size: 10.5px;
      fill: #64748b;
      font-family: inherit;
    }

    .axis-name {
      font-size: 12px;
      font-weight: 700;
      font-style: italic;
      fill: #334155;
      font-family: inherit;
    }

    .full-curve {
      stroke: #e2e8f0;
      stroke-width: 2;
      stroke-dasharray: 4 3;
      fill: none;
    }

    .trace-curve {
      stroke: #0284c7;
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
    }

    .dir-arrow {
      fill: #0284c7;
    }

    .current-pt {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 2.5;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="left-panel">
      <div class="control-box">
        <div class="label-row">
          <span>Parameter <em>t</em></span>
          <span class="val-highlight" id="tVal">0.0</span>
        </div>
        <input type="range" id="tSlider" min="0" max="4" step="0.05" value="0">
      </div>

      <div class="func-box x-box">
        <div class="func-title">X-Coordinate</div>
        <div class="func-expr">x(t) = t² − 2</div>
        <div class="func-calc" id="xCalc">x(0.0) = −2.00</div>
      </div>

      <div class="func-box y-box">
        <div class="func-title">Y-Coordinate</div>
        <div class="func-expr">y(t) = t + 1</div>
        <div class="func-calc" id="yCalc">y(0.0) = 1.00</div>
      </div>

      <div class="coord-result" id="ptResult">
        (x, y) = (−2.00, 1.00)
      </div>
    </div>

    
    <div class="right-panel">
      <svg id="graphSvg" viewBox="0 0 350 260" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="dir-arrow" />
          </marker>
        </defs>

        
        <g id="gridGroup"></g>
        <g id="axesGroup"></g>

        
        <path id="fullPath" class="full-curve" />

        
        <path id="tracePath" class="trace-curve" />

        
        <circle id="currDot" class="current-pt" r="5.5" cx="0" cy="0" />
      </svg>
    </div>
  </div>

  <script>
    // Coordinate mapping with ample margins to prevent overlap:
    // x range: [-4, 16]
    // y range: [0, 6]
    const svgW = 350, svgH = 260;
    const xMin = -4, xMax = 16;
    const yMin = 0, yMax = 6;
    const padL = 32, padR = 28, padT = 24, padB = 26;

    function toSvgX(x) {
      return padL + ((x - xMin) / (xMax - xMin)) * (svgW - padL - padR);
    }
    function toSvgY(y) {
      return svgH - padB - ((y - yMin) / (yMax - yMin)) * (svgH - padT - padB);
    }

    const gridGroup = document.getElementById('gridGroup');
    const axesGroup = document.getElementById('axesGroup');

    // Vertical grid lines (every 2 units)
    for (let x = -4; x <= 16; x += 2) {
      const sx = toSvgX(x);
      gridGroup.innerHTML += `<line class="grid-line" x1="${sx}" y1="${toSvgY(yMin)}" x2="${sx}" y2="${toSvgY(yMax)}" />`;
      if (x !== 0) {
        axesGroup.innerHTML += `<text class="axis-label" x="${sx}" y="${toSvgY(0) + 14}" text-anchor="middle">${x}</text>`;
      }
    }

    // Horizontal grid lines (every 1 unit)
    for (let y = 0; y <= 6; y += 1) {
      const sy = toSvgY(y);
      gridGroup.innerHTML += `<line class="grid-line" x1="${toSvgX(xMin)}" y1="${sy}" x2="${toSvgX(xMax)}" y2="${sy}" />`;
      if (y > 0) {
        axesGroup.innerHTML += `<text class="axis-label" x="${toSvgX(0) - 6}" y="${sy + 3.5}" text-anchor="end">${y}</text>`;
      }
    }

    // Main Axes: x = 0 (Y-axis), y = 0 (X-axis) with nicely offset labels
    const originY = toSvgY(0);
    const originX = toSvgX(0);
    const topY = toSvgY(yMax);
    const rightX = toSvgX(xMax);

    axesGroup.innerHTML += `
      
      <line class="axis-line" x1="${toSvgX(xMin)}" y1="${originY}" x2="${rightX + 12}" y2="${originY}" />
      
      <line class="axis-line" x1="${originX}" y1="${originY}" x2="${originX}" y2="${topY - 12}" />
      
      
      <text class="axis-name" x="${rightX + 16}" y="${originY + 3.5}" text-anchor="start">x</text>
      
      
      <text class="axis-name" x="${originX}" y="${topY - 15}" text-anchor="middle">y</text>
    `;

    // Parametric functions
    function fx(t) { return t * t - 2; }
    function fy(t) { return t + 1; }

    // Precalculate full ghost curve
    let fullD = "";
    for (let t = 0; t <= 4; t += 0.05) {
      const sx = toSvgX(fx(t));
      const sy = toSvgY(fy(t));
      fullD += (t === 0 ? "M " : " L ") + sx.toFixed(2) + " " + sy.toFixed(2);
    }
    document.getElementById('fullPath').setAttribute('d', fullD);

    // Interactive updates
    const tSlider = document.getElementById('tSlider');
    const tVal = document.getElementById('tVal');
    const xCalc = document.getElementById('xCalc');
    const yCalc = document.getElementById('yCalc');
    const ptResult = document.getElementById('ptResult');
    const tracePath = document.getElementById('tracePath');
    const currDot = document.getElementById('currDot');

    function update() {
      const t = parseFloat(tSlider.value);
      const x = fx(t);
      const y = fy(t);

      tVal.textContent = t.toFixed(2);
      xCalc.textContent = `x(${t.toFixed(2)}) = ${x.toFixed(2)}`;
      yCalc.textContent = `y(${t.toFixed(2)}) = ${y.toFixed(2)}`;
      ptResult.textContent = `(x, y) = (${x.toFixed(2)}, ${y.toFixed(2)})`;

      // Build traced curve path
      let traceD = "";
      for (let ct = 0; ct <= t; ct += 0.05) {
        const sx = toSvgX(fx(ct));
        const sy = toSvgY(fy(ct));
        traceD += (ct === 0 ? "M " : " L ") + sx.toFixed(2) + " " + sy.toFixed(2);
      }
      const curSx = toSvgX(x);
      const curSy = toSvgY(y);
      if (t > 0) {
        traceD += " L " + curSx.toFixed(2) + " " + curSy.toFixed(2);
      } else {
        traceD = `M ${curSx.toFixed(2)} ${curSy.toFixed(2)}`;
      }

      tracePath.setAttribute('d', traceD);
      currDot.setAttribute('cx', curSx);
      currDot.setAttribute('cy', curSy);

      if (t > 0.4) {
        tracePath.setAttribute('marker-mid', 'url(#arrow)');
      } else {
        tracePath.removeAttribute('marker-mid');
      }
    }

    tSlider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

OGM.13.GEO.3

Aligned learning resources

Related diagrams