Starry Night Camera
Description of my experimental camera.
New Yorkers in the city rarely see the stars at night and we often forget how beautiful the night sky can be. Growing up, I loved going out in the night to stargaze because it was a time for meditation and self-reflection. In movies, scenes with stars often represent the protagonist’s time for self-reflection. Stars can also mean guidance, a ray of hope for the protagonist to accomplish their mission. These ideas are what inspired my experimental camera. In a sea of twinkling lights, I used the clmtrkr to track a face through the webcam which allows the user to see their own reflection. The face and facial features are outlined by small white dots so that the user can blend in with the starry night. I also wanted to make my experimental camera interactive. I added picture’s of zodiacs which pop up in the lower left corner once the user inputs their birth month and birth date. Those who were never interested in stars or did not know what their zodiac sign looks like in the night sky can easily view when they input their birthday.
Design Process
Design #1- Cubism Face
My first idea was to create an experimental camera that would play with the concept of cubism. This would be done by using the clmtrkr, and putting an image of different facial features in the corresponding areas. I was also thinking about creating multiple abstract images per facial feature, and using the mousePressed() function so that it would change images every time the mouse is clicked.
Design #2- Raindrop Camera
My second idea was to create a camera that would help calm the user. This led me to an idea of creating raindrop/ripple effects that would obscure the web camera image. By creating blurred and opaque eclipses that would appear in random areas of the camera, the image shown on the screen would be covered with these raindrop patterns.
Design #3- Starry Night Camera
My third idea was the idea I used for this assignment. I chose this idea because I liked the idea of creating a space where people could reflect and meditate.
The Night Sky (Background): I started off by creating the starry night background with twinkling lights. This was a little tricky for me because I had an idea of how I wanted to carry out the code, however, I ran into a lot of errors. I decided to search for a star sketch on p5 and found the code “Stars” by Rios. I was amazed by this code because the stars are actually twinkling at a steady rate, and they look very realistic. This code creates a class named “Star,” which makes the stars on the canvas twinkle. This class is then used in function draw(), which places the small points in random areas of the canvas, giving it a more realistic appearance.
The Face Tracker (Clmtrkr): After the background was set, I used the clmtrkr code from CC website’s resources page. This was very challenging for me since I had a hard time following the instructions, but with the help of Xin’s clmtrkr.js study guide, I was able to make it work! After I got clrmtrkr to run on my sketch, I created the points on the face and facial features to make it blend in with the stars in the back. Although it seems like a simple task, I initially coded each point one-by-one which led me to a code over 550 lines long. This led me to wonder if it’s possible to condense my code, which it most definitely is! I asked Jon for help, and he helped me understand how to create an object for the facial points, assign the points to an array within the object, and use for loops to draw each point onto the canvas. Thankfully, my line went from 550 to 250!
The Birth Month & Date (Images & Buttons): With the clmtrkr working, I moved on to my last part of the sketch- pulling up images of zodiac that corresponds to the birthdays that are inputted. This was inspired by Bailey C Foltz’s “Zodiac Project Final,” where a set image of a zodiac sign would pop up whenever the user input their birthday. I started off using the preload() function to load all of my zodiac images. After the images were uploaded, I worked on the buttons that allowed the user to input the number of their birth month and birth date. At first, the numbers came up reversed and on the opposite end because the translate function I was using to mirror the clmtrkr image was affecting the button numbers as well. I used the push() and pop() function to adjust them which worked out perfectly. After the buttons were set, I had to assign each zodiac to its corresponding month and date. I thought about making this into a function or an object, however, I realized that it was not possible since each zodiac had different months AND date range. After the month and dates were set, I set each zodiac’s month and dates to its corresponding zodiac image, and used if statements to call on those specific zodiac images when the birthday was inputted.
Overall Reflection
It was very difficult to come up with ideas for an unconventional camera since I was overwhelmed with ideas. However, the idea I wanted to use most was the idea of self-reflection and meditation. Both the raindrop camera and the starry night camera have similar ideas. I went with the stars in the night sky because living in the city for so long, I personally miss seeing the stars at night. Throughout the process of designing the camera and writing it as a code, I was surprised at how our face can be simplified into numbers and positions. The numbers that I chose for my sketch also changed what the face looks like. For example, the clmtrkr has an outer lip outline and inner lip outline. For my experimental camera, I only used the inner lip positions. This made me think of the social media filters, and how some filters emphasize or hide certain facial features. It is up to the creator to decide what they want to show through the camera, and the ways to distort the image.