Implement Algebra Tiles

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

// ==========================================
// 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

1. 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

2. Move Existing Tiles

   • Click and drag any placed tile
   • Move to reposition
   • Drag outside workspace to remove
   • Real-time cancellation updates

3. 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)

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)

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)

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)

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

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

// 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