<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unit Circle Orientation: Counterclockwise vs Clockwise</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 8px;
    }
    .container {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
    }
    @media (max-width: 520px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
    }
    .badge {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .badge-ccw {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .badge-cw {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }
    .eq-label {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      color: #475569;
    }
    svg {
      width: 100%;
      max-width: 290px;
      height: auto;
      overflow: visible;
    }
    .axis-line { stroke: #94a3b8; stroke-width: 1.2; }
    .unit-circle { fill: none; stroke-width: 2; }
    .ccw-stroke { stroke: #059669; }
    .cw-stroke { stroke: #dc2626; }
    .arrow-arc-ccw { fill: none; stroke: #059669; stroke-width: 2.8; stroke-linecap: round; }
    .arrow-arc-cw { fill: none; stroke: #dc2626; stroke-width: 2.8; stroke-linecap: round; }
    .axis-label { font-size: 11px; font-weight: 600; fill: #64748b; font-family: system-ui, sans-serif; }
    .point-label { font-size: 9.5px; fill: #0f172a; font-family: system-ui, sans-serif; font-weight: 600; }
    .point-sub { font-size: 8.5px; fill: #475569; font-family: ui-monospace, monospace; }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 16px;
      border-radius: 24px;
      font-size: 12px;
      font-weight: 600;
      width: fit-content;
    }
    .btn {
      background: #0f172a;
      color: white;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      transition: background-color 0.15s ease;
    }
    .btn:hover {
      background: #334155;
    }
    .slider {
      accent-color: #0f172a;
      cursor: pointer;
      width: 130px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="grid">
      
      <div class="panel">
        <div class="header">
          <span class="badge badge-ccw">Counterclockwise</span>
          <span class="eq-label">x=cos t, y=sin t</span>
        </div>
        <svg viewBox="0 0 275 230" role="img" aria-label="Unit circle with counterclockwise orientation">
          <defs>
            <marker id="arrow-ccw" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <polygon points="0 1, 5 3, 0 5" fill="#059669"/>
            </marker>
          </defs>
          
          
          <line x1="20" y1="115" x2="245" y2="115" class="axis-line" />
          <line x1="110" y1="20" x2="110" y2="215" class="axis-line" />
          <text x="249" y="119" class="axis-label">x</text>
          <text x="110" y="13" text-anchor="middle" class="axis-label">y</text>

          
          <circle cx="110" cy="115" r="65" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
          <circle cx="110" cy="115" r="65" fill="none" class="unit-circle ccw-stroke" stroke-opacity="0.3" />

          
          
          <path d="M 171.1 92.8 A 65 65 0 0 0 132.2 53.9" class="arrow-arc-ccw" marker-end="url(#arrow-ccw)"/>
          
          <path d="M 48.9 137.2 A 65 65 0 0 0 87.8 176.1" class="arrow-arc-ccw" marker-end="url(#arrow-ccw)"/>

          
          <circle cx="110" cy="50" r="3.5" fill="#059669"/>
          <text x="110" y="42" text-anchor="middle" class="point-label" fill="#059669">(0, 1)</text>
          <text x="110" y="31" text-anchor="middle" class="point-sub">t = π/2</text>

          
          <circle cx="175" cy="115" r="4.5" fill="#0f172a"/>
          <text x="183" y="101" class="point-label">Initial (t = 0)</text>
          <text x="183" y="113" class="point-label">Terminal (t = 2π)</text>
          <text x="183" y="126" class="point-sub">(1, 0)</text>

          
          <circle id="dot-ccw" cx="175" cy="115" r="5.5" fill="#059669" stroke="#ffffff" stroke-width="2"/>
        </svg>
      </div>

      
      <div class="panel">
        <div class="header">
          <span class="badge badge-cw">Clockwise</span>
          <span class="eq-label">x=cos t, y=−sin t</span>
        </div>
        <svg viewBox="0 0 275 230" role="img" aria-label="Unit circle with clockwise orientation">
          <defs>
            <marker id="arrow-cw" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <polygon points="0 1, 5 3, 0 5" fill="#dc2626"/>
            </marker>
          </defs>

          
          <line x1="20" y1="115" x2="245" y2="115" class="axis-line" />
          <line x1="110" y1="20" x2="110" y2="215" class="axis-line" />
          <text x="249" y="119" class="axis-label">x</text>
          <text x="110" y="13" text-anchor="middle" class="axis-label">y</text>

          
          <circle cx="110" cy="115" r="65" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
          <circle cx="110" cy="115" r="65" fill="none" class="unit-circle cw-stroke" stroke-opacity="0.3" />

          
          
          <path d="M 171.1 137.2 A 65 65 0 0 1 132.2 176.1" class="arrow-arc-cw" marker-end="url(#arrow-cw)"/>
          
          <path d="M 48.9 92.8 A 65 65 0 0 1 87.8 53.9" class="arrow-arc-cw" marker-end="url(#arrow-cw)"/>

          
          <circle cx="110" cy="180" r="3.5" fill="#dc2626"/>
          <text x="110" y="196" text-anchor="middle" class="point-label" fill="#dc2626">(0, −1)</text>
          <text x="110" y="207" text-anchor="middle" class="point-sub">t = π/2</text>

          
          <circle cx="175" cy="115" r="4.5" fill="#0f172a"/>
          <text x="183" y="101" class="point-label">Initial (t = 0)</text>
          <text x="183" y="113" class="point-label">Terminal (t = 2π)</text>
          <text x="183" y="126" class="point-sub">(1, 0)</text>

          
          <circle id="dot-cw" cx="175" cy="115" r="5.5" fill="#dc2626" stroke="#ffffff" stroke-width="2"/>
        </svg>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="playBtn" aria-label="Play or Pause Animation">⏸</button>
      <input type="range" id="tSlider" class="slider" min="0" max="6.28318" step="0.02" value="0">
      <span id="tLabel" style="font-family: ui-monospace, monospace; width: 48px;">t=0.00</span>
    </div>
  </div>

  <script>
    const dotCCW = document.getElementById('dot-ccw');
    const dotCW = document.getElementById('dot-cw');
    const slider = document.getElementById('tSlider');
    const playBtn = document.getElementById('playBtn');
    const tLabel = document.getElementById('tLabel');

    const cx = 110, cy = 115, r = 65;
    let t = 0;
    let playing = true;
    let lastTime = null;

    function updatePositions(val) {
      t = val;
      slider.value = t;
      tLabel.textContent = 't=' + t.toFixed(2);

      // CCW: x = cos(t), y = sin(t) (SVG y increases downward, so cy - r * sin(t))
      const xCCW = cx + r * Math.cos(t);
      const yCCW = cy - r * Math.sin(t);
      dotCCW.setAttribute('cx', xCCW);
      dotCCW.setAttribute('cy', yCCW);

      // CW: x = cos(t), y = -sin(t) (SVG y increases downward, so cy + r * sin(t))
      const xCW = cx + r * Math.cos(t);
      const yCW = cy + r * Math.sin(t);
      dotCW.setAttribute('cx', xCW);
      dotCW.setAttribute('cy', yCW);
    }

    function animate(time) {
      if (playing) {
        if (lastTime != null) {
          const dt = (time - lastTime) / 1000;
          t += dt * 1.1; // Smooth pedagogical traversal (~5.7s per complete revolution)
          if (t > Math.PI * 2) t = 0;
          updatePositions(t);
        }
        lastTime = time;
      }
      requestAnimationFrame(animate);
    }

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

    slider.addEventListener('input', (e) => {
      playing = false;
      playBtn.textContent = '▶';
      lastTime = null;
      updatePositions(parseFloat(e.target.value));
    });

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

Parametric Equations of Plane Curves and Curve Orientation

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 12px;
      user-select: none;
    }

    .header-badge {
      font-size: 13px;
      font-weight: 700;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 4px 12px;
      border-radius: 999px;
      letter-spacing: 0.2px;
      display: flex;
      gap: 12px;
    }

    .graph-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      flex: 1;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .controls-panel {
      width: 100%;
      max-width: 420px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      accent-color: #3b82f6;
      cursor: pointer;
    }

    .readout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
    }

    .point-badge {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
    }

    .btn-group {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .btn-step {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
    }

    .btn-step:active {
      background: #e2e8f0;
    }

    .btn-play {
      background: #3b82f6;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="header-badge">
    <span>x = 1 − 2t</span>
    <span>y = 3 + t</span>
    <span>t ∈ [0, 3]</span>
  </div>

  <div class="graph-container">
    <svg viewBox="-70 0 440 260">
      <defs>
        <marker id="arrow" 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="#2563eb" />
        </marker>
        <marker id="axis-arr" 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" fill="#94a3b8" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1.2">
        
        <line x1="0" y1="20" x2="0" y2="240" />
        <line x1="45" y1="20" x2="45" y2="240" />
        <line x1="90" y1="20" x2="90" y2="240" />
        <line x1="135" y1="20" x2="135" y2="240" />
        <line x1="180" y1="20" x2="180" y2="240" />
        <line x1="225" y1="20" x2="225" y2="240" />
        <line x1="270" y1="20" x2="270" y2="240" />
        <line x1="315" y1="20" x2="315" y2="240" />
        
        <line x1="-15" y1="230" x2="330" y2="230" />
        <line x1="-15" y1="195" x2="330" y2="195" />
        <line x1="-15" y1="160" x2="330" y2="160" />
        <line x1="-15" y1="125" x2="330" y2="125" />
        <line x1="-15" y1="90" x2="330" y2="90" />
        <line x1="-15" y1="55" x2="330" y2="55" />
      </g>

      
      
      <line x1="270" y1="245" x2="270" y2="25" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#axis-arr)" />
      
      <line x1="-15" y1="230" x2="335" y2="230" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#axis-arr)" />

      
      <text x="330" y="244" font-size="11" fill="#64748b" font-weight="600">x</text>
      <text x="260" y="32" font-size="11" fill="#64748b" font-weight="600">y</text>

      
      <g font-size="10" fill="#94a3b8" text-anchor="middle">
        <text x="270" y="244">0</text>
        <text x="315" y="244">1</text>
        <text x="225" y="244">-1</text>
        <text x="135" y="244">-3</text>
        <text x="45" y="244">-5</text>

        <text x="258" y="164" text-anchor="end">2</text>
        <text x="258" y="129" text-anchor="end">3</text>
        <text x="258" y="59" text-anchor="end">5</text>
        <text x="258" y="24" text-anchor="end">6</text>
      </g>

      
      
      
      <line x1="315" y1="125" x2="45" y2="20" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" />

      
      
      <line x1="280" y1="111.4" x2="255" y2="101.7" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow)" />
      
      <line x1="190" y1="76.4" x2="165" y2="66.7" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow)" />
      
      <line x1="100" y1="41.4" x2="75" y2="31.7" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow)" />

      
      <circle cx="315" cy="125" r="5.5" fill="#16a34a" />
      <text x="324" y="123" font-size="11" font-weight="700" fill="#16a34a">Initial (1, 3)</text>
      <text x="324" y="137" font-size="10" font-weight="600" fill="#15803d">t = 0</text>

      
      <circle cx="45" cy="20" r="5.5" fill="#dc2626" />
      <text x="36" y="16" font-size="11" font-weight="700" fill="#dc2626" text-anchor="end">Terminal (-5, 6)</text>
      <text x="36" y="30" font-size="10" font-weight="600" fill="#b91c1c" text-anchor="end">t = 3</text>

      
      <circle id="currentDot" cx="315" cy="125" r="7" fill="#2563eb" stroke="#ffffff" stroke-width="2.5" />
    </svg>
  </div>

  <div class="controls-panel">
    <div class="readout">
      <span>Parameter: <b id="tVal">t = 0.0</b></span>
      <span class="point-badge" id="coordVal">(x, y) = (1.0, 3.0)</span>
    </div>

    <div class="slider-row">
      <span style="font-size: 11px; font-weight: 700; color: #16a34a;">0</span>
      <input type="range" id="tSlider" min="0" max="3" step="0.02" value="0">
      <span style="font-size: 11px; font-weight: 700; color: #dc2626;">3</span>
    </div>

    <div class="btn-group">
      <button class="btn-play" id="playBtn">▶ Play</button>
      <button class="btn-step" onclick="setT(0)">t = 0</button>
      <button class="btn-step" onclick="setT(1)">t = 1</button>
      <button class="btn-step" onclick="setT(2)">t = 2</button>
      <button class="btn-step" onclick="setT(3)">t = 3</button>
    </div>
  </div>

  <script>
    const slider = document.getElementById('tSlider');
    const tVal = document.getElementById('tVal');
    const coordVal = document.getElementById('coordVal');
    const currentDot = document.getElementById('currentDot');
    const playBtn = document.getElementById('playBtn');

    let isPlaying = false;
    let animTimer = null;

    function updateState(t) {
      // Equations
      const x = 1 - 2 * t;
      const y = 3 + t;

      // Map (x, y) to SVG coords
      // X: 0 -> 270, 1 -> 315 (scale 45 px per unit)
      // Y: 0 -> 230, 1 -> 195 (scale 35 px per unit)
      const svgX = 270 + (x * 45);
      const svgY = 230 - (y * 35);

      currentDot.setAttribute('cx', svgX);
      currentDot.setAttribute('cy', svgY);

      tVal.textContent = `t = ${t.toFixed(1)}`;
      coordVal.textContent = `(x, y) = (${x.toFixed(1)}, ${y.toFixed(1)})`;
    }

    function setT(val) {
      stopAnimation();
      slider.value = val;
      updateState(val);
    }

    slider.addEventListener('input', (e) => {
      stopAnimation();
      updateState(parseFloat(e.target.value));
    });

    function stopAnimation() {
      if (isPlaying) {
        isPlaying = false;
        clearInterval(animTimer);
        playBtn.textContent = '▶ Play';
      }
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAnimation();
      } else {
        isPlaying = true;
        playBtn.textContent = '⏸ Pause';
        if (parseFloat(slider.value) >= 3) {
          slider.value = 0;
        }
        animTimer = setInterval(() => {
          let curr = parseFloat(slider.value) + 0.03;
          if (curr > 3) {
            curr = 3;
            slider.value = curr;
            updateState(curr);
            stopAnimation();
          } else {
            slider.value = curr;
            updateState(curr);
          }
        }, 30);
      }
    });

    // Init
    updateState(0);
  </script>
</body>
</html>

<!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: transparent;
      padding: 10px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .panel-header {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
      text-align: center;
    }
    .panel-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .tag-highlight {
      color: #0284c7;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 220px;
      overflow: visible;
    }
    .axis {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .curve-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .curve-bg {
      fill: none;
      stroke: #e0f2fe;
      stroke-width: 8;
      stroke-linecap: round;
    }
    .arrow {
      fill: #0284c7;
    }
    .t-node {
      fill: #ffffff;
      stroke: #0284c7;
      stroke-width: 2.5;
      cursor: pointer;
      transition: r 0.2s ease, fill 0.2s ease;
    }
    .t-label {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      user-select: none;
    }
    .active-dot {
      fill: #0284c7;
      filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.8));
    }
    .active-halo {
      fill: #0284c7;
      opacity: 0.25;
      animation: pulse 1.6s infinite ease-out;
    }
    @keyframes pulse {
      0% { r: 6; opacity: 0.6; }
      100% { r: 16; opacity: 0; }
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      width: 100%;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      padding: 4px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .slider {
      flex: 1;
      max-width: 130px;
      accent-color: #0284c7;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="grid">
    
    <div class="panel">
      <div class="panel-header">Cartesian: y = f(x)</div>
      <div class="panel-tag">Path Only</div>
      <svg viewBox="0 0 260 200" aria-label="Cartesian Graph">
        
        <line x1="30" y1="160" x2="240" y2="160" class="axis" />
        <line x1="40" y1="20" x2="40" y2="175" class="axis" />
        <polygon points="240,157 248,160 240,163" fill="#cbd5e1" />
        <polygon points="37,20 40,12 43,20" fill="#cbd5e1" />
        
        <text x="246" y="174" class="t-label" style="fill:#64748b;">x</text>
        <text x="28" y="22" class="t-label" style="fill:#64748b;">y</text>

        
        <path d="M 50 150 Q 135 -30 220 150" class="curve-path" />
      </svg>
      <div class="controls" style="visibility: hidden;">
        <span class="btn">Placeholder</span>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">Parametric: (x(t), y(t))</div>
      <div class="panel-tag tag-highlight">Direction &amp; Time</div>
      <svg viewBox="0 0 260 200" id="paramSvg" aria-label="Parametric Graph">
        <defs>
          <marker id="arrowHead" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <path d="M 0 0 L 6 3 L 0 6 z" class="arrow" />
          </marker>
        </defs>

        
        <line x1="30" y1="160" x2="240" y2="160" class="axis" />
        <line x1="40" y1="20" x2="40" y2="175" class="axis" />
        <polygon points="240,157 248,160 240,163" fill="#cbd5e1" />
        <polygon points="37,20 40,12 43,20" fill="#cbd5e1" />
        
        <text x="246" y="174" class="t-label" style="fill:#64748b;">x</text>
        <text x="28" y="22" class="t-label" style="fill:#64748b;">y</text>

        
        <path d="M 50 150 Q 92.5 60 135 60" class="curve-path" marker-mid="url(#arrowHead)" />
        <path d="M 50 150 Q 71.25 105 92.5 82.5" class="curve-path" marker-end="url(#arrowHead)" />
        <path d="M 135 60 Q 177.5 60 220 150" class="curve-path" />
        <path d="M 135 60 Q 156.25 60 177.5 82.5" class="curve-path" marker-end="url(#arrowHead)" />

        
        
        <circle cx="50" cy="150" r="4.5" class="t-node" onclick="setT(0)" />
        <text x="50" y="172" class="t-label">t=0</text>

        
        <circle cx="92.5" cy="82.5" r="4.5" class="t-node" onclick="setT(1)" />
        <text x="74" y="78" class="t-label">t=1</text>

        
        <circle cx="135" cy="60" r="4.5" class="t-node" onclick="setT(2)" />
        <text x="135" y="44" class="t-label">t=2</text>

        
        <circle cx="177.5" cy="82.5" r="4.5" class="t-node" onclick="setT(3)" />
        <text x="196" y="78" class="t-label">t=3</text>

        
        <circle cx="220" cy="150" r="4.5" class="t-node" onclick="setT(4)" />
        <text x="220" y="172" class="t-label">t=4</text>

        
        <circle id="halo" cx="50" cy="150" r="8" class="active-halo" />
        <circle id="dot" cx="50" cy="150" r="6" class="active-dot" />
      </svg>

      
      <div class="controls">
        <button class="btn" id="playBtn" onclick="togglePlay()">▶ Play</button>
        <input type="range" id="tSlider" class="slider" min="0" max="4" step="0.02" value="0" oninput="onSlide(this.value)" />
      </div>
    </div>
  </div>

  <script>
    // Mathematical coordinates of Bezier curve M 50 150 Q 135 -30 220 150
    // Parametric representation: u = t / 4, u in [0, 1]
    const p0 = { x: 50, y: 150 };
    const p1 = { x: 135, y: -30 };
    const p2 = { x: 220, y: 150 };

    function getPos(tVal) {
      const u = tVal / 4;
      const x = (1 - u) * (1 - u) * p0.x + 2 * (1 - u) * u * p1.x + u * u * p2.x;
      const y = (1 - u) * (1 - u) * p0.y + 2 * (1 - u) * u * p1.y + u * u * p2.y;
      return { x, y };
    }

    let t = 0;
    let playing = true;
    let lastTime = null;

    const dot = document.getElementById('dot');
    const halo = document.getElementById('halo');
    const slider = document.getElementById('tSlider');
    const playBtn = document.getElementById('playBtn');

    function updateView(val) {
      t = parseFloat(val);
      slider.value = t;
      const pos = getPos(t);
      dot.setAttribute('cx', pos.x);
      dot.setAttribute('cy', pos.y);
      halo.setAttribute('cx', pos.x);
      halo.setAttribute('cy', pos.y);
    }

    function onSlide(val) {
      playing = false;
      playBtn.innerHTML = '▶ Play';
      updateView(val);
    }

    function setT(targetT) {
      playing = false;
      playBtn.innerHTML = '▶ Play';
      updateView(targetT);
    }

    function togglePlay() {
      playing = !playing;
      playBtn.innerHTML = playing ? '⏸ Pause' : '▶ Play';
      if (playing && t >= 4) {
        t = 0;
      }
      lastTime = null;
    }

    function animate(time) {
      if (playing) {
        if (!lastTime) lastTime = time;
        const dt = (time - lastTime) / 1000;
        lastTime = time;

        t += dt * 0.9; // Smooth ~4.5s cycle
        if (t > 4) {
          t = 0;
        }
        updateView(t);
      }
      requestAnimationFrame(animate);
    }

    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">
  <meta name="aspect-ratio" content="4:3">
  <title>Parametric Curve and Orientation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px;
      width: 100%;
      max-width: 650px;
      align-items: center;
      justify-content: center;
    }

    /* Table Column */
    .table-container {
      flex: 1 1 270px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 4px;
      font-size: 13px;
    }

    th {
      background: #f1f5f9;
      color: #475569;
      font-weight: 600;
      padding: 6px 8px;
      text-align: center;
      font-size: 12px;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }

    th:first-child { border-left: 1px solid #e2e8f0; border-radius: 6px 0 0 6px; }
    th:last-child { border-right: 1px solid #e2e8f0; border-radius: 0 6px 6px 0; }

    tbody tr {
      background: #f8fafc;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.15s;
    }

    tbody tr td {
      padding: 6px 8px;
      text-align: center;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      color: #1e2945;
      font-variant-numeric: tabular-nums;
    }

    tbody tr td:first-child {
      border-left: 1px solid #e2e8f0;
      border-radius: 6px 0 0 6px;
      font-weight: 600;
      color: #4f46e5;
    }

    tbody tr td:last-child {
      border-right: 1px solid #e2e8f0;
      border-radius: 0 6px 6px 0;
      font-weight: 600;
    }

    tbody tr.active {
      background: #e0e7ff;
      box-shadow: 0 0 0 2px #4f46e5;
    }

    tbody tr.active td {
      border-color: transparent;
      color: #312e81;
    }

    tbody tr.active td:first-child {
      color: #4338ca;
    }

    /* Graph Column */
    .graph-container {
      flex: 1 1 260px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    svg {
      width: 100%;
      max-width: 280px;
      height: auto;
      overflow: visible;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
      transition: background 0.15s, border-color 0.15s;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #4f46e5;
      border-color: #4f46e5;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #4338ca;
      border-color: #4338ca;
    }

    .orientation-tag {
      font-size: 12px;
      font-weight: 600;
      color: #4f46e5;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #eef2ff;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid #c7d2fe;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>t</th>
            <th>x = t² − 2</th>
            <th>y = 2t</th>
            <th>(x, y)</th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <tr data-index="0"><td>−2</td><td>2</td><td>−4</td><td>(2, −4)</td></tr>
          <tr data-index="1"><td>−1</td><td>−1</td><td>−2</td><td>(−1, −2)</td></tr>
          <tr data-index="2"><td>0</td><td>−2</td><td>0</td><td>(−2, 0)</td></tr>
          <tr data-index="3"><td>1</td><td>−1</td><td>2</td><td>(−1, 2)</td></tr>
          <tr data-index="4"><td>2</td><td>2</td><td>4</td><td>(2, 4)</td></tr>
        </tbody>
      </table>

      <div class="controls">
        <button id="prevBtn" class="btn" aria-label="Previous step">◀</button>
        <button id="playBtn" class="btn btn-primary" style="min-width: 70px; justify-content: center;">⏸ Pause</button>
        <button id="nextBtn" class="btn" aria-label="Next step">▶</button>
        <span class="orientation-tag">t increases →</span>
      </div>
    </div>

    
    <div class="graph-container">
      <svg viewBox="0 0 280 270" id="graphSvg">
        <defs>
          
          <marker id="axisArrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#94a3b8" />
          </marker>
          
          <marker id="curveArrow" viewBox="0 0 8 8" refX="5" refY="4" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 1 1 L 7 4 L 1 7 z" fill="#4f46e5" />
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          
          <line x1="26" y1="15" x2="26" y2="255" />
          <line x1="54" y1="15" x2="54" y2="255" />
          <line x1="82" y1="15" x2="82" y2="255" />
          <line x1="110" y1="15" x2="110" y2="255" />
          <line x1="138" y1="15" x2="138" y2="255" />
          <line x1="166" y1="15" x2="166" y2="255" />
          <line x1="194" y1="15" x2="194" y2="255" />

          
          <line x1="15" y1="15" x2="250" y2="15" />
          <line x1="15" y1="40" x2="250" y2="40" />
          <line x1="15" y1="65" x2="250" y2="65" />
          <line x1="15" y1="90" x2="250" y2="90" />
          <line x1="15" y1="115" x2="250" y2="115" />
          <line x1="15" y1="140" x2="250" y2="140" />
          <line x1="15" y1="165" x2="250" y2="165" />
          <line x1="15" y1="190" x2="250" y2="190" />
          <line x1="15" y1="215" x2="250" y2="215" />
          <line x1="15" y1="240" x2="250" y2="240" />
        </g>

        
        
        <line x1="20" y1="140" x2="235" y2="140" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#axisArrow)" />
        
        <line x1="110" y1="260" x2="110" y2="20" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#axisArrow)" />

        
        <text x="242" y="144" fill="#64748b" font-size="11" font-weight="600">x</text>
        <text x="110" y="12" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">y</text>

        
        <text x="54" y="153" fill="#94a3b8" font-size="9" text-anchor="middle">−2</text>
        <text x="166" y="153" fill="#94a3b8" font-size="9" text-anchor="middle">2</text>
        <text x="103" y="44" fill="#94a3b8" font-size="9" text-anchor="end">4</text>
        <text x="103" y="244" fill="#94a3b8" font-size="9" text-anchor="end">−4</text>

        
        <path id="parabolaBase" d="" fill="none" stroke="#e2e8f0" stroke-width="3" stroke-linecap="round" />

        
        <path id="curveSeg1" d="" fill="none" stroke="#c7d2fe" stroke-width="2.5" marker-end="url(#curveArrow)" />
        <path id="curveSeg2" d="" fill="none" stroke="#c7d2fe" stroke-width="2.5" marker-end="url(#curveArrow)" />

        
        <path id="activePath" d="" fill="none" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" />

        
        <g id="plotPoints"></g>

        
        <circle id="tracerPoint" cx="166" cy="240" r="6" fill="#4f46e5" stroke="#ffffff" stroke-width="2" style="filter: drop-shadow(0 2px 4px rgba(79,70,229,0.4)); transition: cx 0.4s ease, cy 0.4s ease;" />
        <text id="tracerLabel" x="166" y="258" fill="#1e2945" font-size="11" font-weight="bold" text-anchor="middle">(2, −4)</text>
      </svg>
    </div>
  </div>

  <script>
    // Coordinate Mapping:
    // x = [-3, 4], y = [-5, 5]
    // px = 110 + x * 28
    // py = 140 - y * 25
    function toSvg(x, y) {
      return {
        x: 110 + x * 28,
        y: 140 - y * 25
      };
    }

    function ptForT(t) {
      const x = t * t - 2;
      const y = 2 * t;
      return toSvg(x, y);
    }

    // Generate accurate path points
    function makePathString(tStart, tEnd, step = 0.05) {
      let d = '';
      for (let t = tStart; t <= tEnd + 0.001; t += step) {
        const pt = ptForT(t);
        d += (d === '' ? 'M ' : ' L ') + pt.x.toFixed(2) + ' ' + pt.y.toFixed(2);
      }
      return d;
    }

    // Initialize Static Curves & Arrows
    document.getElementById('parabolaBase').setAttribute('d', makePathString(-2.2, 2.2));
    
    // Segment 1: t = -2.0 to t = -0.5 (arrow points upward-left)
    document.getElementById('curveSeg1').setAttribute('d', makePathString(-2.0, -0.6));
    
    // Segment 2: t = 0.4 to t = 1.8 (arrow points upward-right)
    document.getElementById('curveSeg2').setAttribute('d', makePathString(0.4, 1.7));

    // Define standard table steps
    const steps = [
      { t: -2, x: 2, y: -4, label: 't = −2 (2, −4)' },
      { t: -1, x: -1, y: -2, label: 't = −1 (−1, −2)' },
      { t: 0, x: -2, y: 0, label: 't = 0 (−2, 0)' },
      { t: 1, x: -1, y: 2, label: 't = 1 (−1, 2)' },
      { t: 2, x: 2, y: 4, label: 't = 2 (2, 4)' }
    ];

    // Plot static point markers
    const pointsGroup = document.getElementById('plotPoints');
    steps.forEach((st) => {
      const pt = toSvg(st.x, st.y);
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', pt.x);
      circle.setAttribute('cy', pt.y);
      circle.setAttribute('r', '4');
      circle.setAttribute('fill', '#94a3b8');
      pointsGroup.appendChild(circle);
    });

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const rows = document.querySelectorAll('#tableBody tr');
    const tracer = document.getElementById('tracerPoint');
    const tracerLabel = document.getElementById('tracerLabel');
    const activePath = document.getElementById('activePath');
    const playBtn = document.getElementById('playBtn');

    function updateView(index) {
      currentStep = index;

      // Update active table row
      rows.forEach((r, idx) => {
        if (idx === index) {
          r.classList.add('active');
        } else {
          r.classList.remove('active');
        }
      });

      // Update dynamic curve trace from t = -2 up to current step t
      const curT = steps[index].t;
      activePath.setAttribute('d', makePathString(-2, curT));

      // Update tracer position & label
      const pt = ptForT(curT);
      tracer.setAttribute('cx', pt.x);
      tracer.setAttribute('cy', pt.y);

      // Label offset logic to prevent overlapping axes
      let labelY = pt.y + 16;
      let labelX = pt.x + (curT < 0 ? 12 : (curT > 0 ? 12 : -20));
      if (curT === 0) { labelX = pt.x - 24; labelY = pt.y - 6; }
      else if (curT === -2) { labelX = pt.x + 8; labelY = pt.y + 14; }
      else if (curT === 2) { labelX = pt.x + 8; labelY = pt.y - 8; }

      tracerLabel.setAttribute('x', labelX);
      tracerLabel.setAttribute('y', labelY);
      tracerLabel.textContent = `(${steps[index].x}, ${steps[index].y})`;
    }

    function nextStep() {
      const next = (currentStep + 1) % steps.length;
      updateView(next);
    }

    function prevStep() {
      const prev = (currentStep - 1 + steps.length) % steps.length;
      updateView(prev);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.add('btn-primary');
      isPlaying = true;
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      playBtn.textContent = '▶ Play';
      playBtn.classList.remove('btn-primary');
      isPlaying = false;
    }

    // Event Listeners
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

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

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

    rows.forEach((row, idx) => {
      row.addEventListener('click', () => {
        stopAutoPlay();
        updateView(idx);
      });
    });

    // Initial state
    updateView(0);
    startAutoPlay();
  </script>
</body>
</html>

OGM.12.GEO.4

Aligned learning resources

Related diagrams