An interactive web-based implementation of Truchet tiling - a mathematical pattern system that creates complex visual designs through simple tile rotations.
This project brings the fascinating world of Truchet tiles to life through web technologies. Truchet tiling is a method of creating complex, maze-like patterns using simple tiles with fixed designs that can be rotated. In this implementation, each tile contains diagonal line segments that, when arranged and rotated properly, create intricate visual patterns that emerge from simplicity.
- Dynamic Pattern Generation: Automatically creates a responsive grid of Truchet tiles that adapts to any screen size
- Interactive Rotations: Hover over tiles to rotate them individually
- Pattern Presets: Click anywhere to cycle through different pattern arrangements
- Autonomous Animation: Tiles randomly rotate at varying intervals when not interacting with them
- Responsive Design: Automatically adjusts to window resizing
For interaction designers, UX professionals, creative technologists, and HCI researchers, Truchet tiles represent a fascinating intersection of:
- Emergent Complexity: Simple rules creating complex visual outcomes—a fundamental principle in both design and computation
- User Agency: The delicate balance between algorithmic generation and user control
- Perceptual Psychology: How humans perceive patterns and find meaning in visual arrangements
- Interactive Art: Blurring the line between viewer and creator
This project is built with vanilla JavaScript, CSS, and HTML, demonstrating that complex interactive experiences can be created without heavy frameworks.
- CSS Gradients: Uses radial gradients to create the distinctive line patterns in each tile
- DOM Manipulation: Dynamically generates the grid of tiles based on viewport dimensions
- CSS Transforms: Handles tile rotations with smooth transitions
- Event Handling: Manages user interactions and automatic animations
- Responsive Design: Adapts to different screen sizes through JavaScript recalculation
- Grid Generation: The application calculates how many tiles are needed to fill the viewport
- Tile Creation: Each tile contains two diagonal lines created using CSS radial gradients
- Initial Pattern: Tiles are arranged in an alternating pattern by default
- Interaction Handling:
- Hovering over a tile triggers its rotation
- Clicking anywhere cycles through different pattern arrangements
- Moving away from the page enables automatic random rotations
# Clone the repository
git clone https://github.com/yourusername/truchet-tiles.git
# Navigate to the project directory
cd truchet-tiles
# Open in a browser
open index.htmlNo build tools or dependencies required—just pure web technologies!
You can easily customize the appearance and behavior by modifying a few key variables:
elementScalein app.js: Controls the size of individual tiles--bgand--clrin style.css: Change the background and line colors--tcin style.css: Adjust the thickness of the lines
This implementation can serve as:
- A teaching tool for explaining emergent complexity in design systems
- A prototyping platform for exploring pattern generation
- A research instrument for studying perceptual organization and user interaction
- An inspiration for generative design approaches
- Implementing additional tile designs beyond the classic diagonal lines
- Adding color variation capabilities
- Exploring non-grid arrangements (hexagonal, triangular)
- Creating an export function for generated patterns
- Adding touch optimization for mobile experiences
MIT License - See LICENSE file for details.
This project draws inspiration from the mathematical work of Sébastien Truchet (1657-1729), who first studied these tiling patterns, and the modern explorations of algorithms and complexity by artists and designers working at the intersection of math and visual design.