This is web-based tool for designing bead patterns with different beading stitch formats. I’ve created many iterations of this project over the years. My initial attempt in 2015 used EmberJS, but I swapped it to React in 2016. I continue to improve it and add new features. I’m currently rewriting it in Typescript and have not yet added in some of the previous features such as cropping and resizing.

Features

• Auto-generation of bead patterns using quantization
• Ability to shrink pattern palette to match real-life bead colours
• Flood fill - using an n-dimensional flood fill algorithm
• Shape tools
• Numbering by column, row, and symbol
• Undo and redo
• Export and print

Technical Details

The pattern maker uses the HTML canvas because I wanted pixel perfect squares with fast performance. It uses Redux to manage the state. The bead grids are stored in a 2D array structure.