Implement Algebra Tiles

Use this skill when creating animations where students:

Drag algebra tiles (x, -x, 1, -1) onto a workspace
Combine tiles to model algebraic expressions
See visual cancellation when opposite tiles are placed together
Explore the zero principle (x + (-x) = 0)

When to Use This Pattern

Perfect for:

"Model the expression 2x - 3 using algebra tiles"
Interactive equation solving with manipulatives
Understanding additive inverses and the zero principle
Simplifying algebraic expressions visually
Combining like terms with visual models

Not suitable for:

Multiplication of algebraic expressions (need x² tiles)
Complex polynomial operations (use specialized tools)
Static tile diagrams (use basic p5 animation)

Technology Stack

Uses p5.js for the interactive tiles because:

Real-time drag-and-drop interaction
Dynamic collision detection for linking
Mouse and touch event handling
Smooth visual feedback

Configuration Options

Basic Configuration

javascript

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

// Tile types configuration
let tileConfig = {
  x: {
    width: 80,
    height: 60,
    color: [102, 178, 102],      // Green for positive x
    label: 'x',
    value: 'x',
    sign: 'positive'
  },
  negX: {
    width: 80,
    height: 60,
    color: [230, 57, 70],        // Red for negative x
    label: '-x',
    value: 'x',
    sign: 'negative'
  },
  one: {
    width: 50,
    height: 50,
    color: [255, 193, 94],       // Yellow/gold for positive 1
    label: '1',
    value: '1',
    sign: 'positive'
  },
  negOne: {
    width: 50,
    height: 50,
    color: [230, 57, 70],        // Red for negative 1
    label: '-1',
    value: '1',
    sign: 'negative'
  }
};

// Palette layout (where tiles can be dragged from)
let paletteConfig = {
  x: 80,
  y: 100,
  spacing: 100,
  label: 'Drag tiles onto canvas:'
};

// Canvas area (drop zone)
let canvasConfig = {
  x: 50,
  y: 250,
  w: 500,
  h: 300,
  backgroundColor: [245, 245, 245],
  borderColor: [180, 180, 180],
  label: 'Workspace'
};

// Snap & cancellation settings
let cancelConfig = {
  snapDistance: 60,              // How close tiles need to be to snap together
  cancelledColor: [200, 200, 200], // Light grey color for snapped tiles
  snapGap: 2                     // Small gap between snapped tiles
};

// Visual settings
let visualConfig = {
  showInstructions: true,
  highlightOnHover: true,
  showEquation: true
};

Features

Interactive Controls

Drag Tiles from Palette
- Drag x, -x, 1, or -1 from top palette
- Release on workspace to place
- Can create unlimited copies
- Each tile is independent
Move Existing Tiles
- Click and drag any placed tile
- Move to reposition
- Drag outside workspace to remove
- Real-time cancellation updates
Automatic Snap & Cancellation
- When opposite tiles are dragged close, they snap together
- x and -x snap and cancel each other
- 1 and -1 snap and cancel each other
- Snapped tiles physically move to align side-by-side
- Both tiles turn light grey when snapped
- Cancellations update as tiles move

Visual Elements

Palette area with four tile types (x, -x, 1, -1)
Workspace for placing and arranging tiles
Snap indicators (tiles physically align when cancelled)
Cancellation visuals (light grey color for snapped pairs)
Equation display showing simplified expression
Hover effects for interactive feedback
Instructions for user guidance

Common Patterns

Pattern 1: Basic Manipulative (All Four Tiles)

javascript

let tileConfig = {
  x: {
    width: 80, height: 60,
    color: [102, 178, 102],
    label: 'x',
    value: 'x',
    sign: 'positive'
  },
  negX: {
    width: 80, height: 60,
    color: [230, 57, 70],
    label: '-x',
    value: 'x',
    sign: 'negative'
  },
  one: {
    width: 50, height: 50,
    color: [255, 193, 94],
    label: '1',
    value: '1',
    sign: 'positive'
  },
  negOne: {
    width: 50, height: 50,
    color: [230, 57, 70],
    label: '-1',
    value: '1',
    sign: 'negative'
  }
};

let cancelConfig = {
  snapDistance: 60,
  cancelledColor: [200, 200, 200],
  snapGap: 2
};

Pattern 2: Variables Only (x and -x)

javascript

