Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

What happens when you zoom in on a photo using a phone screen?

The picture grows bigger, but every corner stays in the exact same matching shape!

On a math grid, the very center point $(0,0)$ is called the **origin**.

Every spot on the grid is measured by counting steps right and steps up from $(0,0)$.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body { background: transparent; color: #1e2945; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px; user-select: none; }
    
    .controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; width: 100%; max-width: 440px; }
    .btn-scale {
      background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 8px;
      padding: 6px 14px; font-size: 14px; font-weight: 600; color: #475569;
      cursor: pointer; transition: all 0.2s ease;
    }
    .btn-scale.active {
      background: #22b7ff; border-color: #22b7ff; color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .formula-tag {
      font-size: 13px; font-weight: 600; color: #0284c7; background: #e0f2fe;
      padding: 4px 10px; border-radius: 6px; border: 1px solid #bae6fd;
    }

    .svg-container {
      width: 100%; max-width: 440px; aspect-ratio: 4 / 3;
      background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0;
      overflow: hidden; display: block;
    }
    svg { width: 100%; height: 100%; display: block; }
    
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .ray-line { stroke: #38bdf8; stroke-width: 1.5; stroke-dasharray: 4,3; opacity: 0.85; }
    .base-shape { fill: #bae6fd; fill-opacity: 0.35; stroke: #0284c7; stroke-width: 1.5; stroke-dasharray: 3,2; }
    .scaled-shape { fill: #22b7ff; fill-opacity: 0.45; stroke: #0284c7; stroke-width: 2.5; transition: all 0.4s ease; }
    
    .axis-text { font-size: 11px; fill: #64748b; text-anchor: middle; font-weight: 500; }
    .coord-text { font-size: 11px; fill: #0f172a; font-weight: 700; text-anchor: start; transition: all 0.4s ease; }
    .origin-text { font-size: 11px; fill: #ef4444; font-weight: 700; }
    
    .point-origin { fill: #ef4444; }
    .point-vertex { fill: #0284c7; stroke: #ffffff; stroke-width: 1.5; transition: all 0.4s ease; }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-scale" data-scale="1">× 1</button>
    <button class="btn-scale active" data-scale="2">× 2</button>
    <button class="btn-scale" data-scale="3">× 3</button>
    <div class="formula-tag" id="formulaDisplay">(x, y) → (2x, 2y)</div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 400 300" id="gridSvg">
      
      <g id="gridLines"></g>
      
      
      <line class="ray-line" x1="40" y1="260" x2="310" y2="170" />
      <line class="ray-line" x1="40" y1="260" x2="370" y2="150" />
      <line class="ray-line" x1="40" y1="260" x2="160" y2="20" />
      
      
      <polygon class="base-shape" points="75,225 145,225 75,190" />
      
      
      <polygon id="activeShape" class="scaled-shape" points="110,190 250,190 110,120" />
      
      
      <circle class="point-origin" cx="40" cy="260" r="4.5" />
      <text class="origin-text" x="35" y="278">(0,0)</text>

      
      <circle id="dotA" class="point-vertex" cx="110" cy="190" r="4.5" />
      <circle id="dotB" class="point-vertex" cx="250" cy="190" r="4.5" />
      <circle id="dotC" class="point-vertex" cx="110" cy="120" r="4.5" />

      
      <text id="lblA" class="coord-text" x="116" y="196">(2, 2)</text>
      <text id="lblB" class="coord-text" x="256" y="196">(6, 2)</text>
      <text id="lblC" class="coord-text" x="116" y="116">(2, 4)</text>
    </svg>
  </div>

  <script>
    const originX = 40;
    const originY = 260;
    const step = 35; // px per grid unit

    // Build coordinate grid: x: 0..10, y: 0..7
    const gridGroup = document.getElementById('gridLines');
    let gridHTML = '';

    for (let x = 0; x <= 10; x++) {
      const px = originX + x * step;
      const isAxis = x === 0;
      gridHTML += `<line class="${isAxis ? 'axis-line' : 'grid-line'}" x1="${px}" y1="20" x2="${px}" y2="260" />`;
      if (x > 0) gridHTML += `<text class="axis-text" x="${px}" y="275">${x}</text>`;
    }

    for (let y = 0; y <= 7; y++) {
      const py = originY - y * step;
      const isAxis = y === 0;
      gridHTML += `<line class="${isAxis ? 'axis-line' : 'grid-line'}" x1="40" y1="${py}" x2="390" y2="${py}" />`;
      if (y > 0) gridHTML += `<text class="axis-text" x="25" y="${py + 4}">${y}</text>`;
    }
    gridGroup.innerHTML = gridHTML;

    // Base triangle vertices in grid coords: A(1,1), B(3,1), C(1,2)
    const baseCoords = {
      A: { x: 1, y: 1 },
      B: { x: 3, y: 1 },
      C: { x: 1, y: 2 }
    };

    function updateScale(k) {
      const pA = { x: originX + (baseCoords.A.x * k) * step, y: originY - (baseCoords.A.y * k) * step };
      const pB = { x: originX + (baseCoords.B.x * k) * step, y: originY - (baseCoords.B.y * k) * step };
      const pC = { x: originX + (baseCoords.C.x * k) * step, y: originY - (baseCoords.C.y * k) * step };

      document.getElementById('activeShape').setAttribute('points', `${pA.x},${pA.y} ${pB.x},${pB.y} ${pC.x},${pC.y}`);

      const dotA = document.getElementById('dotA');
      const dotB = document.getElementById('dotB');
      const dotC = document.getElementById('dotC');

      dotA.setAttribute('cx', pA.x); dotA.setAttribute('cy', pA.y);
      dotB.setAttribute('cx', pB.x); dotB.setAttribute('cy', pB.y);
      dotC.setAttribute('cx', pC.x); dotC.setAttribute('cy', pC.y);

      const lblA = document.getElementById('lblA');
      const lblB = document.getElementById('lblB');
      const lblC = document.getElementById('lblC');

      lblA.setAttribute('x', pA.x + 6); lblA.setAttribute('y', pA.y + 6);
      lblA.textContent = `(${baseCoords.A.x * k}, ${baseCoords.A.y * k})`;

      lblB.setAttribute('x', pB.x + 6); lblB.setAttribute('y', pB.y + 6);
      lblB.textContent = `(${baseCoords.B.x * k}, ${baseCoords.B.y * k})`;

      lblC.setAttribute('x', pC.x + 6); lblC.setAttribute('y', pC.y - 6);
      lblC.textContent = `(${baseCoords.C.x * k}, ${baseCoords.C.y * k})`;

      document.getElementById('formulaDisplay').textContent = k === 1 ? '(x, y) × 1' : `(x, y) → (${k}x, ${k}y)`;
    }

    document.querySelectorAll('.btn-scale').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.btn-scale').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        updateScale(parseInt(btn.getAttribute('data-scale'), 10));
      });
    });
  </script>
</body>
</html>

What if we want to make a tiny shape two times as big?

To double a shape, we multiply each corner's grid steps from $(0,0)$ by 2.

The number we multiply by is called the **scale factor**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      height: 100%;
      min-height: 360px;
      user-select: none;
    }

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

    .btn {
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #f8f9fa;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn:hover {
      background: #edf2f7;
      color: #1e2945;
    }

    .btn.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

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

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

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

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

    .ray {
      stroke: #f59e0b;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
      opacity: 0.8;
    }

    .orig-shape {
      fill: rgba(34, 183, 255, 0.2);
      stroke: #0284c7;
      stroke-width: 2;
    }

    .scaled-shape {
      fill: rgba(16, 185, 129, 0.25);
      stroke: #10b981;
      stroke-width: 2.5;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pt-orig {
      fill: #0284c7;
    }

    .pt-scaled {
      fill: #10b981;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .axis-label {
      font-size: 11px;
      fill: #94a3b8;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .coord-badge {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
    }

    .badge {
      padding: 4px 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #334155;
    }

    .badge span {
      color: #10b981;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" onclick="setScale(1)">×1</button>
    <button class="btn active" onclick="setScale(2)">×2</button>
    <button class="btn" onclick="setScale(3)">×3</button>
  </div>

  <div class="graph-container">
    <svg viewBox="-30 -10 320 320" id="gridSvg">
      
      <g id="grid"></g>

      
      <line class="ray" x1="0" y1="280" x2="300" y2="-20" />
      <line class="ray" x1="0" y1="280" x2="300" y2="130" />
      <line class="ray" x1="0" y1="280" x2="150" y2="-20" />

      
      <polygon id="origPoly" class="orig-shape" />
      <polygon id="scaledPoly" class="scaled-shape" />

      
      <circle id="sA" class="pt-scaled" r="4.5" />
      <circle id="sB" class="pt-scaled" r="4.5" />
      <circle id="sC" class="pt-scaled" r="4.5" />

      <circle id="oA" class="pt-orig" r="3.5" />
      <circle id="oB" class="pt-orig" r="3.5" />
      <circle id="oC" class="pt-orig" r="3.5" />

      
      <circle cx="0" cy="280" r="4" fill="#f59e0b" />
      <text x="-10" y="292" class="axis-label" style="fill: #f59e0b; font-weight: 700;">(0,0)</text>
    </svg>
  </div>

  <div class="coord-badge" id="badgeContainer">
    <div class="badge" id="bA">(1,1) → <span>(2,2)</span></div>
    <div class="badge" id="bB">(2,1) → <span>(4,2)</span></div>
    <div class="badge" id="bC">(1,2) → <span>(2,4)</span></div>
  </div>

  <script>
    const ORIGIN_X = 0;
    const ORIGIN_Y = 280;
    const UNIT = 40; // 40px per grid unit

    const origPts = [
      { x: 1, y: 1 },
      { x: 2, y: 1 },
      { x: 1, y: 2 }
    ];

    function toSvg(x, y) {
      return {
        cx: ORIGIN_X + x * UNIT,
        cy: ORIGIN_Y - y * UNIT
      };
    }

    // Build Grid
    const gridG = document.getElementById('grid');
    for (let i = 0; i <= 7; i++) {
      const pos = i * UNIT;
      // Vertical
      const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vLine.setAttribute('class', i === 0 ? 'axis' : 'grid-line');
      vLine.setAttribute('x1', pos);
      vLine.setAttribute('y1', 0);
      vLine.setAttribute('x2', pos);
      vLine.setAttribute('y2', 280);
      gridG.appendChild(vLine);

      // Horizontal
      const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      hLine.setAttribute('class', i === 0 ? 'axis' : 'grid-line');
      hLine.setAttribute('x1', 0);
      hLine.setAttribute('y1', 280 - pos);
      hLine.setAttribute('x2', 280);
      hLine.setAttribute('y2', 280 - pos);
      gridG.appendChild(hLine);

      // Labels
      if (i > 0) {
        const xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        xText.setAttribute('x', pos);
        xText.setAttribute('y', 294);
        xText.setAttribute('class', 'axis-label');
        xText.textContent = i;
        gridG.appendChild(xText);

        const yText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        yText.setAttribute('x', -12);
        yText.setAttribute('y', 280 - pos);
        yText.setAttribute('class', 'axis-label');
        yText.textContent = i;
        gridG.appendChild(yText);
      }
    }

    // Set Original Polygon
    const origSvgPts = origPts.map(p => toSvg(p.x, p.y));
    document.getElementById('origPoly').setAttribute(
      'points',
      origSvgPts.map(p => `${p.cx},${p.cy}`).join(' ')
    );

    ['oA', 'oB', 'oC'].forEach((id, idx) => {
      const el = document.getElementById(id);
      el.setAttribute('cx', origSvgPts[idx].cx);
      el.setAttribute('cy', origSvgPts[idx].cy);
    });

    function setScale(k) {
      document.querySelectorAll('.btn').forEach((b, i) => {
        b.classList.toggle('active', (i + 1) === k);
      });

      const scaledPts = origPts.map(p => ({ x: p.x * k, y: p.y * k }));
      const scaledSvg = scaledPts.map(p => toSvg(p.x, p.y));

      document.getElementById('scaledPoly').setAttribute(
        'points',
        scaledSvg.map(p => `${p.cx},${p.cy}`).join(' ')
      );

      ['sA', 'sB', 'sC'].forEach((id, idx) => {
        const el = document.getElementById(id);
        el.setAttribute('cx', scaledSvg[idx].cx);
        el.setAttribute('cy', scaledSvg[idx].cy);
      });

      // Update Badges
      const labels = ['bA', 'bB', 'bC'];
      origPts.forEach((p, idx) => {
        const sp = scaledPts[idx];
        document.getElementById(labels[idx]).innerHTML = 
          `(${p.x},${p.y}) × ${k} → <span>(${sp.x},${sp.y})</span>`;
      });
    }

    // Initialize at Scale Factor 2
    setScale(2);
  </script>
</body>
</html>

Let's check the corner $(1, 1)$: multiplying both numbers by 2 gives $(2, 2)$.

The corner $(3, 1)$ becomes $(6, 2)$, making the new shape twice as wide and twice as tall.

Can a scale factor make shapes smaller instead of larger?

When the scale factor is a fraction like $\frac{1}{2}$, we cut every grid distance in half.

This shrinks the shape toward the center point $(0,0)$ into a smaller **reduction**.

<!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>Reduction from Origin</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .svg-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .btn:hover {
      opacity: 0.85;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .coord-tag {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
      transition: all 0.4s ease;
    }
    .math-pill {
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      color: #0284c7;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .poly-shape {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="math-pill" id="pill-info">
    <span>(4, 6) × ½ = (2, 3)</span>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 360 360" aria-label="Coordinate grid showing shape reduction from origin">
      <defs>
        
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" stroke-width="1.5"/>
        </pattern>
      </defs>

      
      <rect x="30" y="10" width="320" height="320" fill="url(#grid)" />

      
      <line x1="40" y1="10" x2="40" y2="330" stroke="#cbd5e1" stroke-width="2"/>
      <line x1="30" y1="320" x2="350" y2="320" stroke="#cbd5e1" stroke-width="2"/>

      
      
      <text x="40" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">0</text>
      <text x="80" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">1</text>
      <text x="120" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">2</text>
      <text x="160" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">3</text>
      <text x="200" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">4</text>
      <text x="240" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">5</text>
      <text x="280" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">6</text>
      <text x="320" y="336" font-size="11" fill="#94a3b8" text-anchor="middle">7</text>

      
      <text x="28" y="284" font-size="11" fill="#94a3b8" text-anchor="end">1</text>
      <text x="28" y="244" font-size="11" fill="#94a3b8" text-anchor="end">2</text>
      <text x="28" y="204" font-size="11" fill="#94a3b8" text-anchor="end">3</text>
      <text x="28" y="164" font-size="11" fill="#94a3b8" text-anchor="end">4</text>
      <text x="28" y="124" font-size="11" fill="#94a3b8" text-anchor="end">5</text>
      <text x="28" y="84" font-size="11" fill="#94a3b8" text-anchor="end">6</text>
      <text x="28" y="44" font-size="11" fill="#94a3b8" text-anchor="end">7</text>

      
      
      <line x1="40" y1="320" x2="226" y2="40" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="4,4"/>
      
      <line x1="40" y1="320" x2="320" y2="40" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="4,4"/>
      
      <line x1="40" y1="320" x2="350" y2="216" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="4,4"/>

      
      <circle cx="40" cy="320" r="4.5" fill="#8b5cf6"/>
      <text x="44" y="312" font-size="11" font-weight="bold" fill="#8b5cf6">(0,0)</text>

      
      <polygon id="ghost-shape" points="120,240 200,80 280,240" fill="rgba(2, 132, 199, 0.06)" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,4"/>

      
      <polygon id="active-shape" class="poly-shape" points="80,280 120,200 160,280" fill="rgba(2, 132, 199, 0.25)" stroke="#0284c7" stroke-width="2.5"/>

      
      <circle id="pt-b" class="poly-shape" cx="120" cy="200" r="5" fill="#0284c7"/>
      <circle id="pt-a" class="poly-shape" cx="80" cy="280" r="4" fill="#0284c7"/>
      <circle id="pt-c" class="poly-shape" cx="160" cy="280" r="4" fill="#0284c7"/>

      
      <text id="lbl-b" class="coord-tag" x="120" y="190" text-anchor="middle">(2, 3)</text>
      <text id="lbl-a" class="coord-tag" x="80" y="298" text-anchor="middle">(1, 1)</text>
      <text id="lbl-c" class="coord-tag" x="160" y="298" text-anchor="middle">(3, 1)</text>
    </svg>
  </div>

  <div class="controls">
    <button class="btn active" id="btn-half" onclick="setMode('half')">Scale × ½ (Shrink)</button>
    <button class="btn" id="btn-orig" onclick="setMode('orig')">Scale × 1 (Original)</button>
  </div>
</div>

<script>
  // Math mapping: Grid units (x, y) to SVG (cx, cy)
  // Grid X: 0 -> 40, 1 unit = 40px
  // Grid Y: 0 -> 320, 1 unit = 40px (upwards)
  function toSvg(x, y) {
    return { cx: 40 + x * 40, cy: 320 - y * 40 };
  }

  const states = {
    half: {
      a: { x: 1, y: 1 },
      b: { x: 2, y: 3 },
      c: { x: 3, y: 1 },
      info: "(4, 6) × ½ = (2, 3)"
    },
    orig: {
      a: { x: 2, y: 2 },
      b: { x: 4, y: 6 },
      c: { x: 6, y: 2 },
      info: "Original Shape (4, 6)"
    }
  };

  function setMode(mode) {
    const data = states[mode];
    
    // Update active button state
    document.getElementById('btn-half').classList.toggle('active', mode === 'half');
    document.getElementById('btn-orig').classList.toggle('active', mode === 'orig');

    // Calculate positions
    const posA = toSvg(data.a.x, data.a.y);
    const posB = toSvg(data.b.x, data.b.y);
    const posC = toSvg(data.c.x, data.c.y);

    // Update shape polygon
    const poly = document.getElementById('active-shape');
    poly.setAttribute('points', `${posA.cx},${posA.cy} ${posB.cx},${posB.cy} ${posC.cx},${posC.cy}`);

    // Update point circles
    const ptA = document.getElementById('pt-a');
    const ptB = document.getElementById('pt-b');
    const ptC = document.getElementById('pt-c');
    ptA.setAttribute('cx', posA.cx);
    ptA.setAttribute('cy', posA.cy);
    ptB.setAttribute('cx', posB.cx);
    ptB.setAttribute('cy', posB.cy);
    ptC.setAttribute('cx', posC.cx);
    ptC.setAttribute('cy', posC.cy);

    // Update labels
    const lblA = document.getElementById('lbl-a');
    const lblB = document.getElementById('lbl-b');
    const lblC = document.getElementById('lbl-c');
    
    lblA.setAttribute('x', posA.cx);
    lblA.setAttribute('y', posA.cy + 18);
    lblA.textContent = `(${data.a.x}, ${data.a.y})`;

    lblB.setAttribute('x', posB.cx);
    lblB.setAttribute('y', posB.cy - 10);
    lblB.textContent = `(${data.b.x}, ${data.b.y})`;

    lblC.setAttribute('x', posC.cx);
    lblC.setAttribute('y', posC.cy + 18);
    lblC.textContent = `(${data.c.x}, ${data.c.y})`;

    // Update text banner
    document.getElementById('pill-info').innerHTML = `<span>${data.info}</span>`;
  }
</script>

</body>
</html>

A point at $(4, 6)$ becomes $(2, 3)$ because half of 4 is 2 and half of 6 is 3.

A common trap is adding to the coordinates instead of multiplying — always multiply every number by the scale factor!

Try taking a dot at $(3, 2)$ and multiplying it by a scale factor of 3 — where does your new dot land?

math

Enlarging Shapes from the Origin with Positive Scale Factors. Perform enlargements and reductions on coordinate grids centered at (0,0).

Dilating Points and Shapes from the Origin

Transformations - Enlargements and Scale Factors

Dilations: Graph the Image Centered at the Origin

Scottish Curriculum for Excellence Fourth Level (MTH 4-18b) focuses on developing algebraic and geometric reasoning on 4-quadrant coordinate grids. Effective pedagogical delivery begins with dynamic geometric software (e.g., GeoGebra) to illustrate ray-lines connecting $(0,0)$ to shape vertices before formalising the algebraic rule $(x, y) \to (kx, ky)$. Explicit contrast between integer scale factors ($k > 1$) and fractional scale factors ($0 < k < 1$) prevents the misconception that enlargement only makes shapes larger. Emphasise negative number multiplication when points lie in Quadrants II, III, and IV.

Enlarging Shapes from the Origin with Positive Scale Factors

The Center Dot at (0,0)

Growing by a Scale Factor