---

-

Sketches

After choosing Cyberpunk as the theme of my project, I decided to work on creating an interactive webcam filter. I chose webcam filters because it depends on the person in front of the screen; although it existed years ago, it can carry substantial value through coding and modification. Cyberpunk 2077 is a futuristic game that is still in the development phase, and it will be published in December 2020. I chose it because it haves powerful elements and colors that I can build on for my project. Starting by researching and collecting some visuals about it and ending up with decoding and analyzing the elements and the colors was used in the game. After that, I was trying to bring the game experience into my website through colors, font, and motion. Having a look at similar applications and websites gave me a lot of inspiration. Snapchat was one of the first companies that used filters in a new intelligent and interactive way to make their users fall in love with the app. I started by brainstorming the ideas I wanted to include in my filter, and then I began transforming it into codes. I worked with p5.js; it’s a library for JavaScript that is simple and clear to use, p5.js also have a website where they explain all of the library functions and include examples too ! which help to make it easier for everyone to learn. In my filter, I used face/body tracking feature using the webcam, and I assigned some lines to draw a skeleton on the screen based on the data the webcam receives. It happens automatically using ml5js library; it reads the face and the body points and allows the programmer to assign objects to actions to occur according to the moves that the user does. SpaceStars is an interactive game where I was trying to merge the usual effects of the filters with the user sitting in front of the screen. I started by sketching and planning how will I structure the codes and what are the components I will use in it. Transforming the sketches into codes wasn’t easy, here are few of the conditions I included in my code ;(if, else, map, for loop, arrays and some mathematical formulas ). The space ships floating on the top of the canvas moves randomly in the X-axis, moreover I assigned a timer that gives the vessels to emit (fire) according to the time taken from the device real-time. For example, ships (2,5) fires when the actual seconds is 22. For the character, I chose simple neon colors to represent the cyberpunk effect. The big red circle follows the head, and small circles are the hands. Drawing the skeleton was one of the biggest challenges I faced in this project because I had to know what are the points of each joint and the shoulders and connect all of them to make it look like it’s a skeleton that moves according to your move. When any of the objects that the ships emitted hits the head, it counts as -1 from the health, if health = 0 then the background becomes black, and it prints “YOU LOST , TRY AGAIN”.