Face Generator: Emotions!

Description

My friends describe me as a very active and bright person, but they also say I look very calm when I'm not with other people. In this face generator project, I tried to show these two expressions using random/mousePress/mouseX & Y.

Link to Code

Design Process

I drew a simple sketch on the grid template before I started coding. I wanted to express the emotions by not only through the face emotions, but also with colors and the shape of the face.

After I did the sketching, I searched for ways to code the interactions I was thinking for, changing the shape of the face as the mouse moves and changing the eyes when the face is clicked. For the face morph, I used mouseX and mouseY data to stretch multiple ellipses. Then, I gave the individual ellipses an angle so if I added noStroke to the drawing, it would look like as if the face shape was changing. For the face emotions, I used mousePressed and if/else so the sketch would show two face emotions.

Update!

I made changes to the background and my idea. I made this into a mood generator and decided to give positive messages to whoever tried this project. For instructions, I added a message on how to change the face emotions and introduced what this project is. Then I made the background change color when the circle turns orange(which is joy) and had a message that could maybe cheer them up for the rest of the day.

Reflection

It was an interesting experiment to do. I tackled down the code for the example project by Nicky Du and learned a lot from doing so. I do want to make the shape of the flower other than using multiple ellipses, but I coulded do so because it was difficult to draw that particular shape on p5.js, and I wasn't able to do the morphing. I hope that I will be able to morph some shapes afterwards, so the shape will also look like a flower when the mouse is placed on the (200~400) area.

Credits