<!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; }
    html, body {
      width: 100%;
      height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      user-select: none;
    }
    .diagram {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px;
      gap: 8px;
    }
    .controls-row {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn-preset {
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 16px;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .btn-preset.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .svg-wrap {
      flex: 1;
      min-height: 220px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .formula-bar {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-family: ui-monospace, monospace;
      font-weight: 600;
    }
    .axis-x { color: #dc2626; }
    .axis-y { color: #16a34a; }
    .axis-z { color: #2563eb; }
    .sliders-panel {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .slider-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .slider-label {
      font-size: 12px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }
    input[type="range"] {
      width: 100%;
      height: 4px;
      accent-color: #2563eb;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="diagram">
    <div class="controls-row">
      <button class="btn-preset active" id="btn-iso" onclick="setPreset('iso')">Isometric (1:1:1)</button>
      <button class="btn-preset" id="btn-dim" onclick="setPreset('dim')">Dimetric (1:1:0.5)</button>
      <button class="btn-preset" id="btn-tri" onclick="setPreset('tri')">Trimetric (1:0.8:0.5)</button>
    </div>

    <div class="svg-wrap">
      <svg id="canvas" viewBox="-180 -140 360 280">
        <defs>
          <marker id="arr-x" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#dc2626" />
          </marker>
          <marker id="arr-y" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#16a34a" />
          </marker>
          <marker id="arr-z" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#2563eb" />
          </marker>
        </defs>

        
        <polygon id="face-top" fill="rgba(37,99,235,0.12)" stroke="none" />
        <polygon id="face-left" fill="rgba(22,163,74,0.12)" stroke="none" />
        <polygon id="face-right" fill="rgba(220,38,38,0.12)" stroke="none" />

        
        <g id="edges-group"></g>

        
        <g id="vertices-group"></g>

        
        <g id="axes-frame" transform="translate(-130, 90)">
          <line id="ax-line-x" x1="0" y1="0" x2="30" y2="15" stroke="#dc2626" stroke-width="2" marker-end="url(#arr-x)"/>
          <line id="ax-line-y" x1="0" y1="0" x2="-30" y2="15" stroke="#16a34a" stroke-width="2" marker-end="url(#arr-y)"/>
          <line id="ax-line-z" x1="0" y1="0" x2="0" y2="-30" stroke="#2563eb" stroke-width="2" marker-end="url(#arr-z)"/>
          <text id="ax-lbl-x" x="34" y="20" font-size="11" font-weight="bold" fill="#dc2626">x</text>
          <text id="ax-lbl-y" x="-38" y="20" font-size="11" font-weight="bold" fill="#16a34a">y</text>
          <text id="ax-lbl-z" x="-4" y="-35" font-size="11" font-weight="bold" fill="#2563eb">z</text>
        </g>
      </svg>
    </div>

    <div class="formula-bar">
      <span>P<sub>2D</sub> = </span>
      <span class="axis-x">x · <span id="val-fx">1.00</span> u<sub>x</sub></span>
      <span>+</span>
      <span class="axis-y">y · <span id="val-fy">1.00</span> u<sub>y</sub></span>
      <span>+</span>
      <span class="axis-z">z · <span id="val-fz">1.00</span> u<sub>z</sub></span>
    </div>

    <div class="sliders-panel">
      <div class="slider-card">
        <div class="slider-label axis-x">
          <span>f<sub>x</sub> (scale)</span>
          <span id="txt-fx">1.00</span>
        </div>
        <input type="range" id="slider-fx" min="0.2" max="1.4" step="0.05" value="1.0" oninput="updateSliders()">
      </div>

      <div class="slider-card">
        <div class="slider-label axis-y">
          <span>f<sub>y</sub> (scale)</span>
          <span id="txt-fy">1.00</span>
        </div>
        <input type="range" id="slider-fy" min="0.2" max="1.4" step="0.05" value="1.0" oninput="updateSliders()">
      </div>

      <div class="slider-card">
        <div class="slider-label axis-z">
          <span>f<sub>z</sub> (scale)</span>
          <span id="txt-fz">1.00</span>
        </div>
        <input type="range" id="slider-fz" min="0.2" max="1.4" step="0.05" value="1.0" oninput="updateSliders()">
      </div>
    </div>
  </div>

  <script>
    const presets = {
      iso: { fx: 1.0, fy: 1.0, fz: 1.0, angX: 30, angY: 150, angZ: 270 },
      dim: { fx: 1.0, fy: 1.0, fz: 0.5, angX: 30, angY: 150, angZ: 270 },
      tri: { fx: 1.0, fy: 0.8, fz: 0.5, angX: 20, angY: 145, angZ: 270 }
    };

    let state = { ...presets.iso };

    const cubeVerts = [
      { x: 0, y: 0, z: 0 }, // 0
      { x: 1, y: 0, z: 0 }, // 1
      { x: 1, y: 1, z: 0 }, // 2
      { x: 0, y: 1, z: 0 }, // 3
      { x: 0, y: 0, z: 1 }, // 4
      { x: 1, y: 0, z: 1 }, // 5
      { x: 1, y: 1, z: 1 }, // 6
      { x: 0, y: 1, z: 1 }  // 7
    ];

    const cubeEdges = [
      // X edges (red)
      { v1: 0, v2: 1, axis: 'x' },
      { v1: 3, v2: 2, axis: 'x' },
      { v1: 7, v2: 6, axis: 'x' },
      { v1: 4, v2: 5, axis: 'x' },
      // Y edges (green)
      { v1: 0, v2: 3, axis: 'y' },
      { v1: 1, v2: 2, axis: 'y' },
      { v1: 5, v2: 6, axis: 'y' },
      { v1: 4, v2: 7, axis: 'y' },
      // Z edges (blue)
      { v1: 0, v2: 4, axis: 'z' },
      { v1: 1, v2: 5, axis: 'z' },
      { v1: 2, v2: 6, axis: 'z' },
      { v1: 3, v2: 7, axis: 'z' }
    ];

    const colors = { x: '#dc2626', y: '#16a34a', z: '#2563eb' };
    const baseLength = 70;

    function projectPoint(p, fx, fy, fz, angX, angY, angZ) {
      const rx = (angX * Math.PI) / 180;
      const ry = (angY * Math.PI) / 180;
      const rz = (angZ * Math.PI) / 180;

      const px = p.x * fx * baseLength * Math.cos(rx) +
                 p.y * fy * baseLength * Math.cos(ry) +
                 p.z * fz * baseLength * Math.cos(rz);

      const py = p.x * fx * baseLength * Math.sin(rx) +
                 p.y * fy * baseLength * Math.sin(ry) +
                 p.z * fz * baseLength * Math.sin(rz);

      // Invert Y for screen coordinate system
      return { x: px, y: -py };
    }

    function render() {
      const { fx, fy, fz, angX, angY, angZ } = state;
      const pts = cubeVerts.map(v => projectPoint(v, fx, fy, fz, angX, angY, angZ));

      // Center offset
      const cx = 0, cy = 10;

      // Update Faces
      const ptsStr = (indices) => indices.map(i => `${pts[i].x + cx},${pts[i].y + cy}`).join(' ');
      document.getElementById('face-top').setAttribute('points', ptsStr([4, 5, 6, 7]));
      document.getElementById('face-left').setAttribute('points', ptsStr([0, 3, 7, 4]));
      document.getElementById('face-right').setAttribute('points', ptsStr([0, 1, 5, 4]));

      // Update Edges
      const edgesGroup = document.getElementById('edges-group');
      edgesGroup.innerHTML = '';
      cubeEdges.forEach(e => {
        const p1 = pts[e.v1];
        const p2 = pts[e.v2];
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', p1.x + cx);
        line.setAttribute('y1', p1.y + cy);
        line.setAttribute('x2', p2.x + cx);
        line.setAttribute('y2', p2.y + cy);
        line.setAttribute('stroke', colors[e.axis]);
        line.setAttribute('stroke-width', '2.5');
        line.setAttribute('stroke-linecap', 'round');
        edgesGroup.appendChild(line);
      });

      // Update Vertices
      const vertGroup = document.getElementById('vertices-group');
      vertGroup.innerHTML = '';
      pts.forEach((p) => {
        const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c.setAttribute('cx', p.x + cx);
        c.setAttribute('cy', p.y + cy);
        c.setAttribute('r', '4');
        c.setAttribute('fill', '#ffffff');
        c.setAttribute('stroke', '#1e2945');
        c.setAttribute('stroke-width', '2');
        vertGroup.appendChild(c);
      });

      // Update Coordinate Axes Frame
      const rx = (angX * Math.PI) / 180;
      const ry = (angY * Math.PI) / 180;
      const rz = (angZ * Math.PI) / 180;
      const axLen = 32;

      const lx = { x: Math.cos(rx) * axLen * fx, y: -Math.sin(rx) * axLen * fx };
      const ly = { x: Math.cos(ry) * axLen * fy, y: -Math.sin(ry) * axLen * fy };
      const lz = { x: Math.cos(rz) * axLen * fz, y: -Math.sin(rz) * axLen * fz };

      document.getElementById('ax-line-x').setAttribute('x2', lx.x);
      document.getElementById('ax-line-x').setAttribute('y2', lx.y);
      document.getElementById('ax-lbl-x').setAttribute('x', lx.x * 1.3 - 3);
      document.getElementById('ax-lbl-x').setAttribute('y', lx.y * 1.3 + 4);

      document.getElementById('ax-line-y').setAttribute('x2', ly.x);
      document.getElementById('ax-line-y').setAttribute('y2', ly.y);
      document.getElementById('ax-lbl-y').setAttribute('x', ly.x * 1.3 - 4);
      document.getElementById('ax-lbl-y').setAttribute('y', ly.y * 1.3 + 4);

      document.getElementById('ax-line-z').setAttribute('x2', lz.x);
      document.getElementById('ax-line-z').setAttribute('y2', lz.y);
      document.getElementById('ax-lbl-z').setAttribute('x', lz.x * 1.3 - 3);
      document.getElementById('ax-lbl-z').setAttribute('y', lz.y * 1.3 - 2);

      // Sync labels
      document.getElementById('val-fx').textContent = fx.toFixed(2);
      document.getElementById('val-fy').textContent = fy.toFixed(2);
      document.getElementById('val-fz').textContent = fz.toFixed(2);
      document.getElementById('txt-fx').textContent = fx.toFixed(2);
      document.getElementById('txt-fy').textContent = fy.toFixed(2);
      document.getElementById('txt-fz').textContent = fz.toFixed(2);
    }

    function setPreset(type) {
      document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
      document.getElementById('btn-' + type).classList.add('active');

      state = { ...presets[type] };
      document.getElementById('slider-fx').value = state.fx;
      document.getElementById('slider-fy').value = state.fy;
      document.getElementById('slider-fz').value = state.fz;
      render();
    }

    function updateSliders() {
      state.fx = parseFloat(document.getElementById('slider-fx').value);
      state.fy = parseFloat(document.getElementById('slider-fy').value);
      state.fz = parseFloat(document.getElementById('slider-fz').value);

      document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
      render();
    }

    render();
  </script>
</body>
</html>

Isometric, Dimetric, and Trimetric Axonometric Projections

<!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;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Controls */
    .btn-group {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    .btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Cards Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 720px;
    }
    @media (max-width: 520px) {
      .grid {
        grid-template-columns: 1fr;
      }
      .panel.dimmed {
        display: none;
      }
    }

    /* Panel Card */
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }
    .panel.active-panel {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2), 0 4px 12px rgba(0,0,0,0.06);
    }
    .panel.dimmed {
      opacity: 0.35;
    }

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

    .meta-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #475569;
      margin-bottom: 6px;
    }
    .meta-badge.iso { background: #e0f2fe; color: #0369a1; }
    .meta-badge.di  { background: #fef3c7; color: #b45309; }
    .meta-badge.tri { background: #fce7f3; color: #be185d; }

    .svg-container {
      width: 100%;
      max-width: 190px;
      aspect-ratio: 1/1;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Legend / Properties */
    .prop-list {
      width: 100%;
      font-size: 11px;
      font-family: ui-monospace, monospace;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: center;
    }
    .prop-row {
      display: flex;
      justify-content: space-between;
      color: #64748b;
    }
    .prop-val {
      font-weight: 600;
      color: #1e2945;
    }

    /* Axis label pills */
    .axis-tag {
      font-size: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  
  <div class="btn-group">
    <button class="btn active" onclick="setMode('all')">All</button>
    <button class="btn" onclick="setMode('iso')">Isometric</button>
    <button class="btn" onclick="setMode('di')">Dimetric</button>
    <button class="btn" onclick="setMode('tri')">Trimetric</button>
  </div>

  
  <div class="grid">

    
    <div class="panel" id="card-iso" onclick="setMode('iso')">
      <div class="title">Isometric</div>
      <div class="meta-badge iso">3 Equal Scales &bull; 3 Equal Angles</div>
      
      <div class="svg-container">
        <svg viewBox="0 0 200 200">
          <defs>
            <marker id="arr-x" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#ea580c" />
            </marker>
            <marker id="arr-y" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#16a34a" />
            </marker>
            <marker id="arr-z" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#2563eb" />
            </marker>
          </defs>

          
          
          <polygon points="100,105 52,133 52,78 100,50" fill="#ea580c" fill-opacity="0.12" stroke="#ea580c" stroke-width="1.5" />
          
          <polygon points="100,105 100,50 148,78 148,133" fill="#16a34a" fill-opacity="0.12" stroke="#16a34a" stroke-width="1.5" />
          
          <polygon points="100,105 148,133 100,161 52,133" fill="#2563eb" fill-opacity="0.08" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

          
          
          <path d="M 100,85 A 20,20 0 0,0 83,115" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="75" y="93" font-size="9" fill="#475569" font-weight="600">120°</text>

          
          <path d="M 117,115 A 20,20 0 0,0 100,85" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="110" y="93" font-size="9" fill="#475569" font-weight="600">120°</text>

          
          <path d="M 83,115 A 20,20 0 0,0 117,115" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="94" y="128" font-size="9" fill="#475569" font-weight="600">120°</text>

          
          <line x1="100" y1="105" x2="38" y2="141" stroke="#ea580c" stroke-width="2" marker-end="url(#arr-x)" />
          <line x1="100" y1="105" x2="162" y2="141" stroke="#16a34a" stroke-width="2" marker-end="url(#arr-y)" />
          <line x1="100" y1="105" x2="100" y2="35" stroke="#2563eb" stroke-width="2" marker-end="url(#arr-z)" />

          
          <text x="30" y="148" fill="#ea580c" font-size="12" font-weight="bold">x</text>
          <text x="166" y="148" fill="#16a34a" font-size="12" font-weight="bold">y</text>
          <text x="96" y="28" fill="#2563eb" font-size="12" font-weight="bold">z</text>
        </svg>
      </div>

      <div class="prop-list">
        <div class="prop-row"><span>Scales</span><span class="prop-val">s<sub>x</sub> = s<sub>y</sub> = s<sub>z</sub> = 0.82</span></div>
        <div class="prop-row"><span>Angles</span><span class="prop-val">120°, 120°, 120°</span></div>
      </div>
    </div>

    
    <div class="panel" id="card-di" onclick="setMode('di')">
      <div class="title">Dimetric</div>
      <div class="meta-badge di">2 Equal Scales &bull; 2 Equal Angles</div>
      
      <div class="svg-container">
        <svg viewBox="0 0 200 200">
          
          
          <polygon points="100,105 46,119 46,63 100,49" fill="#ea580c" fill-opacity="0.12" stroke="#ea580c" stroke-width="1.5" />
          <polygon points="100,105 100,49 127,56 127,112" fill="#16a34a" fill-opacity="0.12" stroke="#16a34a" stroke-width="1.5" />
          <polygon points="100,105 127,112 73,126 46,119" fill="#2563eb" fill-opacity="0.08" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

          
          
          <path d="M 100,85 A 20,20 0 0,0 81,110" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="73" y="93" font-size="9" fill="#475569" font-weight="600">105°</text>

          
          <path d="M 119,110 A 20,20 0 0,0 100,85" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="111" y="93" font-size="9" fill="#475569" font-weight="600">105°</text>

          
          <path d="M 81,110 A 20,20 0 0,0 119,110" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="94" y="128" font-size="9" fill="#475569" font-weight="600">150°</text>

          
          <line x1="100" y1="105" x2="32" y2="123" stroke="#ea580c" stroke-width="2" marker-end="url(#arr-x)" />
          <line x1="100" y1="105" x2="148" y2="117" stroke="#16a34a" stroke-width="2" marker-end="url(#arr-y)" />
          <line x1="100" y1="105" x2="100" y2="35" stroke="#2563eb" stroke-width="2" marker-end="url(#arr-z)" />

          
          <text x="24" y="128" fill="#ea580c" font-size="12" font-weight="bold">x</text>
          <text x="154" y="122" fill="#16a34a" font-size="12" font-weight="bold">y</text>
          <text x="96" y="28" fill="#2563eb" font-size="12" font-weight="bold">z</text>
        </svg>
      </div>

      <div class="prop-list">
        <div class="prop-row"><span>Scales</span><span class="prop-val">s<sub>x</sub> = s<sub>z</sub> = 0.94, s<sub>y</sub> = 0.47</span></div>
        <div class="prop-row"><span>Angles</span><span class="prop-val">105°, 105°, 150°</span></div>
      </div>
    </div>

    
    <div class="panel" id="card-tri" onclick="setMode('tri')">
      <div class="title">Trimetric</div>
      <div class="meta-badge tri">3 Distinct Scales &bull; 3 Distinct Angles</div>
      
      <div class="svg-container">
        <svg viewBox="0 0 200 200">
          
          
          <polygon points="100,100 63,113 63,58 100,45" fill="#ea580c" fill-opacity="0.12" stroke="#ea580c" stroke-width="1.5" />
          <polygon points="100,100 100,45 142,80 142,135" fill="#16a34a" fill-opacity="0.12" stroke="#16a34a" stroke-width="1.5" />
          <polygon points="100,100 142,135 105,148 63,113" fill="#2563eb" fill-opacity="0.08" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

          
          
          <path d="M 100,80 A 20,20 0 0,0 81,107" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="73" y="89" font-size="9" fill="#475569" font-weight="600">110°</text>

          
          <path d="M 115,113 A 20,20 0 0,0 100,80" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="112" y="91" font-size="9" fill="#475569" font-weight="600">130°</text>

          
          <path d="M 81,107 A 20,20 0 0,0 115,113" fill="none" stroke="#64748b" stroke-width="1.2" />
          <text x="92" y="125" font-size="9" fill="#475569" font-weight="600">120°</text>

          
          <line x1="100" y1="100" x2="48" y2="119" stroke="#ea580c" stroke-width="2" marker-end="url(#arr-x)" />
          <line x1="100" y1="100" x2="158" y2="148" stroke="#16a34a" stroke-width="2" marker-end="url(#arr-y)" />
          <line x1="100" y1="100" x2="100" y2="30" stroke="#2563eb" stroke-width="2" marker-end="url(#arr-z)" />

          
          <text x="39" y="125" fill="#ea580c" font-size="12" font-weight="bold">x</text>
          <text x="164" y="156" fill="#16a34a" font-size="12" font-weight="bold">y</text>
          <text x="96" y="24" fill="#2563eb" font-size="12" font-weight="bold">z</text>
        </svg>
      </div>

      <div class="prop-list">
        <div class="prop-row"><span>Scales</span><span class="prop-val">s<sub>x</sub>=0.65, s<sub>y</sub>=0.86, s<sub>z</sub>=0.92</span></div>
        <div class="prop-row"><span>Angles</span><span class="prop-val">110°, 120°, 130°</span></div>
      </div>
    </div>

  </div>

  <script>
    function setMode(mode) {
      const buttons = document.querySelectorAll('.btn');
      buttons.forEach(btn => {
        const text = btn.textContent.toLowerCase();
        if (mode === 'all' && text === 'all') btn.classList.add('active');
        else if (mode === 'iso' && text.includes('iso')) btn.classList.add('active');
        else if (mode === 'di' && text.includes('di')) btn.classList.add('active');
        else if (mode === 'tri' && text.includes('tri')) btn.classList.add('active');
        else btn.classList.remove('active');
      });

      const panels = {
        iso: document.getElementById('card-iso'),
        di: document.getElementById('card-di'),
        tri: document.getElementById('card-tri')
      };

      Object.keys(panels).forEach(key => {
        const p = panels[key];
        p.classList.remove('active-panel', 'dimmed');
        if (mode !== 'all') {
          if (key === mode) {
            p.classList.add('active-panel');
          } else {
            p.classList.add('dimmed');
          }
        }
      });
    }
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn.active {
      background: #eff6ff;
      color: #2563eb;
      border-color: #93c5fd;
      box-shadow: 0 0 0 1px #93c5fd;
    }
    .play-btn {
      width: 32px;
      height: 32px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }
    .play-btn:hover { background: #f1f5f9; }

    /* Canvas / Viewport Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 320px;
      overflow: hidden;
    }
    .panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .panel.active {
      opacity: 1;
      pointer-events: auto;
    }

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

    /* Math Transformation Cards in Step 2 */
    .transform-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 90%;
      max-width: 380px;
    }
    .math-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #f8fafc;
      border-radius: 10px;
      border-left: 4px solid #94a3b8;
      font-size: 15px;
      font-weight: 500;
    }
    .math-row.x-axis { border-left-color: #3b82f6; background: #eff6ff; }
    .math-row.y-axis { border-left-color: #10b981; background: #ecfdf5; }
    .math-row.z-axis { border-left-color: #8b5cf6; background: #f5f3ff; }
    .tag {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }
    .tag-x { background: #dbeafe; color: #1d4ed8; }
    .tag-y { background: #d1fae5; color: #047857; }
    .tag-z { background: #ede9fe; color: #6d28d9; }
    .calc { font-family: ui-monospace, monospace; font-size: 14px; }
    .result { font-weight: 700; color: #0f172a; }

    /* Indicator dots */
    .dots {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s;
    }
    .dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1. True (3D)</button>
    <button class="step-btn" data-step="1">2. Scale</button>
    <button class="step-btn" data-step="2">3. Dimetric</button>
    <button class="play-btn" id="playToggle" title="Auto-play">⏸</button>
  </div>

  
  <div class="stage">

    
    <div class="panel active" id="panel-0">
      <svg viewBox="0 0 500 320">
        
        <g stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3">
          <line x1="240" y1="210" x2="90" y2="280" /> 
          <line x1="240" y1="210" x2="240" y2="40" />  
          <line x1="240" y1="210" x2="410" y2="280" /> 
        </g>
        <text x="80" y="285" fill="#3b82f6" font-size="13" font-weight="700">X</text>
        <text x="240" y="30" fill="#10b981" font-size="13" font-weight="700" text-anchor="middle">Y</text>
        <text x="420" y="285" fill="#8b5cf6" font-size="13" font-weight="700">Z</text>

        
        
        <g stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3" fill="none">
          <path d="M 240,210 L 240,70 M 240,210 L 150,250 M 240,210 L 330,250" />
        </g>

        
        
        <polygon points="240,70 150,110 240,150 330,110" fill="#e0f2fe" stroke="#0284c7" stroke-width="2" />
        
        <polygon points="150,110 240,150 240,290 150,250" fill="#bae6fd" stroke="#0284c7" stroke-width="2" />
        
        <polygon points="240,150 330,110 330,250 240,290" fill="#7dd3fc" stroke="#0284c7" stroke-width="2" />

        
        
        <g transform="translate(-14, 10)">
          <line x1="140" y1="260" x2="230" y2="300" stroke="#3b82f6" stroke-width="1.5" />
          <line x1="140" y1="254" x2="140" y2="266" stroke="#3b82f6" stroke-width="1.5" />
          <line x1="230" y1="294" x2="230" y2="306" stroke="#3b82f6" stroke-width="1.5" />
          <rect x="160" y="270" width="50" height="20" rx="4" fill="#ffffff" stroke="#3b82f6" stroke-width="1"/>
          <text x="185" y="284" fill="#1d4ed8" font-size="12" font-weight="700" text-anchor="middle">4 cm</text>
        </g>

        
        <g transform="translate(105, 0)">
          <line x1="240" y1="110" x2="240" y2="250" stroke="#10b981" stroke-width="1.5" />
          <line x1="234" y1="110" x2="246" y2="110" stroke="#10b981" stroke-width="1.5" />
          <line x1="234" y1="250" x2="246" y2="250" stroke="#10b981" stroke-width="1.5" />
          <rect x="215" y="170" width="50" height="20" rx="4" fill="#ffffff" stroke="#10b981" stroke-width="1"/>
          <text x="240" y="184" fill="#047857" font-size="12" font-weight="700" text-anchor="middle">6 cm</text>
        </g>

        
        <g transform="translate(14, 10)">
          <line x1="250" y1="300" x2="340" y2="260" stroke="#8b5cf6" stroke-width="1.5" />
          <line x1="250" y1="294" x2="250" y2="306" stroke="#8b5cf6" stroke-width="1.5" />
          <line x1="340" y1="254" x2="340" y2="266" stroke="#8b5cf6" stroke-width="1.5" />
          <rect x="270" y="270" width="50" height="20" rx="4" fill="#ffffff" stroke="#8b5cf6" stroke-width="1"/>
          <text x="295" y="284" fill="#6d28d9" font-size="12" font-weight="700" text-anchor="middle">2 cm</text>
        </g>
      </svg>
    </div>

    
    <div class="panel" id="panel-1">
      <div class="transform-grid">
        <div class="math-row x-axis">
          <span class="tag tag-x">Width (X)</span>
          <span class="calc">4 cm × 0.866 =</span>
          <span class="result">3.46 cm</span>
        </div>
        <div class="math-row y-axis">
          <span class="tag tag-y">Height (Y)</span>
          <span class="calc">6 cm × 0.707 =</span>
          <span class="result">4.24 cm</span>
        </div>
        <div class="math-row z-axis">
          <span class="tag tag-z">Depth (Z)</span>
          <span class="calc">2 cm × 0.866 =</span>
          <span class="result">1.73 cm</span>
        </div>
      </div>
    </div>

    
    <div class="panel" id="panel-2">
      <svg viewBox="0 0 500 320">
        
        <g stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2">
          <line x1="240" y1="260" x2="130" y2="260" />
          <line x1="240" y1="260" x2="330" y2="260" />
        </g>
        <text x="180" y="254" fill="#94a3b8" font-size="11">7°</text>
        <text x="285" y="248" fill="#94a3b8" font-size="11">42°</text>

        
        
        <polygon points="240,135 158,155 220,185 302,165" fill="#f0f9ff" stroke="#0284c7" stroke-width="2" />
        
        <polygon points="158,155 220,185 220,290 158,260" fill="#bae6fd" stroke="#0284c7" stroke-width="2" />
        
        <polygon points="220,185 302,165 302,270 220,290" fill="#38bdf8" stroke="#0284c7" stroke-width="2" />

        
        <g transform="translate(-16, 12)">
          <line x1="150" y1="266" x2="212" y2="296" stroke="#2563eb" stroke-width="1.5" />
          <line x1="150" y1="260" x2="150" y2="272" stroke="#2563eb" stroke-width="1.5" />
          <line x1="212" y1="290" x2="212" y2="302" stroke="#2563eb" stroke-width="1.5" />
          <rect x="145" y="278" width="68" height="20" rx="4" fill="#ffffff" stroke="#2563eb" stroke-width="1"/>
          <text x="179" y="292" fill="#1d4ed8" font-size="12" font-weight="700" text-anchor="middle">3.46 cm</text>
        </g>

        
        <g transform="translate(10, 0)">
          <line x1="140" y1="155" x2="140" y2="260" stroke="#059669" stroke-width="1.5" />
          <line x1="134" y1="155" x2="146" y2="155" stroke="#059669" stroke-width="1.5" />
          <line x1="134" y1="260" x2="146" y2="260" stroke="#059669" stroke-width="1.5" />
          <rect x="106" y="198" width="68" height="20" rx="4" fill="#ffffff" stroke="#059669" stroke-width="1"/>
          <text x="140" y="212" fill="#047857" font-size="12" font-weight="700" text-anchor="middle">4.24 cm</text>
        </g>

        
        <g transform="translate(16, 12)">
          <line x1="228" y1="296" x2="310" y2="276" stroke="#7c3aed" stroke-width="1.5" />
          <line x1="228" y1="290" x2="228" y2="302" stroke="#7c3aed" stroke-width="1.5" />
          <line x1="310" y1="270" x2="310" y2="282" stroke="#7c3aed" stroke-width="1.5" />
          <rect x="235" y="280" width="68" height="20" rx="4" fill="#ffffff" stroke="#7c3aed" stroke-width="1"/>
          <text x="269" y="294" fill="#6d28d9" font-size="12" font-weight="700" text-anchor="middle">1.73 cm</text>
        </g>
      </svg>
    </div>

  </div>

  
  <div class="dots">
    <div class="dot active" data-step="0"></div>
    <div class="dot" data-step="1"></div>
    <div class="dot" data-step="2"></div>
  </div>

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

    const stepBtns = document.querySelectorAll('.step-btn');
    const dots = document.querySelectorAll('.dot');
    const panels = document.querySelectorAll('.panel');
    const playToggle = document.getElementById('playToggle');

    function setStep(index) {
      currentStep = index;
      panels.forEach((p, i) => p.classList.toggle('active', i === index));
      stepBtns.forEach((b, i) => b.classList.toggle('active', i === index));
      dots.forEach((d, i) => d.classList.toggle('active', i === index));
    }

    function nextStep() {
      setStep((currentStep + 1) % totalSteps);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playToggle.textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playToggle.textContent = '▶';
    }

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(parseInt(dot.getAttribute('data-step'), 10));
      });
    });

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    startAutoPlay();
  </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>Axonometric Projections</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
    }
    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 380px;
      max-height: 600px;
      display: flex;
      flex-direction: column;
    }
    #viewport {
      flex: 1;
      width: 100%;
      height: 100%;
      position: relative;
      touch-action: none;
      cursor: grab;
    }
    #viewport:active {
      cursor: grabbing;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .controls {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px;
      border-radius: 24px;
      box-shadow: 0 2px 10px rgba(30, 41, 69, 0.08);
      z-index: 10;
      border: 1px solid rgba(226, 232, 240, 0.8);
      max-width: calc(100% - 24px);
    }
    .btn-pill {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 18px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      white-space: nowrap;
    }
    .btn-pill:hover {
      color: #1e2945;
      background: rgba(0, 0, 0, 0.03);
    }
    .btn-pill.active {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
    }

    .badge-bar {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 6px 16px;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(30, 41, 69, 0.08);
      font-size: 13px;
      font-weight: 700;
      z-index: 10;
      border: 1px solid rgba(226, 232, 240, 0.8);
      white-space: nowrap;
    }
    .val-x { color: #dc2626; }
    .val-y { color: #16a34a; }
    .val-z { color: #2563eb; }

    .hint {
      position: absolute;
      bottom: 12px;
      right: 14px;
      font-size: 11px;
      color: #94a3b8;
      pointer-events: none;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.8);
      padding: 3px 8px;
      border-radius: 10px;
    }

    @media (max-width: 480px) {
      .btn-pill {
        padding: 5px 10px;
        font-size: 11px;
      }
      .badge-bar {
        font-size: 11px;
        gap: 8px;
        padding: 5px 12px;
      }
      .hint {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="controls">
      <button class="btn-pill active" id="btn-iso">Isometric</button>
      <button class="btn-pill" id="btn-dim">Dimetric</button>
      <button class="btn-pill" id="btn-tri">Trimetric</button>
    </div>

    <div id="viewport">
      <canvas id="c"></canvas>
    </div>

    <div class="badge-bar">
      <span class="val-x" id="lbl-sx">s_x: 0.82</span>
      <span class="val-y" id="lbl-sy">s_y: 0.82</span>
      <span class="val-z" id="lbl-sz">s_z: 0.82</span>
    </div>

    <div class="hint">Drag to rotate 3D view</div>
  </div>

  <script>
    // 3D Vector Math Helpers
    class Vec3 {
      constructor(x = 0, y = 0, z = 0) {
        this.x = x; this.y = y; this.z = z;
      }
      clone() { return new Vec3(this.x, this.y, this.z); }
      set(x, y, z) { this.x = x; this.y = y; this.z = z; return this; }
      add(v) { return new Vec3(this.x + v.x, this.y + v.y, this.z + v.z); }
      sub(v) { return new Vec3(this.x - v.x, this.y - v.y, this.z - v.z); }
      scale(s) { return new Vec3(this.x * s, this.y * s, this.z * s); }
      dot(v) { return this.x * v.x + this.y * v.y + this.z * v.z; }
      length() { return Math.hypot(this.x, this.y, this.z); }
      normalize() {
        const l = this.length();
        return l > 1e-6 ? this.scale(1 / l) : new Vec3(0, 0, 0);
      }
      cross(v) {
        return new Vec3(
          this.y * v.z - this.z * v.y,
          this.z * v.x - this.x * v.z,
          this.x * v.y - this.y * v.x
        );
      }
    }

    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    const container = document.getElementById('viewport');

    // Preset normal orientations for Axonometric modes
    const PRESETS = {
      iso: new Vec3(1, 1, 1).normalize(),
      dim: new Vec3(1, 1, 0.42).normalize(),
      tri: new Vec3(1, 0.65, 0.35).normalize()
    };

    let targetNormal = PRESETS.iso.clone();
    let currentNormal = PRESETS.iso.clone();

    // 3D View and Camera Orbit
    let spherical = { theta: 0.92, phi: 1.12, radius: 7.2 };
    let isDragging = false;
    let prevPointer = { x: 0, y: 0 };

    const L = 1.9; // Unit axis vector length in 3D units

    function project3DtoScreen(point, width, height) {
      // Camera position from spherical coords
      const cx = spherical.radius * Math.sin(spherical.phi) * Math.sin(spherical.theta);
      const cy = spherical.radius * Math.cos(spherical.phi);
      const cz = spherical.radius * Math.sin(spherical.phi) * Math.cos(spherical.theta);
      const eye = new Vec3(cx, cy, cz);

      // Camera view matrix basis
      const forward = eye.scale(-1).normalize();
      const worldUp = new Vec3(0, 1, 0);
      let right = forward.cross(worldUp).normalize();
      if (right.length() < 0.001) right = new Vec3(1, 0, 0);
      const up = right.cross(forward).normalize();

      // Transform to Camera Coordinates
      const rel = point.sub(eye);
      const camX = rel.dot(right);
      const camY = rel.dot(up);
      const camZ = -rel.dot(forward);

      // Perspective projection
      const fov = 480;
      const minDim = Math.min(width, height);
      const scaleFactor = (minDim / 440) * fov;
      const factor = scaleFactor / Math.max(0.1, camZ);

      return {
        x: width / 2 + camX * factor,
        y: height / 2 - camY * factor,
        z: camZ,
        camZ: camZ
      };
    }

    // Geometry Generation
    function computeProjectionData(normal) {
      const n = normal.normalize();

      // 3D Axes tip positions
      const vX = new Vec3(L, 0, 0);
      const vY = new Vec3(0, L, 0);
      const vZ = new Vec3(0, 0, L);
      const origin = new Vec3(0, 0, 0);

      // Projection: P_proj = V - (V · n) * n
      function projectOnPlane(v) {
        return v.sub(n.scale(v.dot(n)));
      }

      const pX = projectOnPlane(vX);
      const pY = projectOnPlane(vY);
      const pZ = projectOnPlane(vZ);

      // Scale factors s_i = |proj| / L = sqrt(1 - (e_i . n)^2)
      const sx = pX.length() / L;
      const sy = pY.length() / L;
      const sz = pZ.length() / L;

      // Picture Plane Quad
      let u = new Vec3(0, 1, 0).cross(n);
      if (u.length() < 0.001) u = new Vec3(1, 0, 0).cross(n);
      u = u.normalize();
      const v = n.cross(u).normalize();

      const planeSize = 2.1;
      const planeCorners = [
        u.scale(-planeSize).add(v.scale(-planeSize)),
        u.scale(planeSize).add(v.scale(-planeSize)),
        u.scale(planeSize).add(v.scale(planeSize)),
        u.scale(-planeSize).add(v.scale(planeSize))
      ];

      return {
        n, origin,
        vX, vY, vZ,
        pX, pY, pZ,
        sx, sy, sz,
        planeCorners
      };
    }

    function drawArrowHead(ctx, from, to, color, size = 11) {
      const dx = to.x - from.x;
      const dy = to.y - from.y;
      const angle = Math.atan2(dy, dx);
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(to.x, to.y);
      ctx.lineTo(to.x - size * Math.cos(angle - Math.PI / 6), to.y - size * Math.sin(angle - Math.PI / 6));
      ctx.lineTo(to.x - size * Math.cos(angle + Math.PI / 6), to.y - size * Math.sin(angle + Math.PI / 6));
      ctx.closePath();
      ctx.fill();
    }

    function drawDashedLine(ctx, p1, p2, color, dash = [5, 4]) {
      ctx.save();
      ctx.strokeStyle = color;
      ctx.lineWidth = 1.8;
      ctx.setLineDash(dash);
      ctx.beginPath();
      ctx.moveTo(p1.x, p1.y);
      ctx.lineTo(p2.x, p2.y);
      ctx.stroke();
      ctx.restore();
    }

    function renderLabel(ctx, text, screenPos, color, font = 'bold 13px system-ui', offset = {x: 0, y: 0}) {
      const x = screenPos.x + offset.x;
      const y = screenPos.y + offset.y;
      ctx.font = font;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // Text glow/halo
      ctx.lineWidth = 4;
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
      ctx.strokeText(text, x, y);

      ctx.fillStyle = color;
      ctx.fillText(text, x, y);
    }

    function render() {
      const w = container.clientWidth;
      const h = container.clientHeight;
      const dpr = Math.min(window.devicePixelRatio || 1, 2);

      if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
        canvas.width = Math.round(w * dpr);
        canvas.height = Math.round(h * dpr);
      }

      ctx.save();
      ctx.scale(dpr, dpr);
      ctx.clearRect(0, 0, w, h);

      // Normal interpolation for smooth mode transitions
      const diff = currentNormal.sub(targetNormal);
      if (diff.length() > 0.001) {
        currentNormal = currentNormal.add(targetNormal.sub(currentNormal).scale(0.12)).normalize();
      } else {
        currentNormal = targetNormal.clone();
      }

      const data = computeProjectionData(currentNormal);

      // Update badge readouts
      document.getElementById('lbl-sx').textContent = `s_x: ${data.sx.toFixed(2)}`;
      document.getElementById('lbl-sy').textContent = `s_y: ${data.sy.toFixed(2)}`;
      document.getElementById('lbl-sz').textContent = `s_z: ${data.sz.toFixed(2)}`;

      // Projected 2D points
      const orig2d = project3DtoScreen(data.origin, w, h);
      const vX2d = project3DtoScreen(data.vX, w, h);
      const vY2d = project3DtoScreen(data.vY, w, h);
      const vZ2d = project3DtoScreen(data.vZ, w, h);
      const pX2d = project3DtoScreen(data.pX, w, h);
      const pY2d = project3DtoScreen(data.pY, w, h);
      const pZ2d = project3DtoScreen(data.pZ, w, h);
      const corners2d = data.planeCorners.map(pt => project3DtoScreen(pt, w, h));

      // 1. Draw Picture Plane (Translucent sheet with glowing border)
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(corners2d[0].x, corners2d[0].y);
      for (let i = 1; i < corners2d.length; i++) {
        ctx.lineTo(corners2d[i].x, corners2d[i].y);
      }
      ctx.closePath();

      // Plane Fill
      const grad = ctx.createLinearGradient(corners2d[0].x, corners2d[0].y, corners2d[2].x, corners2d[2].y);
      grad.addColorStop(0, 'rgba(186, 230, 253, 0.45)');
      grad.addColorStop(1, 'rgba(147, 197, 253, 0.28)');
      ctx.fillStyle = grad;
      ctx.fill();

      // Plane Border
      ctx.strokeStyle = '#3b82f6';
      ctx.lineWidth = 1.8;
      ctx.stroke();

      // Picture Plane Grid / cross accent inside plane
      const mid1 = project3DtoScreen(data.planeCorners[0].add(data.planeCorners[1]).scale(0.5), w, h);
      const mid2 = project3DtoScreen(data.planeCorners[2].add(data.planeCorners[3]).scale(0.5), w, h);
      const mid3 = project3DtoScreen(data.planeCorners[1].add(data.planeCorners[2]).scale(0.5), w, h);
      const mid4 = project3DtoScreen(data.planeCorners[3].add(data.planeCorners[0]).scale(0.5), w, h);

      ctx.strokeStyle = 'rgba(59, 130, 246, 0.15)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(mid1.x, mid1.y); ctx.lineTo(mid2.x, mid2.y);
      ctx.moveTo(mid3.x, mid3.y); ctx.lineTo(mid4.x, mid4.y);
      ctx.stroke();

      ctx.restore();

      // Picture Plane Tag
      const planeLabelPos = project3DtoScreen(data.planeCorners[2].scale(0.85), w, h);
      renderLabel(ctx, "Picture Plane (Π)", planeLabelPos, '#1e40af', '600 11px system-ui', { x: 0, y: -10 });

      // 2. Draw Projection Rays (Dashed lines from 3D unit vector tips to plane projection)
      drawDashedLine(ctx, vX2d, pX2d, 'rgba(220, 38, 38, 0.7)');
      drawDashedLine(ctx, vY2d, pY2d, 'rgba(22, 163, 74, 0.7)');
      drawDashedLine(ctx, vZ2d, pZ2d, 'rgba(37, 99, 235, 0.7)');

      // Draw right-angle indicator symbols at projection drops
      [
        { from: data.vX, to: data.pX, col: '#dc2626' },
        { from: data.vY, to: data.pY, col: '#16a34a' },
        { from: data.vZ, to: data.pZ, col: '#2563eb' }
      ].forEach(ray => {
        const diffVec = ray.to.sub(data.origin);
        if (diffVec.length() > 0.3) {
          const uProj = diffVec.normalize().scale(0.12);
          const uRay = ray.from.sub(ray.to).normalize().scale(0.12);
          const c1 = ray.to.add(uRay);
          const c2 = ray.to.add(uRay).add(uProj);
          const c3 = ray.to.add(uProj);

          const s1 = project3DtoScreen(c1, w, h);
          const s2 = project3DtoScreen(c2, w, h);
          const s3 = project3DtoScreen(c3, w, h);

          ctx.strokeStyle = 'rgba(100, 116, 139, 0.55)';
          ctx.lineWidth = 1.2;
          ctx.beginPath();
          ctx.moveTo(s1.x, s1.y);
          ctx.lineTo(s2.x, s2.y);
          ctx.lineTo(s3.x, s3.y);
          ctx.stroke();
        }
      });

      // 3. Draw Projected Foreshortened Vectors (Solid on picture plane)
      function drawProjectedAxis(pEnd, color, labelText) {
        ctx.strokeStyle = color;
        ctx.lineWidth = 3.5;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(orig2d.x, orig2d.y);
        ctx.lineTo(pEnd.x, pEnd.y);
        ctx.stroke();
        drawArrowHead(ctx, orig2d, pEnd, color, 9);
      }

      drawProjectedAxis(pX2d, '#dc2626', 's_x');
      drawProjectedAxis(pY2d, '#16a34a', 's_y');
      drawProjectedAxis(pZ2d, '#2563eb', 's_z');

      // 4. Draw 3D Original Axes (Thick solid with large arrowheads)
      function draw3DAxis(end2d, color, labelText) {
        // Shadow/glow
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(orig2d.x, orig2d.y);
        ctx.lineTo(end2d.x, end2d.y);
        ctx.stroke();

        ctx.strokeStyle = color;
        ctx.lineWidth = 2.8;
        ctx.beginPath();
        ctx.moveTo(orig2d.x, orig2d.y);
        ctx.lineTo(end2d.x, end2d.y);
        ctx.stroke();

        drawArrowHead(ctx, orig2d, end2d, color, 12);
      }

      draw3DAxis(vX2d, '#dc2626', 'X');
      draw3DAxis(vY2d, '#16a34a', 'Y');
      draw3DAxis(vZ2d, '#2563eb', 'Z');

      // Coordinate Origin point
      ctx.fillStyle = '#1e2945';
      ctx.beginPath();
      ctx.arc(orig2d.x, orig2d.y, 4, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1.5;
      ctx.stroke();
      renderLabel(ctx, "O", orig2d, '#64748b', '700 11px system-ui', { x: -9, y: 9 });

      // 5. Draw Labels for 3D axes and projected axes
      renderLabel(ctx, "X (1,0,0)", vX2d, '#dc2626', 'bold 13px system-ui', { x: 18, y: -8 });
      renderLabel(ctx, "Y (0,1,0)", vY2d, '#16a34a', 'bold 13px system-ui', { x: 0, y: -16 });
      renderLabel(ctx, "Z (0,0,1)", vZ2d, '#2563eb', 'bold 13px system-ui', { x: -18, y: 12 });

      // Projected labels along midpoint of projected vectors
      const midPX = { x: (orig2d.x + pX2d.x) / 2, y: (orig2d.y + pX2d.y) / 2 };
      const midPY = { x: (orig2d.x + pY2d.x) / 2, y: (orig2d.y + pY2d.y) / 2 };
      const midPZ = { x: (orig2d.x + pZ2d.x) / 2, y: (orig2d.y + pZ2d.y) / 2 };

      renderLabel(ctx, "s_x", midPX, '#b91c1c', 'bold 12px system-ui', { x: 10, y: 10 });
      renderLabel(ctx, "s_y", midPY, '#15803d', 'bold 12px system-ui', { x: -14, y: -4 });
      renderLabel(ctx, "s_z", midPZ, '#1d4ed8', 'bold 12px system-ui', { x: 12, y: -10 });

      ctx.restore();

      requestAnimationFrame(render);
    }

    // Interaction Handlers (Mouse & Touch Drag)
    function onPointerDown(e) {
      isDragging = true;
      prevPointer = { x: e.clientX, y: e.clientY };
    }

    function onPointerMove(e) {
      if (!isDragging) return;
      const dx = e.clientX - prevPointer.x;
      const dy = e.clientY - prevPointer.y;
      prevPointer = { x: e.clientX, y: e.clientY };

      spherical.theta -= dx * 0.009;
      spherical.phi = Math.max(0.15, Math.min(Math.PI - 0.15, spherical.phi - dy * 0.009));
    }

    function onPointerUp() {
      isDragging = false;
    }

    container.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);
    window.addEventListener('pointercancel', onPointerUp);

    // Button Click Controls
    const buttons = {
      iso: document.getElementById('btn-iso'),
      dim: document.getElementById('btn-dim'),
      tri: document.getElementById('btn-tri')
    };

    function setActiveMode(mode) {
      Object.values(buttons).forEach(b => b.classList.remove('active'));
      buttons[mode].classList.add('active');
      targetNormal = PRESETS[mode].clone();
    }

    buttons.iso.addEventListener('click', () => setActiveMode('iso'));
    buttons.dim.addEventListener('click', () => setActiveMode('dim'));
    buttons.tri.addEventListener('click', () => setActiveMode('tri'));

    // Start render loop
    requestAnimationFrame(render);
  </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>Foreshortening Factor Derivation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .header-presets {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 540px;
    }

    .btn-preset {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-preset:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn-preset.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0369a1;
    }

    .svg-container {
      width: 100%;
      max-width: 520px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .slider-panel {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
    }

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

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #f8fafc;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      font-family: "SF Mono", Consolas, Menlo, monospace;
      color: #1e2945;
      border: 1px solid #f1f5f9;
    }

    .val-highlight {
      font-weight: 700;
      color: #0284c7;
    }
    .val-normal {
      font-weight: 700;
      color: #d97706;
    }
  </style>
</head>
<body>

  
  <div class="header-presets">
    <button class="btn-preset active" id="btnIso" onclick="setAngle(35.26)">Isometric (35.3°)</button>
    <button class="btn-preset" id="btnFlat" onclick="setAngle(0)">Flat (0°)</button>
    <button class="btn-preset" id="btnDim" onclick="setAngle(45)">Dimetric (45°)</button>
    <button class="btn-preset" id="btnSteep" onclick="setAngle(60)">Steep (60°)</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 460 250">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="7" 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="#0f172a" />
        </marker>
        <marker id="arrow-proj" viewBox="0 0 10 10" refX="7" 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="arrow-norm" viewBox="0 0 10 10" refX="7" 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>
      </defs>

      
      <rect x="30" y="195" width="400" height="20" fill="#f1f5f9" rx="3" />
      <line x1="30" y1="195" x2="430" y2="195" stroke="#94a3b8" stroke-width="2" />
      <text x="425" y="210" font-size="11" font-weight="600" fill="#64748b" text-anchor="end">Projection Plane</text>

      
      <line id="lineShadow" x1="70" y1="195" x2="315" y2="195" stroke="#0284c7" stroke-width="4" stroke-linecap="round" marker-end="url(#arrow-proj)" />
      
      
      <line id="lineNormal" x1="315" y1="195" x2="315" y2="55" stroke="#d97706" stroke-width="3" stroke-dasharray="4,4" marker-end="url(#arrow-norm)" />

      
      <line id="lineVector" x1="70" y1="195" x2="315" y2="55" stroke="#0f172a" stroke-width="3.5" marker-end="url(#arrow)" />

      
      <path id="rightAngle" d="M 300 195 L 300 180 L 315 180" fill="none" stroke="#64748b" stroke-width="1.5" />

      
      <path id="arcTheta" fill="none" stroke="#22b7ff" stroke-width="2.5" />

      
      <circle cx="70" cy="195" r="4.5" fill="#0f172a" />

      
      <text id="lblVector" x="180" y="110" font-size="13" font-weight="700" fill="#0f172a" text-anchor="middle">Unit Vector = 1</text>
      <text id="lblNormal" x="330" y="125" font-size="13" font-weight="700" fill="#d97706" text-anchor="start">n<tspan font-size="10" dy="2">x</tspan><tspan font-size="13" dy="-2"> = sin θ</tspan></text>
      <text id="lblShadow" x="192" y="215" font-size="13" font-weight="700" fill="#0284c7" text-anchor="middle">s<tspan font-size="10" dy="2">x</tspan><tspan font-size="13" dy="-2"> = cos θ = √(1 − n</tspan><tspan font-size="10" dy="2">x</tspan><tspan font-size="11" dy="-6">2</tspan><tspan font-size="13" dy="4">)</tspan></text>
      <text id="lblTheta" x="110" y="185" font-size="12" font-weight="700" fill="#0284c7">θ</text>
    </svg>
  </div>

  
  <div class="slider-panel">
    <div class="slider-row">
      <span>Tilt Angle (θ):</span>
      <input type="range" id="angleSlider" min="0" max="80" step="0.5" value="35.3" oninput="onSliderChange(this.value)">
      <span id="txtAngle" style="width: 48px; text-align: right; font-variant-numeric: tabular-nums;">35.3°</span>
    </div>
    <div class="formula-row">
      <span>Normal: <span class="val-normal" id="dispNx">n_x = 0.58</span></span>
      <span>Scale: <span class="val-highlight" id="dispSx">s_x = 0.82</span></span>
    </div>
  </div>

  <script>
    const ORIGIN_X = 70;
    const ORIGIN_Y = 195;
    const HYPOTENUSE = 300; // SVG pixel scale

    function updateGeometry(deg) {
      const rad = deg * Math.PI / 180;
      const cosVal = Math.cos(rad);
      const sinVal = Math.sin(rad);

      const targetX = ORIGIN_X + HYPOTENUSE * cosVal;
      const targetY = ORIGIN_Y - HYPOTENUSE * sinVal;

      // Update vector hypotenuse
      const lineVector = document.getElementById('lineVector');
      lineVector.setAttribute('x2', targetX);
      lineVector.setAttribute('y2', targetY);

      // Update projected shadow
      const lineShadow = document.getElementById('lineShadow');
      lineShadow.setAttribute('x2', targetX);

      // Update normal line
      const lineNormal = document.getElementById('lineNormal');
      lineNormal.setAttribute('x1', targetX);
      lineNormal.setAttribute('y1', ORIGIN_Y);
      lineNormal.setAttribute('x2', targetX);
      lineNormal.setAttribute('y2', targetY);

      // Right angle square
      const rightAngle = document.getElementById('rightAngle');
      if (deg < 4) {
        rightAngle.setAttribute('d', '');
      } else {
        const sq = Math.min(14, HYPOTENUSE * cosVal * 0.2);
        rightAngle.setAttribute('d', `M ${targetX - sq} ${ORIGIN_Y} L ${targetX - sq} ${ORIGIN_Y - sq} L ${targetX} ${ORIGIN_Y - sq}`);
      }

      // Angle arc
      const arcTheta = document.getElementById('arcTheta');
      const arcR = 40;
      if (deg < 2) {
        arcTheta.setAttribute('d', '');
      } else {
        const arcEndX = ORIGIN_X + arcR * Math.cos(rad);
        const arcEndY = ORIGIN_Y - arcR * Math.sin(rad);
        arcTheta.setAttribute('d', `M ${ORIGIN_X + arcR} ${ORIGIN_Y} A ${arcR} ${arcR} 0 0 0 ${arcEndX} ${arcEndY}`);
      }

      // Labels positioning
      const midVectorX = (ORIGIN_X + targetX) / 2;
      const midVectorY = (ORIGIN_Y + targetY) / 2;
      const lblVec = document.getElementById('lblVector');
      lblVec.setAttribute('x', midVectorX - 10 * Math.sin(rad));
      lblVec.setAttribute('y', midVectorY - 10 * Math.cos(rad));
      lblVec.setAttribute('transform', `rotate(${-deg}, ${midVectorX}, ${midVectorY})`);

      const lblNorm = document.getElementById('lblNormal');
      lblNorm.setAttribute('x', targetX + 10);
      lblNorm.setAttribute('y', (ORIGIN_Y + targetY) / 2 + 5);

      const lblShad = document.getElementById('lblShadow');
      lblShad.setAttribute('x', (ORIGIN_X + targetX) / 2);

      const lblTh = document.getElementById('lblTheta');
      const thMidRad = rad / 2;
      lblTh.setAttribute('x', ORIGIN_X + 50 * Math.cos(thMidRad));
      lblTh.setAttribute('y', ORIGIN_Y - 50 * Math.sin(thMidRad) + 4);

      // Value displays
      document.getElementById('txtAngle').textContent = deg.toFixed(1) + '°';
      document.getElementById('dispNx').textContent = `n_x = ${sinVal.toFixed(3)}`;
      document.getElementById('dispSx').textContent = `s_x = ${cosVal.toFixed(3)}`;
    }

    function onSliderChange(val) {
      const deg = parseFloat(val);
      updateGeometry(deg);
      clearActiveButtons();
    }

    function setAngle(deg) {
      document.getElementById('angleSlider').value = deg;
      updateGeometry(deg);
      clearActiveButtons();
      if (Math.abs(deg - 35.26) < 0.1) document.getElementById('btnIso').classList.add('active');
      else if (deg === 0) document.getElementById('btnFlat').classList.add('active');
      else if (deg === 45) document.getElementById('btnDim').classList.add('active');
      else if (deg === 60) document.getElementById('btnSteep').classList.add('active');
    }

    function clearActiveButtons() {
      document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
    }

    // Initial setup
    updateGeometry(35.26);
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .svg-wrap {
      width: 100%;
      max-width: 520px;
      height: auto;
      display: flex;
      justify-content: center;
    }

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

    .controls {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 6px;
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .control-group label {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge-z { color: #2563eb; }
    .badge-y { color: #d97706; }

    input[type=range] {
      width: 80px;
      height: 4px;
      accent-color: #2563eb;
      cursor: pointer;
    }

    #rangeY {
      accent-color: #d97706;
    }

    .plane-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .point-label {
      font-size: 13px;
      font-weight: 700;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sub-label {
      font-size: 10px;
      font-weight: 600;
      fill: #64748b;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 2.5px;
    }

    .dim-text {
      font-size: 11px;
      font-weight: 700;
      font-style: italic;
    }
  </style>
</head>
<body>

  <div class="svg-wrap">
    <svg viewBox="0 0 500 370" id="scene">
      <defs>
        
        <linearGradient id="vpGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#eff6ff" stop-opacity="0.9" />
          <stop offset="100%" stop-color="#dbeafe" stop-opacity="0.9" />
        </linearGradient>
        <linearGradient id="hpGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f0fdf4" stop-opacity="0.9" />
          <stop offset="100%" stop-color="#dcfce7" stop-opacity="0.9" />
        </linearGradient>

        
        <marker id="arrZ" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 1.5 L 3 3 L 0 4.5" fill="none" stroke="#2563eb" stroke-width="1.2" stroke-linecap="round"/>
        </marker>
        <marker id="arrY" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 1.5 L 3 3 L 0 4.5" fill="none" stroke="#d97706" stroke-width="1.2" stroke-linecap="round"/>
        </marker>
      </defs>

      
      <polygon points="50,40 450,40 450,220 50,220" fill="url(#vpGrad)" stroke="#93c5fd" stroke-width="1.5" />
      <text x="64" y="66" fill="#1e40af" class="plane-label">VP (Vertical Plane)</text>

      
      <polygon points="50,220 450,220 370,340 -30,340" fill="url(#hpGrad)" stroke="#86efac" stroke-width="1.5" />
      <text x="30" y="325" fill="#166534" class="plane-label">HP (Horizontal Plane)</text>

      
      <line x1="20" y1="220" x2="480" y2="220" stroke="#475569" stroke-width="2" />
      <text x="456" y="213" fill="#475569" font-size="11" font-weight="700">x (GL)</text>

      
      
      <polygon id="projQuadVP" fill="#2563eb" fill-opacity="0.06" />
      <polygon id="projQuadHP" fill="#d97706" fill-opacity="0.06" />

      
      <line id="lineA_to_a" stroke="#2563eb" stroke-width="1.8" stroke-dasharray="4,4" />
      <line id="lineA_to_ap" stroke="#d97706" stroke-width="1.8" stroke-dasharray="4,4" />
      <line id="lineAp_to_ax" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,3" />
      <line id="lineA_to_ax" stroke="#d97706" stroke-width="1.5" stroke-dasharray="3,3" />

      
      <g id="dimZGroup">
        <line id="dimZLine" stroke="#2563eb" stroke-width="1.4" />
        <text id="dimZText" class="dim-text" fill="#1d4ed8" text-anchor="end">z (height)</text>
      </g>
      <g id="dimYGroup">
        <line id="dimYLine" stroke="#d97706" stroke-width="1.4" />
        <text id="dimYText" class="dim-text" fill="#b45309">y (depth)</text>
      </g>

      
      
      <circle id="pt_a" r="4.5" fill="#16a34a" stroke="#ffffff" stroke-width="1.5" />
      <text id="lbl_a" class="point-label" fill="#15803d">a</text>
      <text id="sub_a" class="sub-label">Plan (HP)</text>

      
      <circle id="pt_ap" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5" />
      <text id="lbl_ap" class="point-label" fill="#1d4ed8">a′</text>
      <text id="sub_ap" class="sub-label">Elevation (VP)</text>

      
      <circle id="pt_ax" r="3" fill="#64748b" />
      <text id="lbl_ax" fill="#64748b" font-size="10" font-weight="600">a<tspan font-size="8" dy="2">x</tspan></text>

      
      <circle id="pt_A" r="6" fill="#e11d48" stroke="#ffffff" stroke-width="2" />
      <text id="lbl_A" class="point-label" fill="#be123c">A</text>
      <text id="sub_A" class="sub-label" fill="#be123c">Quadrant I</text>
    </svg>
  </div>

  <div class="controls">
    <div class="control-group">
      <label for="rangeZ"><span class="badge-z">Height z:</span></label>
      <input type="range" id="rangeZ" min="40" max="130" value="95" />
    </div>
    <div class="control-group">
      <label for="rangeY"><span class="badge-y">Depth y:</span></label>
      <input type="range" id="rangeY" min="30" max="110" value="75" />
    </div>
  </div>

  <script>
    const rangeZ = document.getElementById('rangeZ');
    const rangeY = document.getElementById('rangeY');

    const ptA = document.getElementById('pt_A');
    const ptAp = document.getElementById('pt_ap');
    const ptA_ = document.getElementById('pt_a');
    const ptAx = document.getElementById('pt_ax');

    const lblA = document.getElementById('lbl_A');
    const subA = document.getElementById('sub_A');
    const lblAp = document.getElementById('lbl_ap');
    const subAp = document.getElementById('sub_ap');
    const lblA_ = document.getElementById('lbl_a');
    const subA_ = document.getElementById('sub_a');
    const lblAx = document.getElementById('lbl_ax');

    const lineA_to_a = document.getElementById('lineA_to_a');
    const lineA_to_ap = document.getElementById('lineA_to_ap');
    const lineAp_to_ax = document.getElementById('lineAp_to_ax');
    const lineA_to_ax = document.getElementById('lineA_to_ax');

    const quadVP = document.getElementById('projQuadVP');
    const quadHP = document.getElementById('projQuadHP');

    const dimZLine = document.getElementById('dimZLine');
    const dimZText = document.getElementById('dimZText');
    const dimYLine = document.getElementById('dimYLine');
    const dimYText = document.getElementById('dimYText');

    const GL_Y = 220;
    const X0 = 260;
    const OBLIQUE_K = 0.72; // Oblique depth foreshortening

    function update() {
      const z = parseFloat(rangeZ.value);
      const y = parseFloat(rangeY.value);

      // 2D Projection calculations
      // a_x on Ground line
      const ax_x = X0;
      const ax_y = GL_Y;

      // a' on VP (elevation)
      const ap_x = X0;
      const ap_y = GL_Y - z;

      // a on HP (plan)
      const a_x = X0 - y * OBLIQUE_K;
      const a_y = GL_Y + y * OBLIQUE_K;

      // A in space
      const A_x = a_x;
      const A_y = a_y - z;

      // Update Point Coordinates
      ptAx.setAttribute('cx', ax_x);
      ptAx.setAttribute('cy', ax_y);

      ptAp.setAttribute('cx', ap_x);
      ptAp.setAttribute('cy', ap_y);

      ptA_.setAttribute('cx', a_x);
      ptA_.setAttribute('cy', a_y);

      ptA.setAttribute('cx', A_x);
      ptA.setAttribute('cy', A_y);

      // Labels
      lblA.setAttribute('x', A_x + 9);
      lblA.setAttribute('y', A_y - 2);
      subA.setAttribute('x', A_x + 9);
      subA.setAttribute('y', A_y + 11);

      lblAp.setAttribute('x', ap_x + 9);
      lblAp.setAttribute('y', ap_y + 1);
      subAp.setAttribute('x', ap_x + 9);
      subAp.setAttribute('y', ap_y + 14);

      lblA_.setAttribute('x', a_x - 16);
      lblA_.setAttribute('y', a_y + 5);
      subA_.setAttribute('x', a_x - 16);
      subA_.setAttribute('y', a_y + 17);

      lblAx.setAttribute('x', ax_x + 6);
      lblAx.setAttribute('y', ax_y + 14);

      // Projection lines
      lineA_to_a.setAttribute('x1', A_x);
      lineA_to_a.setAttribute('y1', A_y);
      lineA_to_a.setAttribute('x2', a_x);
      lineA_to_a.setAttribute('y2', a_y);

      lineA_to_ap.setAttribute('x1', A_x);
      lineA_to_ap.setAttribute('y1', A_y);
      lineA_to_ap.setAttribute('x2', ap_x);
      lineA_to_ap.setAttribute('y2', ap_y);

      lineAp_to_ax.setAttribute('x1', ap_x);
      lineAp_to_ax.setAttribute('y1', ap_y);
      lineAp_to_ax.setAttribute('x2', ax_x);
      lineAp_to_ax.setAttribute('y2', ax_y);

      lineA_to_ax.setAttribute('x1', a_x);
      lineA_to_ax.setAttribute('y1', a_y);
      lineA_to_ax.setAttribute('x2', ax_x);
      lineA_to_ax.setAttribute('y2', ax_y);

      // Shaded projection quads
      quadVP.setAttribute('points', `${A_x},${A_y} ${ap_x},${ap_y} ${ax_x},${ax_y} ${a_x},${a_y}`);
      quadHP.setAttribute('points', `${a_x},${a_y} ${ax_x},${ax_y} ${ap_x},${ap_y} ${A_x},${A_y}`);

      // Dimension lines
      // z dimension (offset slightly right on VP)
      const dimZ_X = ap_x + 80;
      dimZLine.setAttribute('x1', dimZ_X);
      dimZLine.setAttribute('y1', GL_Y);
      dimZLine.setAttribute('x2', dimZ_X);
      dimZLine.setAttribute('y2', ap_y);
      dimZText.setAttribute('x', dimZ_X - 6);
      dimZText.setAttribute('y', (GL_Y + ap_y) / 2 + 4);

      // y dimension (along line from ax to a)
      const midY_x = (ax_x + a_x) / 2;
      const midY_y = (ax_y + a_y) / 2;
      dimYLine.setAttribute('x1', ax_x + 12);
      dimYLine.setAttribute('y1', ax_y + 8);
      dimYLine.setAttribute('x2', a_x + 12);
      dimYLine.setAttribute('y2', a_y + 8);
      dimYText.setAttribute('x', midY_x + 18);
      dimYText.setAttribute('y', midY_y + 14);
    }

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

Principles of the Dihedral System and the Monge Epure

<!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;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .diagram-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
      width: 100%;
      max-width: 680px;
      align-items: center;
    }

    @media (max-width: 520px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .panel {
      position: relative;
      padding: 4px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

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

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 680px;
      margin-top: 10px;
    }

    .btn {
      appearance: none;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn:hover {
      background: #e2e8f0;
    }

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

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 160px;
      max-width: 240px;
    }

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

    .label-text {
      font-size: 12px;
      font-weight: 700;
      user-select: none;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="panel">
      <span class="panel-title">3D Dihedral System</span>
      <svg id="svg3d" viewBox="0 0 320 240">
        <defs>
          <marker id="arrow" viewBox="0 0 12 12" refX="8" refY="6" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
            <path d="M 1 2 L 10 6 L 1 10 z" fill="#ea580c" />
          </marker>
        </defs>

        
        <polygon id="vpPoly" points="50,20 270,20 270,120 50,120" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
        <text x="60" y="38" fill="#0369a1" class="label-text">VP</text>

        
        <polygon id="hpPoly" fill="#dcfce7" fill-opacity="0.85" stroke="#16a34a" stroke-width="1.5" />
        <text id="hpLabel" fill="#15803d" class="label-text">HP</text>

        
        <line x1="20" y1="120" x2="300" y2="120" stroke="#1e2945" stroke-width="2.5" />
        <text x="290" y="112" fill="#1e2945" class="label-text">GL</text>

        
        <path id="rotArc" fill="none" stroke="#ea580c" stroke-width="2.5" marker-end="url(#arrow)" />

        
        
        <g id="pointA3d">
          <line id="projVp" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />
          <line id="projHp" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />
          <circle id="dotA" r="4.5" fill="#8b5cf6" stroke="#ffffff" stroke-width="1.5" />
          <text id="labelA" fill="#7c3aed" class="label-text">A</text>
        </g>

        
        <line id="refVpGl" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2" />
        <circle id="dotVp" cx="160" cy="65" r="4" fill="#0284c7" />
        <text x="168" y="68" fill="#0284c7" class="label-text">a′</text>

        
        <line id="refHpGl" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2" />
        <circle id="dotHp" r="4" fill="#16a34a" />
        <text id="labelHp" fill="#16a34a" class="label-text">a</text>
      </svg>
    </div>

    
    <div class="panel">
      <span class="panel-title">2D Monge Epure</span>
      <svg viewBox="0 0 200 240">
        
        <rect x="15" y="20" width="170" height="100" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1" rx="4" />
        <rect x="15" y="120" width="170" height="100" fill="#f0fdf4" stroke="#bbf7d0" stroke-width="1" rx="4" />

        <text x="24" y="40" fill="#0369a1" class="label-text" font-weight="800">VP</text>
        <text x="24" y="210" fill="#14532d" class="label-text" font-weight="800">HP</text>

        
        <line x1="10" y1="120" x2="190" y2="120" stroke="#1e2945" stroke-width="2.5" />
        <text x="172" y="112" fill="#1e2945" class="label-text">GL</text>

        
        <line x1="100" y1="65" x2="100" y2="190" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3,3" />

        
        <path d="M 100 112 L 108 112 L 108 120" fill="none" stroke="#94a3b8" stroke-width="1" />

        
        <circle cx="100" cy="65" r="4.5" fill="#0284c7" />
        <text x="110" y="69" fill="#0284c7" class="label-text">a′</text>

        
        <circle cx="100" cy="190" r="4.5" fill="#16a34a" />
        <text x="110" y="194" fill="#16a34a" class="label-text">a</text>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btn3d">3D Dihedral</button>
    <button class="btn" id="btnUnfold">Unfold 90° ↷</button>
    <button class="btn" id="btn2d">2D Epure</button>
    <div class="slider-wrap">
      <input type="range" id="angleSlider" min="0" max="90" value="0" aria-label="Unfolding Angle">
    </div>
  </div>

  <script>
    const hpPoly = document.getElementById('hpPoly');
    const hpLabel = document.getElementById('hpLabel');
    const rotArc = document.getElementById('rotArc');
    const dotHp = document.getElementById('dotHp');
    const labelHp = document.getElementById('labelHp');
    const dotA = document.getElementById('dotA');
    const labelA = document.getElementById('labelA');
    const projVp = document.getElementById('projVp');
    const projHp = document.getElementById('projHp');
    const refHpGl = document.getElementById('refHpGl');
    const refVpGl = document.getElementById('refVpGl');
    const pointA3d = document.getElementById('pointA3d');

    const slider = document.getElementById('angleSlider');
    const btn3d = document.getElementById('btn3d');
    const btnUnfold = document.getElementById('btnUnfold');
    const btn2d = document.getElementById('btn2d');

    // Static VP reference point
    const x0 = 160, y_gl = 120;
    const vp_a_y = 65; // a' is at (160, 65)
    refVpGl.setAttribute('x1', x0);
    refVpGl.setAttribute('y1', vp_a_y);
    refVpGl.setAttribute('x2', x0);
    refVpGl.setAttribute('y2', y_gl);

    function getHpCoords(angleDeg) {
      const rad = (angleDeg * Math.PI) / 180;
      const cos = Math.cos(rad);
      const sin = Math.sin(rad);

      // Depth vector for HP: 3D oblique (-0.6, 0.45) -> 2D flat (0, 0.9)
      const depthX = -55 * cos;
      const depthY = 40 * cos + 80 * sin;

      // HP Polygon points
      const p1 = "50,120";
      const p2 = "270,120";
      const p3 = `${270 + depthX},${120 + depthY}`;
      const p4 = `${50 + depthX},${120 + depthY}`;

      // a projection coordinates on HP (offset 70 units along depth)
      const aDepthX = -45 * cos;
      const aDepthY = 35 * cos + 70 * sin;
      const a_x = x0 + aDepthX;
      const a_y = y_gl + aDepthY;

      // 3D Point A coordinates in space (fixed in space)
      const A_x = x0 - 45;
      const A_y = 65 + 35;

      return {
        poly: `${p1} ${p2} ${p3} ${p4}`,
        labelPos: { x: 58 + depthX, y: 112 + depthY },
        aPos: { x: a_x, y: a_y },
        posA: { x: A_x, y: A_y }
      };
    }

    function render(angle) {
      const { poly, labelPos, aPos, posA } = getHpCoords(angle);

      hpPoly.setAttribute('points', poly);
      hpLabel.setAttribute('x', labelPos.x);
      hpLabel.setAttribute('y', labelPos.y);

      // Point a
      dotHp.setAttribute('cx', aPos.x);
      dotHp.setAttribute('cy', aPos.y);
      labelHp.setAttribute('x', aPos.x + 8);
      labelHp.setAttribute('y', aPos.y + 4);

      // Ref line from GL to a
      refHpGl.setAttribute('x1', x0);
      refHpGl.setAttribute('y1', y_gl);
      refHpGl.setAttribute('x2', aPos.x);
      refHpGl.setAttribute('y2', aPos.y);

      // Point A & 3D Projectors (fade out as angle approaches 90)
      const opacity = Math.max(0, 1 - (angle / 75));
      pointA3d.setAttribute('opacity', opacity);

      dotA.setAttribute('cx', posA.x);
      dotA.setAttribute('cy', posA.y);
      labelA.setAttribute('x', posA.x - 14);
      labelA.setAttribute('y', posA.y - 6);

      projVp.setAttribute('x1', posA.x);
      projVp.setAttribute('y1', posA.y);
      projVp.setAttribute('x2', x0);
      projVp.setAttribute('y2', vp_a_y);

      projHp.setAttribute('x1', posA.x);
      projHp.setAttribute('y1', posA.y);
      projHp.setAttribute('x2', aPos.x);
      projHp.setAttribute('y2', aPos.y);

      // Arc path showing rotation
      if (angle < 85) {
        rotArc.setAttribute('opacity', '1');
        const startX = 270 - 55;
        const startY = 120 + 40;
        const targetRad = ((angle + 10) * Math.PI) / 180;
        const currentEndX = 270 - 55 * Math.cos(targetRad);
        const currentEndY = 120 + 40 * Math.cos(targetRad) + 80 * Math.sin(targetRad);
        rotArc.setAttribute('d', `M ${startX} ${startY} Q ${startX + 22} ${startY + 32} ${currentEndX} ${currentEndY}`);
      } else {
        rotArc.setAttribute('opacity', '0');
      }

      slider.value = angle;
    }

    let animId = null;
    function animateTo(targetAngle) {
      cancelAnimationFrame(animId);
      const startAngle = parseFloat(slider.value);
      const startTime = performance.now();
      const duration = 600; // ms

      function step(now) {
        const elapsed = now - startTime;
        const progress = Math.min(1, elapsed / duration);
        const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
        const current = startAngle + (targetAngle - startAngle) * ease;
        render(current);

        if (progress < 1) {
          animId = requestAnimationFrame(step);
        }
      }
      animId = requestAnimationFrame(step);
    }

    function setActiveBtn(btn) {
      [btn3d, btnUnfold, btn2d].forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
    }

    btn3d.addEventListener('click', () => { setActiveBtn(btn3d); animateTo(0); });
    btnUnfold.addEventListener('click', () => { setActiveBtn(btnUnfold); animateTo(45); });
    btn2d.addEventListener('click', () => { setActiveBtn(btn2d); animateTo(90); });

    slider.addEventListener('input', (e) => {
      cancelAnimationFrame(animId);
      const val = parseFloat(e.target.value);
      render(val);
      if (val === 0) setActiveBtn(btn3d);
      else if (val === 90) setActiveBtn(btn2d);
      else setActiveBtn(btnUnfold);
    });

    // Initial render
    render(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">
  <title>Monge Epure: Four Quadrants</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .btn {
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      color: #1e2945;
    }
    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .svg-container {
      width: 100%;
      max-width: 580px;
      aspect-ratio: 4 / 3;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .gl-line {
      stroke: #1e2945;
      stroke-width: 2.5;
    }
    .gl-text {
      font-size: 15px;
      font-weight: 800;
      fill: #1e2945;
      letter-spacing: 0.5px;
    }
    .recall-line {
      stroke-width: 1.75;
      stroke-dasharray: 4, 4;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .pt-group {
      transition: opacity 0.3s ease, transform 0.3s ease;
      cursor: pointer;
    }
    .pt-group.dimmed {
      opacity: 0.18;
    }
    .pt-label {
      font-size: 15px;
      font-weight: 700;
      font-style: italic;
    }
    .quad-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      fill: #64748b;
    }
  </style>
</head>
<body>

  <div class="toolbar" role="tablist">
    <button class="btn active" onclick="selectQuad('all', this)">All Points</button>
    <button class="btn" onclick="selectQuad('q1', this)">Quadrant I (A)</button>
    <button class="btn" onclick="selectQuad('q2', this)">Quadrant II (B)</button>
    <button class="btn" onclick="selectQuad('q3', this)">Quadrant III (C)</button>
    <button class="btn" onclick="selectQuad('q4', this)">Quadrant IV (D)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 540 380" xmlns="http://www.w3.org/2000/svg">
      
      <line x1="30" y1="190" x2="510" y2="190" class="gl-line" />
      <text x="32" y="182" class="gl-text">G</text>
      <text x="498" y="182" class="gl-text">L</text>

      
      <text x="498" y="165" class="quad-label" style="font-size: 10px; fill: #94a3b8;">+V</text>
      <text x="498" y="215" class="quad-label" style="font-size: 10px; fill: #94a3b8;">+H</text>

      
      <g id="pt-q1" class="pt-group" onclick="focusQuad('q1')">
        <text x="90" y="38" text-anchor="middle" class="quad-label">Quadrant I</text>
        <line x1="90" y1="70" x2="90" y2="310" class="recall-line" stroke="#2563eb" />
        
        <circle cx="90" cy="70" r="5.5" fill="#2563eb" />
        <text x="105" y="75" fill="#2563eb" class="pt-label">a′</text>
        
        <circle cx="90" cy="310" r="5.5" fill="#2563eb" />
        <text x="105" y="315" fill="#2563eb" class="pt-label">a</text>
      </g>

      
      <g id="pt-q2" class="pt-group" onclick="focusQuad('q2')">
        <text x="210" y="38" text-anchor="middle" class="quad-label">Quadrant II</text>
        <line x1="210" y1="60" x2="210" y2="190" class="recall-line" stroke="#059669" />
        
        <circle cx="210" cy="60" r="5.5" fill="#059669" />
        <text x="225" y="65" fill="#059669" class="pt-label">b′</text>
        
        <circle cx="210" cy="130" r="5.5" fill="#059669" />
        <text x="225" y="135" fill="#059669" class="pt-label">b</text>
      </g>

      
      <g id="pt-q3" class="pt-group" onclick="focusQuad('q3')">
        <text x="330" y="38" text-anchor="middle" class="quad-label">Quadrant III</text>
        <line x1="330" y1="90" x2="330" y2="290" class="recall-line" stroke="#d97706" />
        
        <circle cx="330" cy="90" r="5.5" fill="#d97706" />
        <text x="345" y="95" fill="#d97706" class="pt-label">c</text>
        
        <circle cx="330" cy="290" r="5.5" fill="#d97706" />
        <text x="345" y="295" fill="#d97706" class="pt-label">c′</text>
      </g>

      
      <g id="pt-q4" class="pt-group" onclick="focusQuad('q4')">
        <text x="450" y="38" text-anchor="middle" class="quad-label">Quadrant IV</text>
        <line x1="450" y1="190" x2="450" y2="320" class="recall-line" stroke="#7c3aed" />
        
        <circle cx="450" cy="250" r="5.5" fill="#7c3aed" />
        <text x="465" y="255" fill="#7c3aed" class="pt-label">d</text>
        
        <circle cx="450" cy="320" r="5.5" fill="#7c3aed" />
        <text x="465" y="325" fill="#7c3aed" class="pt-label">d′</text>
      </g>
    </svg>
  </div>

  <script>
    const quads = ['q1', 'q2', 'q3', 'q4'];

    function selectQuad(target, btnEl) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      if (btnEl) btnEl.classList.add('active');

      quads.forEach(q => {
        const el = document.getElementById('pt-' + q);
        if (target === 'all' || target === q) {
          el.classList.remove('dimmed');
        } else {
          el.classList.add('dimmed');
        }
      });
    }

    function focusQuad(target) {
      const btn = Array.from(document.querySelectorAll('.btn')).find(b => 
        b.getAttribute('onclick').includes(`'${target}'`)
      );
      selectQuad(target, btn);
    }
  </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; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body { width: 100%; background: #ffffff; color: #1e2945; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; }
    
    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 6px;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .svg-container {
      width: 100%;
      max-width: 560px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
      user-select: none;
    }

    .plane {
      transition: opacity 0.3s ease, fill 0.3s ease;
    }
    .badge {
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.3s ease;
    }
    .badge:hover {
      opacity: 0.9;
    }
    .badge-rect {
      rx: 6;
      ry: 6;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }
    .badge-text {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      fill: #ffffff;
    }

    .axis-label {
      font-size: 12px;
      font-weight: 700;
      fill: #475569;
    }

    .legend {
      display: flex;
      gap: 14px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 4px;
      color: #334155;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .color-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.15);
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="selectQuadrant('all')">All Quadrants</button>
    <button class="tab-btn" onclick="selectQuadrant('q1')">Quadrant I</button>
    <button class="tab-btn" onclick="selectQuadrant('q2')">Quadrant II</button>
    <button class="tab-btn" onclick="selectQuadrant('q3')">Quadrant III</button>
    <button class="tab-btn" onclick="selectQuadrant('q4')">Quadrant IV</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 560 410">
      <defs>
        
        <marker id="arrow-height" viewBox="0 0 10 10" refX="5" 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="#64748b" />
        </marker>
        <marker id="arrow-depth" viewBox="0 0 10 10" refX="5" 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="#64748b" />
        </marker>
      </defs>

      
      
      <polygon id="hp-back" class="plane"
               points="170,140 510,80 450,170 110,230"
               fill="#38bdf8" fill-opacity="0.3"
               stroke="#0284c7" stroke-width="1.8" stroke-dasharray="4,4" />

      
      
      <polygon id="vp-lower" class="plane"
               points="110,230 450,170 450,340 110,400"
               fill="#fb923c" fill-opacity="0.3"
               stroke="#ea580c" stroke-width="1.8" stroke-dasharray="4,4" />

      
      
      <polygon id="hp-front" class="plane"
               points="110,230 450,170 390,260 50,320"
               fill="#38bdf8" fill-opacity="0.45"
               stroke="#0284c7" stroke-width="2.2" />

      
      
      <polygon id="vp-upper" class="plane"
               points="110,60 450,0 450,170 110,230"
               fill="#fb923c" fill-opacity="0.45"
               stroke="#ea580c" stroke-width="2.2" />

      
      <line x1="110" y1="230" x2="450" y2="170" stroke="#dc2626" stroke-width="4.5" stroke-linecap="round" />
      
      
      <g transform="translate(280, 200)">
        <rect x="-65" y="-13" width="130" height="26" rx="6" ry="6" fill="#dc2626" />
        <text x="0" y="1" class="badge-text" style="font-size: 12px; letter-spacing: 0.5px;">Ground Line (GL)</text>
      </g>

      
      
      <line x1="85" y1="180" x2="85" y2="70" stroke="#64748b" stroke-width="2" marker-end="url(#arrow-height)" />
      <text x="80" y="60" class="axis-label" text-anchor="end">+Height</text>

      
      <line x1="85" y1="280" x2="85" y2="390" stroke="#64748b" stroke-width="2" marker-end="url(#arrow-height)" />
      <text x="80" y="400" class="axis-label" text-anchor="end">−Height</text>

      
      <line x1="70" y1="250" x2="25" y2="310" stroke="#64748b" stroke-width="2" marker-end="url(#arrow-depth)" />
      <text x="35" y="335" class="axis-label">+Depth</text>

      
      <line x1="490" y1="150" x2="535" y2="90" stroke="#64748b" stroke-width="2" marker-end="url(#arrow-depth)" />
      <text x="505" y="75" class="axis-label">−Depth</text>

      
      
      <g id="badge-q1" class="badge" transform="translate(290, 115)" onclick="selectQuadrant('q1')">
        <rect class="badge-rect" x="-52" y="-14" width="104" height="28" fill="#1e293b" />
        <text class="badge-text" x="0" y="1">Quadrant I</text>
      </g>

      
      <g id="badge-q2" class="badge" transform="translate(370, 48)" onclick="selectQuadrant('q2')">
        <rect class="badge-rect" x="-54" y="-14" width="108" height="28" fill="#475569" />
        <text class="badge-text" x="0" y="1">Quadrant II</text>
      </g>

      
      <g id="badge-q3" class="badge" transform="translate(340, 275)" onclick="selectQuadrant('q3')">
        <rect class="badge-rect" x="-56" y="-14" width="112" height="28" fill="#475569" />
        <text class="badge-text" x="0" y="1">Quadrant III</text>
      </g>

      
      <g id="badge-q4" class="badge" transform="translate(195, 345)" onclick="selectQuadrant('q4')">
        <rect class="badge-rect" x="-56" y="-14" width="112" height="28" fill="#1e293b" />
        <text class="badge-text" x="0" y="1">Quadrant IV</text>
      </g>
    </svg>
  </div>

  
  <div class="legend">
    <div class="legend-item">
      <div class="color-swatch" style="background: #38bdf8; border-color: #0284c7;"></div>
      <span>Horizontal Plane (HP)</span>
    </div>
    <div class="legend-item">
      <div class="color-swatch" style="background: #fb923c; border-color: #ea580c;"></div>
      <span>Vertical Plane (VP)</span>
    </div>
  </div>

  <script>
    function selectQuadrant(quad) {
      // Update tabs
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('onclick').includes(quad));
      });

      const hpFront = document.getElementById('hp-front');
      const hpBack = document.getElementById('hp-back');
      const vpUpper = document.getElementById('vp-upper');
      const vpLower = document.getElementById('vp-lower');

      const b1 = document.getElementById('badge-q1');
      const b2 = document.getElementById('badge-q2');
      const b3 = document.getElementById('badge-q3');
      const b4 = document.getElementById('badge-q4');

      // Reset opacity
      [hpFront, hpBack, vpUpper, vpLower].forEach(p => p.style.opacity = '1');
      [b1, b2, b3, b4].forEach(b => b.style.opacity = '1');

      if (quad === 'q1') {
        // Q I: Front HP + Upper VP
        hpBack.style.opacity = '0.15';
        vpLower.style.opacity = '0.15';
        b2.style.opacity = '0.3';
        b3.style.opacity = '0.3';
        b4.style.opacity = '0.3';
      } else if (quad === 'q2') {
        // Q II: Back HP + Upper VP
        hpFront.style.opacity = '0.15';
        vpLower.style.opacity = '0.15';
        b1.style.opacity = '0.3';
        b3.style.opacity = '0.3';
        b4.style.opacity = '0.3';
      } else if (quad === 'q3') {
        // Q III: Back HP + Lower VP
        hpFront.style.opacity = '0.15';
        vpUpper.style.opacity = '0.15';
        b1.style.opacity = '0.3';
        b2.style.opacity = '0.3';
        b4.style.opacity = '0.3';
      } else if (quad === 'q4') {
        // Q IV: Front HP + Lower VP
        hpBack.style.opacity = '0.15';
        vpUpper.style.opacity = '0.15';
        b1.style.opacity = '0.3';
        b2.style.opacity = '0.3';
        b3.style.opacity = '0.3';
      }
    }
  </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>Orthographic Projection of Intersecting Lines</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 8px;
    }
    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
      z-index: 10;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #94a3b8;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }
    .svg-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 380px;
      overflow: visible;
    }
    .line-label {
      font-family: "Times New Roman", Georgia, serif;
      font-style: italic;
      font-size: 17px;
      font-weight: bold;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .pt-title {
      font-family: "Times New Roman", Georgia, serif;
      font-style: italic;
      font-size: 15px;
      font-weight: bold;
      fill: #0f172a;
    }
    .pt-math {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-style: normal;
      font-size: 12px;
      font-weight: 600;
      fill: #334155;
      letter-spacing: 0.2px;
    }
    .math-italic {
      font-family: "Times New Roman", Georgia, serif;
      font-style: italic;
      font-weight: bold;
    }
    .plane-tag {
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      fill: #475569;
      letter-spacing: 0.6px;
    }
    .interactive-line {
      transition: stroke 0.2s ease, stroke-width 0.2s ease, opacity 0.2s ease;
    }
    .fade-item {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btnAll" onclick="setMode('all')">Lines &amp; Point</button>
    <button class="btn" id="btnPlane" onclick="setMode('plane')">Plane α(a, b)</button>
    <button class="btn" id="btnProj" onclick="setMode('projector')">Projector Only</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 460 340" preserveAspectRatio="xMidYMid meet">
      <defs>
        
        <linearGradient id="gradV" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f8fafc"/>
          <stop offset="100%" stop-color="#f1f5f9"/>
        </linearGradient>
        <linearGradient id="gradH" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f1f5f9"/>
          <stop offset="100%" stop-color="#f8fafc"/>
        </linearGradient>

        
        <linearGradient id="alphaGradV" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.30"/>
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.12"/>
        </linearGradient>
        <linearGradient id="alphaGradH" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.30"/>
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.12"/>
        </linearGradient>
      </defs>

      
      <rect x="15" y="12" width="430" height="146" rx="6" fill="url(#gradV)" stroke="#cbd5e1" stroke-width="1.2"/>
      <rect x="15" y="182" width="430" height="146" rx="6" fill="url(#gradH)" stroke="#cbd5e1" stroke-width="1.2"/>

      
      <text x="26" y="30" class="plane-tag">VERTICAL PLANE (Π₂ / Front View)</text>
      <text x="26" y="320" class="plane-tag">HORIZONTAL PLANE (Π₁ / Top View)</text>

      
      <polygon id="planePatchV" class="fade-item" points="80,130 230,90 380,50 360,135 230,90 100,45" fill="url(#alphaGradV)" opacity="0" />
      <polygon id="planePatchH" class="fade-item" points="80,210 230,250 380,290 360,205 230,250 100,295" fill="url(#alphaGradH)" opacity="0" />

      
      <line id="projectorLine" x1="230" y1="90" x2="230" y2="250" stroke="#475569" stroke-width="1.8" stroke-dasharray="5 4" />
      
      
      <line x1="12" y1="170" x2="448" y2="170" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
      <text x="435" y="165" class="line-label" fill="#0f172a">x<tspan font-size="11" font-family="system-ui" font-style="normal" font-weight="700">₁₂</tspan></text>

      
      <path d="M222,170 L222,162 L230,162" fill="none" stroke="#64748b" stroke-width="1.2"/>
      <circle cx="226" cy="166" r="1" fill="#64748b" />

      
      
      <line id="lineA2" class="interactive-line" x1="80" y1="130" x2="380" y2="50" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
      <text x="388" y="52" class="line-label" fill="#0284c7">a″</text>

      
      <line id="lineB2" class="interactive-line" x1="100" y1="45" x2="360" y2="135" stroke="#0369a1" stroke-width="2.5" stroke-linecap="round" />
      <text x="368" y="142" class="line-label" fill="#0369a1">b″</text>

      
      <circle id="dotK2" cx="230" cy="90" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="2" />
      
      <g id="lblK2">
        <rect x="238" y="68" width="94" height="22" rx="4" fill="#ffffff" fill-opacity="0.92" stroke="#cbd5e1" stroke-width="1"/>
        <text x="244" y="84">
          <tspan class="pt-title">K″</tspan>
          <tspan class="pt-math"> (<tspan class="math-italic">a</tspan>″ ∩ <tspan class="math-italic">b</tspan>″)</tspan>
        </text>
      </g>

      
      <text id="lblAlpha2" class="fade-item line-label" x="140" y="75" fill="#0369a1" opacity="0" font-size="18">α″</text>

      
      
      <line id="lineA1" class="interactive-line" x1="80" y1="210" x2="380" y2="290" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
      <text x="388" y="295" class="line-label" fill="#0284c7">a′</text>

      
      <line id="lineB1" class="interactive-line" x1="100" y1="295" x2="360" y2="205" stroke="#0369a1" stroke-width="2.5" stroke-linecap="round" />
      <text x="368" y="208" class="line-label" fill="#0369a1">b′</text>

      
      <circle id="dotK1" cx="230" cy="250" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="2" />

      <g id="lblK1">
        <rect x="238" y="240" width="90" height="22" rx="4" fill="#ffffff" fill-opacity="0.92" stroke="#cbd5e1" stroke-width="1"/>
        <text x="244" y="256">
          <tspan class="pt-title">K′</tspan>
          <tspan class="pt-math"> (<tspan class="math-italic">a</tspan>′ ∩ <tspan class="math-italic">b</tspan>′)</tspan>
        </text>
      </g>

      
      <text id="lblAlpha1" class="fade-item line-label" x="140" y="265" fill="#0369a1" opacity="0" font-size="18">α′</text>

      
      <g id="indicatorGroup" class="fade-item">
        <rect x="242" y="157" width="102" height="24" rx="4" fill="#ffffff" stroke="#94a3b8" stroke-width="1.2" />
        <text x="250" y="173" font-family="system-ui, sans-serif" font-size="11px" font-weight="700" fill="#0f172a">K″ ⊥ x ⊥ K′</text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(mode) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      const planeV = document.getElementById('planePatchV');
      const planeH = document.getElementById('planePatchH');
      const lblAlpha2 = document.getElementById('lblAlpha2');
      const lblAlpha1 = document.getElementById('lblAlpha1');
      const projLine = document.getElementById('projectorLine');
      const indGroup = document.getElementById('indicatorGroup');
      const lines = [
        document.getElementById('lineA2'),
        document.getElementById('lineB2'),
        document.getElementById('lineA1'),
        document.getElementById('lineB1')
      ];

      if (mode === 'all') {
        document.getElementById('btnAll').classList.add('active');
        planeV.style.opacity = '0';
        planeH.style.opacity = '0';
        lblAlpha2.style.opacity = '0';
        lblAlpha1.style.opacity = '0';
        projLine.style.opacity = '1';
        projLine.setAttribute('stroke', '#475569');
        projLine.setAttribute('stroke-width', '1.8');
        indGroup.style.opacity = '1';
        lines.forEach(l => { l.style.opacity = '1'; l.setAttribute('stroke-width', '2.5'); });
      } else if (mode === 'plane') {
        document.getElementById('btnPlane').classList.add('active');
        planeV.style.opacity = '1';
        planeH.style.opacity = '1';
        lblAlpha2.style.opacity = '1';
        lblAlpha1.style.opacity = '1';
        projLine.style.opacity = '0.6';
        projLine.setAttribute('stroke', '#0284c7');
        projLine.setAttribute('stroke-width', '1.8');
        indGroup.style.opacity = '0.85';
        lines.forEach(l => { l.style.opacity = '1'; l.setAttribute('stroke-width', '3'); });
      } else if (mode === 'projector') {
        document.getElementById('btnProj').classList.add('active');
        planeV.style.opacity = '0';
        planeH.style.opacity = '0';
        lblAlpha2.style.opacity = '0';
        lblAlpha1.style.opacity = '0';
        projLine.style.opacity = '1';
        projLine.setAttribute('stroke', '#0284c7');
        projLine.setAttribute('stroke-width', '3');
        indGroup.style.opacity = '1';
        lines.forEach(l => { l.style.opacity = '0.35'; l.setAttribute('stroke-width', '2'); });
      }
    }
  </script>
</body>
</html>

OGM.11.DES.1

Aligned learning resources

Related diagrams