let tileConfig = {
  x: {
    width: 100, height: 70,
    color: [102, 178, 102],
    label: 'x',
    value: 'x',
    sign: 'positive'
  },
  negX: {
    width: 100, height: 70,
    color: [230, 57, 70],
    label: '-x',
    value: 'x',
    sign: 'negative'
  }
  // Only include x and -x, omit 1 and -1
};

let paletteConfig = {
  x: 150,
  y: 100,
  spacing: 150,
  label: 'Drag variable tiles:'
};

Pattern 3: Constants Only (1 and -1)

javascript

let tileConfig = {
  one: {
    width: 60, height: 60,
    color: [255, 193, 94],
    label: '1',
    value: '1',
    sign: 'positive'
  },
  negOne: {
    width: 60, height: 60,
    color: [230, 57, 70],
    label: '-1',
    value: '1',
    sign: 'negative'
  }
  // Only include 1 and -1, omit x and -x
};

let paletteConfig = {
  x: 200,
  y: 100,
  spacing: 120,
  label: 'Drag constant tiles:'
};

Pattern 4: Larger Snap Distance (Easier Cancellation)

javascript

let cancelConfig = {
  snapDistance: 80,              // Larger distance for easier cancellation
  cancelledColor: [150, 150, 150],
  showCancelledLabel: true,
  showLinkLine: true             // Show dashed line between cancelled pairs
};

Mouse Interactions

Dragging from Palette

Mouse down on tile → create new copy
Move mouse → tile follows cursor
Release over workspace → place tile
Release elsewhere → discard

Moving Placed Tiles

Mouse down on placed tile → start drag
Move mouse → tile follows cursor
Release on workspace → update position
Release outside workspace → remove tile

Snap & Cancellation Detection

On every mouse release → check all pairs
Calculate distance between tile centers
If distance < snapDistance and opposite types → snap together
Snapped tiles physically align side-by-side
Both tiles turn light grey to indicate cancellation

Drawing Logic

Snap & Cancellation Algorithm

javascript

function updateCancellations() {
  // Reset all cancellations
  placedTiles.forEach(tile => {
    tile.isCancelled = false;
    tile.linkedTo = null;
  });

  // Check each pair of tiles
  for (let i = 0; i < placedTiles.length; i++) {
    for (let j = i + 1; j < placedTiles.length; j++) {
      let tile1 = placedTiles[i];
      let tile2 = placedTiles[j];

      // Skip if either is already cancelled
      if (tile1.isCancelled || tile2.isCancelled) continue;

      // Check if they can cancel (same value, opposite signs)
      if (tile1.config.value === tile2.config.value &&
          tile1.config.sign !== tile2.config.sign) {

        // Check if they're close enough
        let distance = dist(
          tile1.x + tile1.config.width/2,
          tile1.y + tile1.config.height/2,
          tile2.x + tile2.config.width/2,
          tile2.y + tile2.config.height/2
        );

        if (distance < cancelConfig.snapDistance) {
          // Mark as cancelled
          tile1.isCancelled = true;
          tile2.isCancelled = true;
          tile1.linkedTo = tile2;
          tile2.linkedTo = tile1;

          // SNAP: Position tiles side-by-side
          // Calculate midpoint between the two tiles
          let midX = (tile1.x + tile2.x) / 2;
          let midY = (tile1.y + tile2.y) / 2;

          // Position tiles side-by-side at the midpoint
          let gap = 2; // Small gap between snapped tiles
          tile1.x = midX - tile1.config.width / 2 - gap / 2;
          tile2.x = midX + tile2.config.width / 2 + gap / 2 - tile2.config.width;
          tile1.y = midY;
          tile2.y = midY;
        }
      }
    }
  }
}

Equation Display

Count tiles by type (exclude cancelled)
Group like terms
Display simplified expression
Example: "2x - 3" or "x + (-x) + 1" → "1"

Code Structure

javascript

// State management
let placedTiles = [];          // Tiles on workspace
let draggedTile = null;        // Currently dragged tile
let nextTileId = 0;            // ID counter
let hoveredPaletteTile = null; // Palette hover state

function setup() {
  createCanvas(600, 600);
  textFont('Arial');
}

