Interactive Paint Brush in P5
In this exercise, I created an interactive paint brush using P5.js. I've been curious about how watercolor brushes are created for painting software such as ProCreate and Photoshop. I decided to do some research on how the rendering technique worked and set off to create my own version of a watercolor brush.
Inspiration and code logic was taken from the following videos:
- Simulating Water Colour Paint in P5j: https://www.youtube.com/watch?v=olXv8GOfpNw&t=63s
- "How to Hack a Painting" by Tyler Hobbs: https://www.youtube.com/watch?v=5R9eywArFTE. This last video was the most useful one for me as it explains the deformation and blending that goes into the process of creating a brush with watercolor characteristics.
During my experiments, I also saw that maintaining the edges of the shape of the brush gave it another effect. I then proceeded to try out different ways in which the edges could pop more in order to generate another brush based on the traditional water color rendering techniques.
Demo video