An interactive web application for practicing flagstone arrangement and pathway design. Perfect for landscapers, homeowners, and anyone interested in learning stone placement techniques.
- Interactive Stone Palette: Click stones from the palette to add them to your workspace
- Drag & Drop: Move stones around with intuitive mouse controls
- Rotation & Flipping: Precise positioning with rotation and flip controls
- Grid System: Optional grid overlay with snap-to-grid functionality
- Realistic Stone Shapes: Procedurally generated irregular stone shapes with natural textures
- Multiple Stone Types: Variety of stone shapes and colors to choose from
- Left Click: Select and drag stones
- Palette Click: Add new stones from the palette to workspace
- R: Rotate selected stone clockwise
- E: Rotate selected stone counter-clockwise
- F: Flip selected stone
- Delete/Backspace: Delete selected stone
- Rotate ↻/↺: Rotate selected stone in 15° increments
- Flip: Mirror the selected stone horizontally
- Clear All: Remove all stones from workspace
- New Random Stones: Generate new random stones
- Delete Selected: Remove the currently selected stone
- Toggle Grid: Show/hide alignment grid
- Toggle Snap: Enable/disable snap-to-grid positioning
- Open
index.htmlin your web browser - Click stones from the palette at the top to add them to your workspace
- Drag stones to arrange them into patterns
- Use the controls to rotate and flip stones for perfect placement
- Experiment with different arrangements to create beautiful pathways!
Visit the live demo at: https://pdennis.github.io/flagstone-simulator
- Pure HTML5, CSS3, and JavaScript - no external dependencies
- Canvas-based rendering for smooth interactions
- Responsive design works on desktop and tablet devices
- Procedural stone generation for realistic variety
Works in all modern browsers that support HTML5 Canvas:
- Chrome 4+
- Firefox 2+
- Safari 3.1+
- Edge 9+
MIT License - feel free to use and modify for your projects!