function draw() {
  background(255);

  drawPalette();              // Tile sources
  drawCanvasArea();           // Workspace
  drawPlacedTiles();          // All placed tiles
  drawEquation();             // Simplified expression
  drawInstructions();         // Helper text

  if (draggedTile) {
    drawDraggedTile();        // Tile following cursor
  }
}

function mousePressed() {
  checkPlacedTileClick();     // Start dragging existing tile
  checkPaletteClick();        // Create new tile from palette
}

function mouseReleased() {
  handleTileDrop();           // Place or remove tile
  draggedTile = null;
}

function mouseMoved() {
  updateHoverState();         // Visual feedback
}

Implementation Checklist

Create palette area with all four tile types
Implement drag from palette (creates new tiles)
Implement drag of placed tiles
Add workspace area with visual boundaries
Implement drop detection (in/out of workspace)
Create snap & cancellation detection algorithm
Calculate distance between tile centers
Snap opposite tiles together when close enough
Position snapped tiles side-by-side at midpoint
Apply light grey color to snapped/cancelled tiles
Count non-cancelled tiles by type
Display simplified equation
Add hover effects for palette tiles
Add hover effects for placed tiles
Show instructions and labels
Test all drag and drop scenarios
Verify snap and cancellation logic works correctly

Tips and Best Practices

Snap & Cancellation Logic

Check for snap opportunities on mouse release
Reset all cancellation states before checking
Use center points for distance calculation
Only pair each tile once (skip already cancelled)
Calculate midpoint for snap positioning
Align tiles side-by-side at the midpoint

Visual Feedback

Use distinct colors for positive/negative
Make snapped tiles clearly different (light grey)
Tiles physically move together when snapped
Provide hover feedback on interactive elements

User Experience

Make snap distance reasonable (not too small/large)
Snap provides satisfying visual feedback
Allow removing tiles by dragging outside
Update equation in real-time
Provide clear instructions

Performance

Limit number of tiles if performance is an issue
Use efficient distance calculations
Only redraw when state changes

Color Guidelines

Standard algebra tile colors:

Positive x: Green [102, 178, 102]
Negative x: Red [230, 57, 70]
Positive 1: Yellow/Gold [255, 193, 94]
Negative 1: Red [230, 57, 70]
Snapped/Cancelled: Light Grey [200, 200, 200]

Alternative color schemes:

Traditional: Yellow (positive), Red (negative)
High contrast: Blue (positive), Orange (negative)
Colorblind-friendly: Use patterns/textures in addition to color

Related Patterns

Dynamic Tape Diagram - For equation building
Drag and Drop Pattern - Core interaction
Color Palette - Standard colors

Examples

See snippets/algebra-tiles.ts for complete working code.

Common use cases in src/app/animations/examples/algebraTiles/:

Simple manipulative (all four tiles)
Variables only (x and -x)
Equation modeling
Zero principle exploration

Educational Notes

The Zero Principle

When a positive and negative tile of the same value are paired:

x + (-x) = 0
1 + (-1) = 0 This is the foundation of:
Solving equations (adding/subtracting from both sides)
Simplifying expressions
Understanding additive inverses

Modeling Expressions

2x + 3: Two x tiles, three 1 tiles
x - 5: One x tile, five -1 tiles
-3x + 2: Three -x tiles, two 1 tiles

Solving Equations

Model both sides with tiles
Add opposite tiles to isolate variable
Count remaining tiles to find solution

Last Updated: November 2024 Maintained By: AI Coaching Platform Team

Search AI Tools

Implement Algebra Tiles

Install this agent skill to your Project

SKILL.md

Implement Algebra Tiles

When to Use This Pattern

Technology Stack

Configuration Options

Basic Configuration

Features

Interactive Controls

Visual Elements

Common Patterns

Pattern 1: Basic Manipulative (All Four Tiles)

Pattern 2: Variables Only (x and -x)

Pattern 3: Constants Only (1 and -1)

Pattern 4: Larger Snap Distance (Easier Cancellation)

Mouse Interactions

Dragging from Palette

Moving Placed Tiles

Snap & Cancellation Detection

Drawing Logic

Snap & Cancellation Algorithm

Equation Display

Code Structure

Implementation Checklist

Tips and Best Practices

Snap & Cancellation Logic

Visual Feedback

User Experience

Performance

Color Guidelines

Related Patterns

Examples

Educational Notes

The Zero Principle

Modeling Expressions

Solving Equations