DIY Poster Designer

Category

Creative Coding

Mentors

Joshua Miller

The D.I.Y. Poster Designer is an interactive tool that allows users to create custom posters by drawing lines using hand gestures and populating those lines with words generated through speech recognition.
‍
The primary inspiration was this project by Studio Feixen. I wanted to do something similar but more interactive, so the user isn't limited to any preset text (also waving your hand around is more fun than just clicking a mouse button). So while the project is intended as a poster design tool, it becomes a canvas for anything you would like to draw or say.

The D.I.Y. Poster Designer can be demoed right here. It requires microphone and webcam permissions and works best in Chrome.

Using their index finger the user/artist can draw lines. They can stop drawing their current line by touching their index finger to their thumb. Each new line generates in a random color gradient. Each new line can then also be filled with text that is generated through speech recognition. If you say something prior to drawing a new line it will be drawn along your next line. If the user wants a blank canvas, saying the word reset will clear all previously drawn lines.

This project was created using p5 and uses both the ml5 HandPose machine-learning model and the p5.speech speech recognition library. Some of the more interesting solutions to problems that prevented things from running smoothly were using interpolation to create better looking lines and also drawing each finished line to a buffer to prevent slowdowns from prolonged use.

Initial Concept Sketch

In-Dev Screenshot

For Educational Purposes Only