‘The Narcissist Mirror’



‘The Narcissist Mirror’ is an interactive mirror that talks to you and listens to you. Users will be prompt to answer the question ‘Who is the fairest of them all?’. The mirror will then start drawing a painting of the user if they answer ‘me’ or ‘myself’ using speech recognition. If the user says something else, it will point out how the user doesn’t know how beautiful they are and will keep encouraging the user to answer again and again. The details of the painting will also vary according to how loud the user is. If they speak big and clear, the painting will be really detailed and similar to a photograph. If the user is being shy and speak with tiny voice, the painting will be blurry since it can detect the lack of confidence from the user.


My project changed drastically from the proposal I presented before. I found that all 3 ideas I wanted to do were really ambitious to get done in a span of 3 weeks so I decided to not go through with any of them. However I still wanted to do something related to self-esteem issue but less complicated and more fun.

Since I’m the type who always subconsciously check myself out in a mirror every time I walk past one, I thought that a mirror that will allow you to see your reflection only when it knows you are already confident would be a nice fix for that habit. That’s how I came up with the main interaction for my project.


I thought a lot about what kind of interaction I could make with my super limited skill in coding (lol). I decided to keep everything really simple. Here’s how it would go.

Screen Shot 2018-12-14 at 01.44.46

As I was struggling with the aesthetic aspect, a week before play testing I got a chance to watch a movie called ‘Loving Vincent’ and I was really impressed by how beautiful the whole movie looked. I suddenly wanted to make the mirror reflection into a painting-style moving image.


After the playtest I figured that it was really hard to guess what users will answer and most people wouldn’t actually say it out loud that they think they are the fairest of them all. I decided to make the mirror say a very suggestive phrase like ‘You really don’t know how beautiful you are, do you?’ to hint the users that they should answer ‘me’ and ‘myself’.

The code also didn’t really work as I expected. Because I was using speech recognition to trigger each function of the sketch. When the mirror says something, it also listens to itself and starts the function without listening to the user. I need to look more into each function in P5 speech and pause speech recognition when audio is playing.

I also found the painting created by my mirror to be hideous. This is actually what pains me the most (lol). I tried so many different things with shapes and color but I still found the look of the it to be unacceptable. I will definitely need to keep working on this.

What to improve

I would love to try using Posenet in my sketch. My idea is to make the sketch starts the whole thing only when it detects the eyes of the user. This will be a challenge but I think it’s a good exercise for winter break! I also desperately want to improve the aesthetic of the sketch since I am not happy with it at all 😦


P5 Speech, P5 Scribble and (hopefully) Posenet






I got an inspiration from a sketch I found on openprocessing.org. The sketch is called ‘Snake Brush’ and it uses processing to recreate a famous painting in a way I found very interesting. I have been trying to add a new touch to my photography and I think this is where I want to start. However, for this week assignment I decided to experiment with webcam first.


The idea is to control the movement of the circles with a microphone and have the circles pick up colors from the webcam as they move across the screen. It means you have to constantly talk into the microphone in order to create a painting of yourself.

I ran into a problem where the webcam took too long to load so the circles wouldn’t pick up the colors from live video. I tried preload function but it didn’t work so I decided to use frameCount and make the drawing appear after certain amount of time.

Far from perfect but I had a lot of fun playing with this! Hope you enjoy it too!




Lyrics generator!

Screen Shot 2018-10-24 at 05.19.54

Was trying to use API from Musixmatch and Genius but couldn’t get them both to work. I also planned to put a youtube video at the end of the page so you have an instrumental version of the song to sing along to. Again, couldn’t get it to work 😦 I need to figure out how OAuth works to gain access to Genius API and data.

Link to sketch : https://editor.p5js.org/msyves/full/S1F9awpiX


For this week homework, I decided to restructure my old black cat sketch from week 1. Though I understand how class and object work, I’m still not able to write everything from scratch without any guideline. I literally just followed everything Dan did in his youtube videos T-T

Screen Shot 2018-10-03 at 01.04.15
A cat appears every time you click your mouse!

I spent most of the time re-arranging the shapes. My code still looks very messy and I need to keep looking for a way to make it easier to read. I also couldn’t get some elements to work after I put them under class and function. The cat now doesn’t know how to drool and the eyes don’t really follow the mouse anymore T-T

Link to the sketch : https://editor.p5js.org/msyves/sketches/HyuB6TW97