Implement Dynamic Dilation

Use this skill when creating animations where students:

• Explore dilations centered at a point with interactive scale factors
• Understand how scale factors affect shape size and position
• Compare original and dilated figures
• Visualize dilation rays from center to vertices

When to Use This Pattern

Perfect for:

• "Show the dilation of polygon ABCD centered at point O with scale factor 2"
• Interactive exploration of scale factors (including fractions)
• Comparing original and dilated figures
• Understanding similarity through transformations
• Showing dilation rays and transformation paths

Not suitable for:

• Static dilation diagrams (use basic p5 animation)
• Rotations or reflections (different transformation types)
• Non-rigid transformations

Technology Stack

Uses p5.js for the interactive coordinate plane because:

• Real-time interactive slider control
• Dynamic rendering of dilated shapes
• Built-in animation and mouse/keyboard handling
• Easy geometric calculations

Configuration Options

Basic Configuration (from dilation.ts)

// ==========================================
// CONFIGURATION - Easily modifiable
// ==========================================

// Polygon vertices (any shape)
let points = [
  { x: 10, y: 10, label: 'P' },
  { x: 8, y: 8, label: 'Q' },
  { x: 12, y: 6, label: 'R' },
  { x: 14, y: 8, label: 'S' }
];

// Center of dilation
let center = { x: 10, y: 8, label: 'O' };

