SOJO Tool
Regular Practice needed a p5.js creative coder to translate their brand system for SOJO into a generative tool that could produce infinite social media variations while maintaining brand consistency.
- Text input with positioning controls
- Logo placement and scaling options
- Four-line pattern system with noise-based animation
- Background colour and image upload
- Multi-format social media export
Working with Regular Practice's coded stitch-line concept and SOJO brand guidelines, I developed the P5.js generative design tool.
The tool features dynamic stitch lines responding to noise-based sliders, with a control panel for text input, customisable design elements, and image/video background uploads.
Regular Practice already had the stitch-line concept coded. They needed to turn it into a generative design system with specific functionalities using P5.JS.
Outputs can be exported with image or video backdrops and in multiple social media dimensions — square, portrait, social portrait, landscape — empowering SOJO to create consistent yet varied assets independently.
Square. Portrait. Social portrait. Landscape.
The tool empowers the client to create their own brand assets while maintaining a consistent identity, scaling efficiently across every surface SOJO touches.
Built from a stitch-line. Handed to the team. Producing assets long after the project ended.
Next project
Next project
Next project
