For this week’s homework, I wanted to play with my webcam and see what kind of effects I can achieve and use HTML/CSS to work with it.

With the idea that if you don’t have a background in setup, so you can “draw” with shapes, I thought what if I could make my video transparent and have that draw over itself and have lag/draggy feeling.

I started with an attempt to change the alpha in the video. I made a variable video, which worked with createCapture, which then translated to image in my draw function.

I was talking to my friend Nouf about reducing the alpha value to change opacity, and she mentioned how she was working with pixels. She gave me the basic code, and I tried to play with it, and came up with something like this:

The way this worked was that I looked at every frame of the video coming from my webcam and looked at it’s pixels, and knowing that each pixel has a (R,G,B,A) in it, I made an array, where I looked for the A (alpha) value, and I divided it to reduce it.

This was an interesting effect, yet not exactly what I was looking for. I played with the frameRate and reducing the value more. But it wasn’t what I wanted.

So I looked more and I found the tint function. This was much easier, because it just has the 4 values (R, G, B, A) and when I reduced the alpha, it worked perfectly for me!

I added a slider, which lets the user to change the alpha value themselves. And within the camera, I added text, which says Move. I styled it by giving it an id in CSS.