// Scale factors available
let scaleFactors = [
  { value: 1/3, label: '1/3' },
  { value: 1/2, label: '1/2' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' }
];

// Current scale factor index
let scaleIndex = 3; // Start at scale factor 2

// Toggle for showing dilation rays
let showRays = true;

// Toggle for showing grid and axes
let showGrid = true;

// Axis ranges
let xMin = 0, xMax = 20;
let yMin = 0, yMax = 15;

// Colors
let originalColor = [59, 130, 246]; // Blue
let dilatedColor = [239, 68, 68];   // Red
let gridColor = 220;
let axisColor = 100;

Features

Interactive Controls

1. Slider Control: Click/drag slider to change scale factor
2. Keyboard Controls:
   • Arrow keys (left/right) to adjust scale factor
   • R to reset to scale factor 1
   • D to toggle dilation rays on/off
   • G to toggle grid and axes on/off

Visual Elements

• Coordinate grid with customizable axis ranges
• Original polygon (blue) with vertex labels
• Dilated polygon (red) with primed labels (e.g., P')
• Dilation rays (black dotted lines) extending from center through vertices
• Center point marked with a black dot and label
• Interactive slider with scale factor indicators
• Legend showing original, dilated, and center
• Toggle status showing current state of rays and grid

Core Functions

Coordinate Transformation

function coordToPixel(x, y, plotWidth, plotHeight) {
  let px = padding.left + ((x - xMin) / (xMax - xMin)) * plotWidth;
  let py = padding.top + ((yMax - y) / (yMax - yMin)) * plotHeight;
  return { x: px, y: py };
}

Dilation Calculation

// Calculate dilated points
let dilatedPoints = points.map(p => ({
  x: center.x + (p.x - center.x) * scaleFactor,
  y: center.y + (p.y - center.y) * scaleFactor,
  label: p.label + "'"
}));

Drawing Dilation Rays

// Draw dilation rays (from center, extending outward)
if (showRays) {
  stroke(0);
  strokeWeight(2);
  drawingContext.setLineDash([4, 4]);
  for (let i = 0; i < points.length; i++) {
    let centerPixelPos = coordToPixel(center.x, center.y, plotWidth, plotHeight);
    let pointPixel = coordToPixel(points[i].x, points[i].y, plotWidth, plotHeight);

    // Calculate direction vector
    let dx = pointPixel.x - centerPixelPos.x;
    let dy = pointPixel.y - centerPixelPos.y;

    // Ray starts at center and extends far in the direction of the point
    let scale = 1000;
    let x2 = centerPixelPos.x + dx * scale;
    let y2 = centerPixelPos.y + dy * scale;

    line(centerPixelPos.x, centerPixelPos.y, x2, y2);
  }
  drawingContext.setLineDash([]);
}

Common Patterns

Pattern 1: Simple Quadrilateral Dilation

let points = [
  { x: 2, y: 2, label: 'A' },
  { x: 4, y: 2, label: 'B' },
  { x: 4, y: 4, label: 'C' },
  { x: 2, y: 4, label: 'D' }
];

let center = { x: 0, y: 0, label: 'O' };

let scaleFactors = [
  { value: 1/2, label: '1/2' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' }
];

Pattern 2: Triangle Dilation (Center at Vertex)

let points = [
  { x: 2, y: 8, label: 'A' },
  { x: 2, y: 4, label: 'B' },
  { x: 6, y: 4, label: 'C' }
];

let center = { x: 6, y: 4, label: 'C' };  // Center at vertex C

let scaleFactors = [
  { value: 1/2, label: '1/2' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' }
];

Pattern 3: Dilation with Negative Coordinates

let points = [
  { x: 0, y: 0, label: 'A' },
  { x: 2, y: 2, label: 'B' },
  { x: 6, y: 1, label: 'C' },
  { x: 4, y: -1, label: 'D' }
];

let center = { x: 4, y: -1, label: 'O' };

// Adjust axis ranges to accommodate negative values
let xMin = -5, xMax = 25;
let yMin = -10, yMax = 15;

Customization Points

1. Polygon Shape

Modify the points array to create any polygon. Points should be in order to form a closed shape.

2. Center of Dilation

Set center to any point. Common choices:

• Origin (0, 0)
• One of the polygon vertices
• A point inside the polygon
• A point outside the polygon

3. Scale Factors

Customize the scaleFactors array with any positive values:

• Fractions (e.g., 1/3, 1/2) for reductions
• Whole numbers (e.g., 2, 3, 4) for enlargements
• Include 1 to show the original shape

4. Axis Ranges

Adjust xMin, xMax, yMin, yMax to fit your shape and dilations.

5. Colors

Customize colors for:

• originalColor: Color of the original polygon
• dilatedColor: Color of the dilated polygon
• gridColor: Color of grid lines
• axisColor: Color of coordinate axes

6. Default States

• scaleIndex: Starting scale factor (index in scaleFactors array)
• showRays: Whether to show dilation rays by default
• showGrid: Whether to show grid by default

Implementation Checklist

• Copied base dilation animation code
• Updated points array for target polygon
• Set center coordinates and label
• Configured scaleFactors array
• Adjusted axis ranges (xMin, xMax, yMin, yMax)
• Customized colors if needed
• Set appropriate default scale factor index
• Tested slider interaction
• Tested keyboard controls (arrows, R, D, G)
• Verified dilation rays extend correctly
• Verified polygon labels (original and dilated)
• Checked that dilations calculate correctly
• Tested grid toggle
• Tested rays toggle

Tips

1. Vertex Order: List points in order (clockwise or counter-clockwise) for proper polygon rendering
2. Axis Range: Ensure axis ranges accommodate both original and largest dilated figure
3. Center Choice: Different centers create different visual effects - experiment!
4. Scale Factor 1: Always include scale factor 1 to show original/dilated overlap
5. Labels: Use single letters (A, B, C...) for clean vertex labels
6. Grid Spacing: Adjust grid scale if coordinates are very large or very small
7. Ray Visibility: Rays help visualize the transformation direction
8. Color Contrast: Use contrasting colors for original vs dilated polygons

Limitations & Notes

• Canvas Size: Always use 600x600 as specified in p5-format.md
• Positive Scale Factors Only: No negative scale factors (would flip the figure)
• No Animation: Scale changes are instant, not animated
• Simple Polygons: Works best with convex polygons, may have visual issues with complex self-intersecting shapes

Educational Applications

• Understanding Scale Factors:

  • Scale factor > 1 → enlargement
  • Scale factor < 1 → reduction
  • Scale factor = 1 → same size

• Similarity: Dilations preserve shape (angles) but change size (side lengths)

• Center Effects: Explore how center location affects the dilated figure's position

• Coordinate Relationships: See how each coordinate changes based on center and scale factor

Related Animation Types

• implement-dynamic-graph-question - For coordinate plane line drawing
• Other geometry animations (rotations, reflections) - To be added

File Location

Base implementation: src/app/animations/examples/geometry/dilation.ts

Example Usage in create-p5-animation Skill

When asked to create a dilation animation:

1. Use this animation-type as the scaffold
2. Modify the configuration section for the specific problem
3. Keep all the core functionality (slider, toggles, rendering)
4. Adjust only the configurable parameters