ICM Media — Week 2
FaceAPI and HSB color

Overview
In this assignment, I decided to use face-api.js (from ml5.js) that allows you to do face and face landmark detection. When the mouth is open, colorful bubbles come out. The size of the circle is related to how open the mouth is. The color of the bubble depends on the position of the nose in the canvas. The color mode that I am using is HSB.
Link to Code
Process
Exploration of face-api.js
In preparation for last week's material, I started to explore the ml5.js library and Dan Shiffman video tutorial. I have 0 experience in Machine Learning stuff (and starting to learn about programming), but I am curious about how to use different tools. When I opened the FaceApi_Video_Landmarks for P5.js Web editor, I barely understood what was going on. But looking at the code and other documentation I noticed that the face is drawn by points of reference on the face. I tried to console.log some of these positions but it gives me an array that I had trouble accessing the position of those points.

I was able to draw a circle over the nose using the center of the drawing rectangle that borders the face. But I wasn't able to interact with the landmarks of the face.
After the last class, I went to our professor, Lisa and she directed me to inspect the page to see the position of those landmarks of the nose and she showed me where the positions in x and y were.

Although I saw that these 9 landmarks where an array inside an array, I wasn't able to access a specific landmark.
I started trying text(nose[0],100,100); or text(nose[0][0],100,100) but the information that gave me was [object Object].

I had no idea how to access those positions so I asked different people and finally found what I was looking for.
How to get it:
The thing is that I was ignoring the ._x and ._y in the array, that also you can see when Inspect the code in each array and in other parts of the example. What I understood, that is an array object array[]._x and array[]._y and you get that position.
Not sure what it is, but what explained to me is that it looks like this is an array of objects.
After I get the position of the first landmark I started to explore to get two landmarks of the mouth, play with distance, conditionals, and position.
Using HSB for colorMode
After I accessed the position of nose and mouth, I used the distance between to opposite point of the mouth to determine if the mouth was open or closed. for that, I calculate distance as a trigger.
One of the positive this of using HSB for colorMode() is that you can go through the whole spectrum of hue, changing one variable.
VIDEO
Questions
- I would say that access to this information was very complicated for my level, but at least I was able to play with this API. Is it possible to change the color mode of a video and manipulate its pixels?
- Is it possible to draw to canvas (even if using create graphics) and have one looping and the other one not?
- Is it possible to take values that are constantly changing outside a loop and a function?

