<!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">
  <title>Polar Coordinate Grid</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      color: #1e2945;
    }
    .btn.active-all {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .btn.active-a {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
    }
    .btn.active-b {
      background: #9333ea;
      color: #ffffff;
      border-color: #9333ea;
    }
    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 1 / 1;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .grid-circle {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 1.2;
    }
    .grid-spoke {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 2 3;
    }
    .main-axis {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }
    .polar-axis {
      stroke: #64748b;
      stroke-width: 2;
    }
    .grid-label {
      font-size: 11px;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .r-label {
      font-size: 10px;
      fill: #94a3b8;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: auto;
    }
    .point-group {
      transition: opacity 0.3s ease;
    }
    .dimmed {
      opacity: 0.15;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active-all" id="btnBoth" onclick="setView('both')">Both Points</button>
    <button class="btn" id="btnA" onclick="setView('a')">Point A (4, 5π/6)</button>
    <button class="btn" id="btnB" onclick="setView('b')">Point B (2, -π/3)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 500 500">
      <defs>
        
        <marker id="arrowA" 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="#16a34a" />
        </marker>
        
        <marker id="arrowB" 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="#9333ea" />
        </marker>
        
        <marker id="axisArrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#64748b" />
        </marker>
      </defs>

      
      <circle class="grid-circle" cx="250" cy="250" r="45" />
      <circle class="grid-circle" cx="250" cy="250" r="90" />
      <circle class="grid-circle" cx="250" cy="250" r="135" />
      <circle class="grid-circle" cx="250" cy="250" r="180" />

      
      
      <line class="grid-spoke" x1="94.1" y1="340" x2="405.9" y2="160" />
      
      <line class="grid-spoke" x1="160" y1="405.9" x2="340" y2="94.1" />
      
      <line class="grid-spoke" x1="160" y1="94.1" x2="340" y2="405.9" />
      
      <line class="grid-spoke" x1="94.1" y1="160" x2="405.9" y2="340" />

      
      <line class="main-axis" x1="250" y1="50" x2="250" y2="450" />
      
      <line class="main-axis" x1="50" y1="250" x2="250" y2="250" />
      
      <line class="polar-axis" x1="250" y1="250" x2="445" y2="250" marker-end="url(#axisArrow)" />

      
      <text class="r-label" x="295" y="244">1</text>
      <text class="r-label" x="340" y="244">2</text>
      <text class="r-label" x="385" y="244">3</text>
      <text class="r-label" x="430" y="244">4</text>

      
      <text class="grid-label" x="458" y="250">0</text>
      <text class="grid-label" x="430" y="145">π/6</text>
      <text class="grid-label" x="355" y="70">π/3</text>
      <text class="grid-label" x="250" y="38">π/2</text>
      <text class="grid-label" x="145" y="70">2π/3</text>
      <text class="grid-label" x="70" y="145">5π/6</text>
      <text class="grid-label" x="38" y="250">π</text>
      <text class="grid-label" x="70" y="355">7π/6</text>
      <text class="grid-label" x="145" y="430">4π/3</text>
      <text class="grid-label" x="250" y="462">3π/2</text>
      <text class="grid-label" x="355" y="430">5π/3</text>
      <text class="grid-label" x="430" y="355">11π/6</text>

      
      <g id="groupA" class="point-group">
        
        <line x1="250" y1="250" x2="94.12" y2="160" stroke="#16a34a" stroke-width="3" stroke-linecap="round" />
        
        
        <rect x="156" y="190" width="34" height="18" rx="4" fill="#ffffff" stroke="#16a34a" stroke-width="1" opacity="0.95" />
        <text x="173" y="202" fill="#16a34a" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="central">r = 4</text>

        
        
        <path d="M 302 250 A 52 52 0 0 0 204.95 224" fill="none" stroke="#16a34a" stroke-width="2.2" marker-end="url(#arrowA)" />
        
        
        <rect x="238" y="174" width="46" height="18" rx="4" fill="#ffffff" stroke="#16a34a" stroke-width="1" opacity="0.95" />
        <text x="261" y="186" fill="#16a34a" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="central">+5π/6</text>

        
        <circle cx="94.12" cy="160" r="7" fill="#16a34a" stroke="#ffffff" stroke-width="2" />
        
        
        <rect x="20" y="112" width="105" height="26" rx="6" fill="#16a34a" />
        <text x="72.5" y="128" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central">A(4, 5π/6)</text>
      </g>

      
      <g id="groupB" class="point-group">
        
        
        <line x1="250" y1="250" x2="295" y2="327.94" stroke="#9333ea" stroke-width="3" stroke-linecap="round" />
        
        
        <rect x="274" y="278" width="34" height="18" rx="4" fill="#ffffff" stroke="#9333ea" stroke-width="1" opacity="0.95" />
        <text x="291" y="290" fill="#9333ea" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="central">r = 2</text>

        
        
        <path d="M 318 250 A 68 68 0 0 1 284 308.89" fill="none" stroke="#9333ea" stroke-width="2.2" marker-end="url(#arrowB)" />
        
        
        <rect x="318" y="272" width="40" height="18" rx="4" fill="#ffffff" stroke="#9333ea" stroke-width="1" opacity="0.95" />
        <text x="338" y="284" fill="#9333ea" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="central">−π/3</text>

        
        <circle cx="295" cy="327.94" r="7" fill="#9333ea" stroke="#ffffff" stroke-width="2" />
        
        
        <rect x="295" y="348" width="98" height="26" rx="6" fill="#9333ea" />
        <text x="344" y="364" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central">B(2, −π/3)</text>
      </g>

      
      <circle cx="250" cy="250" r="3.5" fill="#1e2945" />
      <text x="238" y="262" fill="#64748b" font-size="11" font-weight="700" text-anchor="middle">O</text>
    </svg>
  </div>

  <script>
    function setView(mode) {
      const btnBoth = document.getElementById('btnBoth');
      const btnA = document.getElementById('btnA');
      const btnB = document.getElementById('btnB');
      const groupA = document.getElementById('groupA');
      const groupB = document.getElementById('groupB');

      btnBoth.className = 'btn';
      btnA.className = 'btn';
      btnB.className = 'btn';

      if (mode === 'both') {
        btnBoth.classList.add('active-all');
        groupA.classList.remove('dimmed');
        groupB.classList.remove('dimmed');
      } else if (mode === 'a') {
        btnA.classList.add('active-a');
        groupA.classList.remove('dimmed');
        groupB.classList.add('dimmed');
      } else if (mode === 'b') {
        btnB.classList.add('active-b');
        groupA.classList.add('dimmed');
        groupB.classList.remove('dimmed');
      }
    }
  </script>
</body>
</html>

The Polar Coordinate Grid and Multiple Representations of Points

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100vh;
      padding: 8px 10px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .step-btn:hover {
      background: #f1f5f9;
      color: #334155;
    }

    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
    }

    .play-btn {
      width: 32px;
      height: 30px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #1e2945;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }

    .play-btn:hover { background: #e2e8f0; }
    .play-btn:active { background: #cbd5e1; }

    .graph-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 380 / 340;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .status-banner {
      width: 100%;
      max-width: 360px;
      text-align: center;
      font-size: 12.5px;
      font-weight: 600;
      color: #334155;
      background: #f1f5f9;
      padding: 7px 10px;
      border-radius: 8px;
      line-height: 1.35;
    }

    /* SVG Elements Transition */
    .fwd-ray, .back-ray, .target-point, .angle-arc {
      transition: opacity 0.35s ease;
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" onclick="goToStep(0)">1. θ = π/4</button>
    <button class="step-btn" onclick="goToStep(1)">2. Reverse Ray</button>
    <button class="step-btn" onclick="goToStep(2)">3. Plot r = -3</button>
    <button class="play-btn" id="playToggle" onclick="togglePlay()" title="Play/Pause" aria-label="Play or Pause Animation">⏸</button>
  </div>

  
  <div class="graph-container">
    <svg viewBox="0 0 380 340" aria-label="Polar coordinate plotting graph">
      <defs>
        
        <marker id="arrow-orange" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#ea580c" />
        </marker>
        <marker id="arrow-red" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#ef4444" />
        </marker>
        <marker id="arrow-blue" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
          <path d="M0,0 L5,2.5 L0,5 Z" fill="#3b82f6" />
        </marker>
      </defs>

      
      <circle cx="190" cy="165" r="38" fill="none" stroke="#e2e8f0" stroke-width="1.5" />
      <circle cx="190" cy="165" r="76" fill="none" stroke="#e2e8f0" stroke-width="1.5" />
      <circle cx="190" cy="165" r="114" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />

      
      <line x1="45" y1="165" x2="335" y2="165" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="190" y1="20" x2="190" y2="310" stroke="#cbd5e1" stroke-width="1.5" />

      
      <text x="228" y="160" fill="#94a3b8" font-size="11" font-weight="600" text-anchor="middle">1</text>
      <text x="266" y="160" fill="#94a3b8" font-size="11" font-weight="600" text-anchor="middle">2</text>
      <text x="304" y="160" fill="#64748b" font-size="11" font-weight="700" text-anchor="middle">3</text>

      
      <text x="343" y="169" fill="#64748b" font-size="11" font-weight="600">0</text>
      <text x="190" y="14" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">π/2</text>
      <text x="37" y="169" fill="#64748b" font-size="11" font-weight="600" text-anchor="end">π</text>
      <text x="190" y="324" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3π/2</text>

      
      <g id="step1Group" class="angle-arc">
        <path d="M 235 165 A 45 45 0 0 0 221.8 133.2" fill="none" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrow-blue)" />
        <text x="236" y="145" fill="#2563eb" font-size="11" font-weight="700">θ = π/4</text>
      </g>

      <g id="step1Ray" class="fwd-ray">
        
        <line x1="190" y1="165" x2="280" y2="75" stroke="#f97316" stroke-width="2.5" stroke-dasharray="5 4" marker-end="url(#arrow-orange)" />
        <text x="238" y="68" fill="#ea580c" font-size="11.5" font-weight="700">θ = π/4 (r &gt; 0)</text>
      </g>

      
      <g id="step2Group" class="back-ray" style="opacity: 0;">
        <line x1="190" y1="165" x2="100" y2="255" stroke="#ef4444" stroke-width="2.5" stroke-dasharray="5 4" marker-end="url(#arrow-red)" />
        <text x="105" y="278" fill="#dc2626" font-size="11.5" font-weight="700" text-anchor="middle">r &lt; 0 (Opposite ray)</text>
      </g>

      
      <circle cx="190" cy="165" r="3.5" fill="#1e2945" />
      <text x="180" y="179" fill="#64748b" font-size="10" font-weight="600">Pole</text>

      
      <g id="step3Group" class="target-point" style="opacity: 0;">
        
        <line x1="190" y1="165" x2="109.4" y2="245.6" stroke="#dc2626" stroke-width="3" />
        <circle cx="109.4" cy="245.6" r="14" fill="#fee2e2" />
        <circle cx="109.4" cy="245.6" r="5.5" fill="#dc2626" stroke="#ffffff" stroke-width="1.5" />

        
        <rect x="10" y="196" width="138" height="35" rx="6" fill="#ffffff" stroke="#fca5a5" stroke-width="1.2" />
        <text x="17" y="211" fill="#b91c1c" font-size="11" font-weight="700">C (−3, π/4)</text>
        <text x="17" y="224" fill="#475569" font-size="9.5" font-weight="600">coincides with (3, 5π/4)</text>
      </g>
    </svg>
  </div>

  
  <div class="status-banner" id="statusText">
    Rotate to angle θ = π/4 in Quadrant I
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const steps = [
      {
        text: "Rotate to angle θ = π/4 in Quadrant I",
        s1: 1, s2: 0, s3: 0
      },
      {
        text: "Negative r: extend backward through the pole",
        s1: 1, s2: 1, s3: 0
      },
      {
        text: "Rotate to π/4, then back up 3 units through the pole to C(−3, π/4)",
        s1: 0.35, s2: 0.6, s3: 1
      }
    ];

    function applyStep(index) {
      currentStep = index;
      const s = steps[index];

      // Update button highlights
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update banner text
      document.getElementById('statusText').textContent = s.text;

      // Update SVG Opacities
      document.getElementById('step1Ray').style.opacity = s.s1;
      document.getElementById('step1Group').style.opacity = s.s1;
      document.getElementById('step2Group').style.opacity = s.s2;
      document.getElementById('step3Group').style.opacity = s.s3;
    }

    function goToStep(index) {
      applyStep(index);
      if (isPlaying) {
        resetTimer();
      }
    }

    function nextStep() {
      applyStep((currentStep + 1) % steps.length);
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(nextStep, 3400);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playToggle').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        nextStep();
        resetTimer();
      } else if (timer) {
        clearInterval(timer);
      }
    }

    // Initialize
    applyStep(0);
    resetTimer();
  </script>
</body>
</html>

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      margin: 0;
      width: 100%;
    }

    .header-title {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    @media (max-width: 440px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .equiv-card {
      background: #ffffff;
      border-radius: 10px;
      border: 1.5px solid #e2e8f0;
      padding: 10px 8px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .equiv-card.left-card {
      border-color: #bae6fd;
      background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 45%);
    }

    .equiv-card.right-card {
      border-color: #fed7aa;
      background: linear-gradient(180deg, #fff7ed 0%, #ffffff 45%);
    }

    .card-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 12px;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .badge-blue {
      background: #e0f2fe;
      color: #0369a1;
    }

    .badge-orange {
      background: #ffedd5;
      color: #c2410c;
    }

    .general-formula {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
      font-size: 17px;
      font-weight: 600;
      margin: 2px 0;
      color: #0f172a;
    }

    .formula-desc {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 6px;
    }

    .dynamic-val {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
      font-size: 15px;
      font-weight: bold;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 6px;
    }

    .val-blue {
      background: #f0f9ff;
      color: #0284c7;
      border: 1px dashed #bae6fd;
    }

    .val-orange {
      background: #fff7ed;
      color: #ea580c;
      border: 1px dashed #fed7aa;
    }

    .svg-container {
      width: 100%;
      max-width: 155px;
      aspect-ratio: 1;
    }

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

    .controls-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }

    .controls-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .controls {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      font-family: "Cambria Math", "Times New Roman", serif;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

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

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="header-title">Equivalent Polar Coordinates for Point <i>P</i>(<i>r</i>, <i>θ</i>)</div>

  <div class="cards-grid">
    
    <div class="equiv-card left-card">
      <div class="card-badge badge-blue">Keep Radius (<i>r</i> &gt; 0)</div>
      <div class="general-formula">(<i>r</i>, <i>θ</i> + 2<i>k</i>π)</div>
      <div class="formula-desc">Add even multiples of π</div>
      <div class="dynamic-val val-blue" id="math-left">(<i>r</i>, <i>θ</i>)</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 200">
          <defs>
            <marker id="arr-blue" 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>
          </defs>
          
          <circle cx="100" cy="100" r="35" fill="none" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <circle cx="100" cy="100" r="70" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
          
          <line x1="15" y1="100" x2="185" y2="100" stroke="#94a3b8" stroke-width="1.2"/>
          <line x1="100" y1="15" x2="100" y2="185" stroke="#94a3b8" stroke-width="1.2"/>
          
          
          <line x1="100" y1="100" x2="156.6" y2="43.4" stroke="#0284c7" stroke-width="2.5"/>
          
          
          <path id="loop-left" d="M 124 76 A 34 34 0 1 1 123 77" fill="none" stroke="#0284c7" stroke-width="2.2" marker-end="url(#arr-blue)"/>
          
          
          <circle cx="149.5" cy="50.5" r="5" fill="#0284c7"/>
          <text x="158" y="46" font-size="13" font-weight="bold" fill="#0284c7" font-family="system-ui, sans-serif">P</text>
          
          
          <text x="135" y="94" font-size="12" font-style="italic" fill="#0284c7" font-family="'Cambria Math', serif">+2kπ</text>

          
          <circle cx="100" cy="100" r="3" fill="#64748b"/>
        </svg>
      </div>
    </div>

    
    <div class="equiv-card right-card">
      <div class="card-badge badge-orange">Flip Radius (−<i>r</i>)</div>
      <div class="general-formula">(−<i>r</i>, <i>θ</i> + (2<i>k</i>+1)π)</div>
      <div class="formula-desc">Add odd multiples of π</div>
      <div class="dynamic-val val-orange" id="math-right">(−<i>r</i>, <i>θ</i> + π)</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 200">
          <defs>
            <marker id="arr-orange" 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="#ea580c" />
            </marker>
            <marker id="arr-flip" 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="#ea580c" />
            </marker>
          </defs>
          
          <circle cx="100" cy="100" r="35" fill="none" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <circle cx="100" cy="100" r="70" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
          
          <line x1="15" y1="100" x2="185" y2="100" stroke="#94a3b8" stroke-width="1.2"/>
          <line x1="100" y1="15" x2="100" y2="185" stroke="#94a3b8" stroke-width="1.2"/>
          
          
          <line x1="100" y1="100" x2="43.4" y2="156.6" stroke="#ea580c" stroke-width="2" stroke-dasharray="4 3"/>
          
          
          <line x1="43.4" y1="156.6" x2="145" y2="55" stroke="#ea580c" stroke-width="2.5" marker-end="url(#arr-flip)"/>

          
          <path id="loop-right" d="M 124 76 A 34 34 0 0 1 76 124" fill="none" stroke="#ea580c" stroke-width="2.2" marker-end="url(#arr-orange)"/>
          
          
          <circle cx="149.5" cy="50.5" r="5" fill="#ea580c"/>
          <text x="158" y="46" font-size="13" font-weight="bold" fill="#ea580c" font-family="system-ui, sans-serif">P</text>
          
          
          <text x="50" y="112" font-size="12" font-style="italic" fill="#ea580c" font-family="'Cambria Math', serif">+π</text>

          
          <circle cx="100" cy="100" r="3" fill="#64748b"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="controls-wrapper">
    <span class="controls-label">Select integer <i>k</i>:</span>
    <div class="controls">
      <button class="btn active" id="btn-k0" onclick="setK(0)">k = 0</button>
      <button class="btn" id="btn-k1" onclick="setK(1)">k = 1</button>
      <button class="btn" id="btn-km1" onclick="setK(-1)">k = −1</button>
    </div>
  </div>

  <script>
    function updateFormulas(k) {
      const leftEl = document.getElementById('math-left');
      const rightEl = document.getElementById('math-right');

      let leftStr = '';
      if (k === 0) {
        leftStr = '(<i>r</i>, <i>θ</i>)';
      } else if (k === 1) {
        leftStr = '(<i>r</i>, <i>θ</i> + 2π)';
      } else if (k === -1) {
        leftStr = '(<i>r</i>, <i>θ</i> − 2π)';
      } else {
        const mult = 2 * k;
        leftStr = `(<i>r</i>, <i>θ</i> ${mult > 0 ? '+ ' + mult : '− ' + Math.abs(mult)}π)`;
      }

      let rightStr = '';
      const oddVal = 2 * k + 1;
      if (oddVal === 1) {
        rightStr = '(−<i>r</i>, <i>θ</i> + π)';
      } else if (oddVal === -1) {
        rightStr = '(−<i>r</i>, <i>θ</i> − π)';
      } else if (oddVal > 1) {
        rightStr = `(−<i>r</i>, <i>θ</i> + ${oddVal}π)`;
      } else {
        rightStr = `(−<i>r</i>, <i>θ</i> − ${Math.abs(oddVal)}π)`;
      }

      leftEl.innerHTML = leftStr;
      rightEl.innerHTML = rightStr;
    }

    function setK(val) {
      document.getElementById('btn-k0').classList.toggle('active', val === 0);
      document.getElementById('btn-k1').classList.toggle('active', val === 1);
      document.getElementById('btn-km1').classList.toggle('active', val === -1);
      updateFormulas(val);
    }

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

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      width: 100%;
      max-width: 440px;
    }

    .rep-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      text-align: center;
    }

    .rep-card.active {
      background: #eff6ff;
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    .coord-title {
      font-weight: 700;
      font-size: 15px;
      color: #0f172a;
    }

    .rep-card.active .coord-title {
      color: #2563eb;
    }

    .coord-cond {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 1px;
    }

    .rep-card.active .coord-cond {
      color: #1d4ed8;
    }

    .chart-container {
      position: relative;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      padding: 4px 8px;
      background: #f1f5f9;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      color: #1e2945;
    }

    .indicator-text {
      color: #2563eb;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="cards-grid">
    <div class="rep-card active" data-step="0">
      <div class="coord-title">(5, 2π/3)</div>
      <div class="coord-cond">r > 0, θ > 0</div>
    </div>
    <div class="rep-card" data-step="1">
      <div class="coord-title">(5, −4π/3)</div>
      <div class="coord-cond">r > 0, θ < 0</div>
    </div>
    <div class="rep-card" data-step="2">
      <div class="coord-title">(−5, 5π/3)</div>
      <div class="coord-cond">r < 0, θ > 0</div>
    </div>
    <div class="rep-card" data-step="3">
      <div class="coord-title">(−5, −π/3)</div>
      <div class="coord-cond">r < 0, θ < 0</div>
    </div>
  </div>

  
  <div class="chart-container">
    <svg viewBox="0 0 340 340">
      <defs>
        
        <marker id="arrow-amber" 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="#d97706" />
        </marker>
        
        <marker id="arrow-ray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#2563eb" />
        </marker>
        
        <marker id="arrow-back" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#7c3aed" />
        </marker>
      </defs>

      
      <g stroke="#e2e8f0" stroke-width="1" fill="none">
        <circle cx="170" cy="170" r="26" />
        <circle cx="170" cy="170" r="52" />
        <circle cx="170" cy="170" r="78" />
        <circle cx="170" cy="170" r="104" />
        <circle cx="170" cy="170" r="130" stroke="#cbd5e1" stroke-width="1.5" />
      </g>

      
      <g stroke="#f1f5f9" stroke-width="1">
        <line x1="170" y1="40" x2="170" y2="300" />
        <line x1="40" y1="170" x2="300" y2="170" />
        <line x1="57" y1="105" x2="283" y2="235" />
        <line x1="105" y1="57" x2="235" y2="283" />
        <line x1="235" y1="57" x2="105" y2="283" />
        <line x1="283" y1="105" x2="57" y2="235" />
      </g>

      
      <line x1="170" y1="170" x2="308" y2="170" stroke="#94a3b8" stroke-width="1.5" />
      <text x="312" y="174" font-size="11" font-weight="700" fill="#64748b">0</text>

      
      <text x="170" y="32" text-anchor="middle" font-size="10" font-weight="600" fill="#94a3b8">π/2</text>
      <text x="30" y="174" text-anchor="end" font-size="10" font-weight="600" fill="#94a3b8">π</text>
      <text x="170" y="316" text-anchor="middle" font-size="10" font-weight="600" fill="#94a3b8">3π/2</text>

      
      <line id="oppRay" x1="170" y1="170" x2="170" y2="170" stroke="#7c3aed" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arrow-back)" opacity="0" />

      
      <line id="mainRay" x1="170" y1="170" x2="170" y2="170" stroke="#2563eb" stroke-width="2.5" marker-end="url(#arrow-ray)" />

      
      <path id="angleArc" d="" fill="none" stroke="#d97706" stroke-width="2.5" marker-end="url(#arrow-amber)" />

      
      <circle cx="170" cy="170" r="3" fill="#64748b" />

      
      
      
      <g transform="translate(105, 57.42)">
        <circle r="9" fill="#2563eb" opacity="0.2">
          <animate attributeName="r" values="7;12;7" dur="2.5s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.3;0.1;0.3" dur="2.5s" repeatCount="indefinite" />
        </circle>
        <circle r="5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5" />
        <text x="-12" y="-8" font-size="13" font-weight="800" fill="#1e3a8a">P</text>
      </g>
    </svg>
  </div>

  
  <div class="status-bar">
    <button class="play-btn" id="playBtn">⏸ Pause</button>
    <div id="motionDesc" class="indicator-text">+120° CCW → Forward 5</div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    // Geometry Data for the 4 representations
    // Point P: r=5 (130px), theta=120° (Quadrant II)
    const CX = 170, CY = 170, R_PX = 130;

    const stepsData = [
      {
        // (5, 2pi/3): rotate +120° CCW, step forward 5
        angleDeg: 120,
        arcStart: 0,
        arcEnd: 120,
        arcRadius: 46,
        ccw: true,
        rVal: 5,
        desc: "+120° CCW → Forward 5"
      },
      {
        // (5, -4pi/3): rotate -240° CW, step forward 5
        angleDeg: 120,
        arcStart: 0,
        arcEnd: -240,
        arcRadius: 36,
        ccw: false,
        rVal: 5,
        desc: "−240° CW → Forward 5"
      },
      {
        // (-5, 5pi/3): rotate +300° CCW to Quad IV ray, step backward 5 through origin
        angleDeg: 300,
        arcStart: 0,
        arcEnd: 300,
        arcRadius: 52,
        ccw: true,
        rVal: -5,
        desc: "+300° CCW → Backward 5"
      },
      {
        // (-5, -pi/3): rotate -60° CW to Quad IV ray, step backward 5 through origin
        angleDeg: 300,
        arcStart: 0,
        arcEnd: -60,
        arcRadius: 42,
        ccw: false,
        rVal: -5,
        desc: "−60° CW → Backward 5"
      }
    ];

    function degToRad(deg) {
      return (deg * Math.PI) / 180;
    }

    function getPoint(cx, cy, r, angleDeg) {
      const rad = degToRad(angleDeg);
      return {
        x: cx + r * Math.cos(rad),
        y: cy - r * Math.sin(rad)
      };
    }

    function createArcPath(cx, cy, r, startDeg, endDeg, ccw) {
      const p1 = getPoint(cx, cy, r, startDeg);
      const p2 = getPoint(cx, cy, r, endDeg);
      
      let delta = endDeg - startDeg;
      if (ccw && delta < 0) delta += 360;
      if (!ccw && delta > 0) delta -= 360;
      
      const largeArc = Math.abs(delta) > 180 ? 1 : 0;
      const sweepFlag = ccw ? 0 : 1; // SVG coordinates: y is flipped, so CCW is sweep-flag 0

      return `M ${p1.x.toFixed(2)} ${p1.y.toFixed(2)} A ${r} ${r} 0 ${largeArc} ${sweepFlag} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
    }

    const cards = $$('.rep-card');
    const mainRay = $('#mainRay');
    const oppRay = $('#oppRay');
    const angleArc = $('#angleArc');
    const motionDesc = $('#motionDesc');
    const playBtn = $('#playBtn');

    function updateDiagram(idx) {
      const data = stepsData[idx];

      // Update card styles
      cards.forEach((c, i) => {
        if (i === idx) c.classList.add('active');
        else c.classList.remove('active');
      });

      // Update text
      motionDesc.textContent = data.desc;

      // Update Arc
      const arcD = createArcPath(CX, CY, data.arcRadius, data.arcStart, data.arcEnd, data.ccw);
      angleArc.setAttribute('d', arcD);

      // Ray target coordinates
      const rayPt = getPoint(CX, CY, R_PX, data.angleDeg);

      if (data.rVal > 0) {
        // Direct ray to point P
        mainRay.setAttribute('x2', rayPt.x);
        mainRay.setAttribute('y2', rayPt.y);
        mainRay.setAttribute('stroke', '#2563eb');
        oppRay.setAttribute('opacity', '0');
      } else {
        // Primary ray points to opposite quadrant (Quad IV)
        mainRay.setAttribute('x2', rayPt.x);
        mainRay.setAttribute('y2', rayPt.y);
        mainRay.setAttribute('stroke', '#94a3b8');

        // Opposing dashed extension backwards to Quad II point P
        const targetPt = getPoint(CX, CY, R_PX, (data.angleDeg + 180) % 360);
        oppRay.setAttribute('x1', CX);
        oppRay.setAttribute('y1', CY);
        oppRay.setAttribute('x2', targetPt.x);
        oppRay.setAttribute('y2', targetPt.y);
        oppRay.setAttribute('opacity', '1');
      }
    }

    // Auto-stepping
    let stepIndex = 0;
    let isPlaying = true;
    let timer = null;

    function nextStep() {
      stepIndex = (stepIndex + 1) % 4;
      updateDiagram(stepIndex);
    }

    function startTimer() {
      timer = setInterval(nextStep, 3200);
      playBtn.textContent = '⏸ Pause';
      isPlaying = true;
    }

    function stopTimer() {
      clearInterval(timer);
      playBtn.textContent = '▶ Play';
      isPlaying = false;
    }

    onTap(playBtn, () => {
      if (isPlaying) stopTimer();
      else startTimer();
    });

    cards.forEach((card, i) => {
      onTap(card, () => {
        stopTimer();
        stepIndex = i;
        updateDiagram(stepIndex);
      });
    });

    // Initialize
    updateDiagram(0);
    startTimer();
  </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="1:1">
  <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;
      justify-content: flex-start;
      padding: 8px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 8px;
    }

    .point-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .point-btn:hover {
      background: #f1f5f9;
    }

    .point-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 1 / 1;
      position: relative;
    }

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

    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
      font-size: 12px;
      color: #475569;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .swatch-line {
      width: 14px;
      height: 2px;
      border-radius: 1px;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="point-btn active" id="btn-0">P(3, π/3)</button>
    <button class="point-btn" id="btn-1">Q(4, 5π/6)</button>
    <button class="point-btn" id="btn-2">R(2, 4π/3)</button>
    <button class="point-btn" id="btn-3">S(3.5, 11π/6)</button>
  </div>

  <div class="svg-container">
    <svg id="polarGrid" viewBox="-230 -230 460 460">
      
      <g id="gridCircles">
        <circle cx="0" cy="0" r="42.5" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3 3"/>
        <circle cx="0" cy="0" r="85" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3 3"/>
        <circle cx="0" cy="0" r="127.5" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3 3"/>
        <circle cx="0" cy="0" r="170" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3 3"/>
      </g>

      
      <g id="gridRays"></g>

      
      <text x="4" y="-45" font-size="10" fill="#94a3b8" font-weight="600">r=1</text>
      <text x="4" y="-87.5" font-size="10" fill="#94a3b8" font-weight="600">r=2</text>
      <text x="4" y="-130" font-size="10" fill="#94a3b8" font-weight="600">r=3</text>
      <text x="4" y="-172.5" font-size="10" fill="#94a3b8" font-weight="600">r=4</text>

      
      <line x1="0" y1="0" x2="190" y2="0" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round"/>
      <polygon points="194,0 186,-4 186,4" fill="#0284c7"/>

      
      <path id="angleArc" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round"/>
      <polygon id="angleArrow" fill="#f97316"/>
      <text id="angleLabel" font-size="13" font-weight="700" fill="#ea580c" text-anchor="middle"></text>

      <line id="radiusLine" x1="0" y1="0" x2="0" y2="0" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round"/>
      <text id="radiusLabel" font-size="13" font-weight="700" fill="#0284c7" text-anchor="middle"></text>

      
      <circle id="pointMarker" cx="0" cy="0" r="5.5" fill="#0284c7" stroke="#ffffff" stroke-width="2"/>
      <text id="pointLabel" font-size="13" font-weight="700" fill="#0f172a"></text>

      
      <circle cx="0" cy="0" r="4.5" fill="#0f172a"/>
      <text x="-8" y="16" font-size="12" font-weight="700" fill="#0f172a">Pole</text>
    </svg>
  </div>

  <div class="legend">
    <div class="legend-item"><span class="swatch" style="background:#0f172a;"></span> Pole (0,0)</div>
    <div class="legend-item"><span class="swatch-line" style="background:#0284c7;"></span> Polar axis (θ = 0)</div>
    <div class="legend-item"><span class="swatch-line" style="background:#cbd5e1; border-top:1px dashed #64748b; height:0;"></span> Radial circles (r)</div>
    <div class="legend-item"><span class="swatch" style="background:#f97316;"></span> Angle (θ)</div>
  </div>

  <script>
    const UNIT = 42.5; // pixels per unit r (4 units = 170px)
    const RAY_LEN = 175;
    const LABEL_R = 198;

    const ANGLES = [
      { deg: 0, rad: "0" },
      { deg: 30, rad: "π/6" },
      { deg: 60, rad: "π/3" },
      { deg: 90, rad: "π/2" },
      { deg: 120, rad: "2π/3" },
      { deg: 150, rad: "5π/6" },
      { deg: 180, rad: "π" },
      { deg: 210, rad: "7π/6" },
      { deg: 240, rad: "4π/3" },
      { deg: 270, rad: "3π/2" },
      { deg: 300, rad: "5π/3" },
      { deg: 330, rad: "11π/6" }
    ];

    const POINTS = [
      { name: "P", r: 3, deg: 60, rad: "π/3" },
      { name: "Q", r: 4, deg: 150, rad: "5π/6" },
      { name: "R", r: 2, deg: 240, rad: "4π/3" },
      { name: "S", r: 3.5, deg: 330, rad: "11π/6" }
    ];

    // Build grid rays and rim labels
    const gridRaysGroup = document.getElementById("gridRays");
    ANGLES.forEach(a => {
      const rad = (a.deg * Math.PI) / 180;
      const xRay = Math.cos(rad) * RAY_LEN;
      const yRay = -Math.sin(rad) * RAY_LEN;
      
      const xLbl = Math.cos(rad) * LABEL_R;
      const yLbl = -Math.sin(rad) * LABEL_R + 4; // slight vertical centering

      // Ray
      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
      line.setAttribute("x1", 0);
      line.setAttribute("y1", 0);
      line.setAttribute("x2", xRay);
      line.setAttribute("y2", yRay);
      line.setAttribute("stroke", "#e2e8f0");
      line.setAttribute("stroke-width", "1");
      gridRaysGroup.appendChild(line);

      // Label
      const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
      text.setAttribute("x", xLbl);
      text.setAttribute("y", yLbl);
      text.setAttribute("font-size", "11");
      text.setAttribute("font-weight", "600");
      text.setAttribute("fill", "#64748b");
      text.setAttribute("text-anchor", "middle");
      text.textContent = a.rad;
      gridRaysGroup.appendChild(text);
    });

    function setPoint(idx) {
      const pt = POINTS[idx];
      const rad = (pt.deg * Math.PI) / 180;
      const px = Math.cos(rad) * pt.r * UNIT;
      const py = -Math.sin(rad) * pt.r * UNIT;

      // Update Point Marker & Label
      const marker = document.getElementById("pointMarker");
      marker.setAttribute("cx", px);
      marker.setAttribute("cy", py);

      const pLabel = document.getElementById("pointLabel");
      const offsetX = px >= 0 ? 10 : -10;
      const offsetY = py <= 0 ? -10 : 16;
      pLabel.setAttribute("x", px + offsetX);
      pLabel.setAttribute("y", py + offsetY);
      pLabel.setAttribute("text-anchor", px >= 0 ? "start" : "end");
      pLabel.textContent = `${pt.name}(${pt.r}, ${pt.rad})`;

      // Update Radius Line & Label
      const rLine = document.getElementById("radiusLine");
      rLine.setAttribute("x2", px);
      rLine.setAttribute("y2", py);

      const rLabel = document.getElementById("radiusLabel");
      const midX = px * 0.55;
      const midY = py * 0.55;
      const normalX = -Math.sin(rad) * 12;
      const normalY = -Math.cos(rad) * 12;
      rLabel.setAttribute("x", midX + normalX);
      rLabel.setAttribute("y", midY + normalY);
      rLabel.textContent = `r = ${pt.r}`;

      // Update Angle Arc
      const arcR = Math.min(36, pt.r * UNIT * 0.45);
      const arcEndX = Math.cos(rad) * arcR;
      const arcEndY = -Math.sin(rad) * arcR;
      const largeArcFlag = pt.deg > 180 ? 1 : 0;
      const arcPath = `M ${arcR} 0 A ${arcR} ${arcR} 0 ${largeArcFlag} 0 ${arcEndX} ${arcEndY}`;
      
      const arcEl = document.getElementById("angleArc");
      arcEl.setAttribute("d", arcPath);

      // Angle Label Position
      const midAngleRad = (rad / 2);
      const lblR = arcR + 15;
      const aLabel = document.getElementById("angleLabel");
      aLabel.setAttribute("x", Math.cos(midAngleRad) * lblR);
      aLabel.setAttribute("y", -Math.sin(midAngleRad) * lblR + 4);
      aLabel.textContent = `θ = ${pt.rad}`;

      // Arrow head at arc end
      const tipAngle = rad + Math.PI / 2;
      const arrowTipX = arcEndX;
      const arrowTipY = arcEndY;
      const p1X = arrowTipX + 5 * Math.cos(tipAngle - 2.5);
      const p1Y = arrowTipY - 5 * Math.sin(tipAngle - 2.5);
      const p2X = arrowTipX + 5 * Math.cos(tipAngle + 2.5);
      const p2Y = arrowTipY - 5 * Math.sin(tipAngle + 2.5);
      document.getElementById("angleArrow").setAttribute(
        "points",
        `${arrowTipX},${arrowTipY} ${p1X},${p1Y} ${p2X},${p2Y}`
      );

      // Button active states
      POINTS.forEach((_, i) => {
        const b = document.getElementById(`btn-${i}`);
        if (b) {
          if (i === idx) b.classList.add("active");
          else b.classList.remove("active");
        }
      });
    }

    // Attach button listeners cleanly
    POINTS.forEach((_, i) => {
      const btn = document.getElementById(`btn-${i}`);
      if (btn) {
        btn.addEventListener("click", () => setPoint(i));
      }
    });

    // Initial render
    setPoint(0);
  </script>
</body>
</html>

OGM.13.GEO.4

Aligned learning resources

Related diagrams