hottter - Take Cover pattern generator

P5.jsdesignartsStripe
Hottter - Pattern Generator

Take Cover was an experimental companion project for hottter, built around an interactive scarf pattern generator. It explored how a product usually chosen from a catalogue could instead begin with a pattern created directly in the browser.

Users could choose colours, pattern rules and rendering styles, then generate designs combining geometric grids, circles, arcs and randomized forms. The generator used P5.js to draw each design on a canvas, applying cellular-automaton-like rules row by row to create different visual results.

Each pattern could be saved and exported as SVG and JSON, making the generated design reusable beyond the interactive editor. The project connected a playful visual tool with the practical requirements of creating patterns for a textile product.

The application was built with Ruby on Rails, Stimulus, Turbo, Tailwind CSS and P5.js. Rails handled the surrounding application, while the JavaScript layer powered the interactive canvas and pattern generation.

The generator is no longer online and is no longer used by hottter, but the code remains available on GitHub as an example of an earlier attempt to connect generative tools with textile design.

hottterhottter-2