Lip Tester

For this project, I chose lips as my object. The aim is to show different sizes of lips with various skintone.This project will include a couple technical components: User-Defined variables, random(), text and mousePressed().

Design Process

I first drafted out the maximun and minimun forms of the lips. Then I started to transfer my idea into P5js. I first set the background as random colors that can be changed by mousePressed. It didn't really worked out, instead, it somehow changed to KeyPressed feature, so if I press the space key, the background will change to a random color. I also add the Text as a hint to help expose this feature of the sketch.However, I discovered that this KeyPressed feature does not work when I plugged my p5 sketch into the portfolio website.Then I used Bezier to draw out some curves to form the lips. I filled the lips with a quad as the color-fill function did not work well. Next I added another curve as the devision of the lips. After I draft out the maximun lips, I start to plug in the variables. I want the lips to change sizes as the mouse moves, so I used Scale to approach it. But Scale feature decenterized the lips and I can't fix it back. However, I am not very satisfied with the result as it is now completely out of shape - not a lip shape anymore. I think there is a way to fix it and chieve my expected shape. I know there are many other things that can be fixed and improved in this sketch and I will keep trying until it gets to the expected result.

Draft