Pixel by Pixel


date: Nov 02,19
type: individual

In this project, I wanted to create a mirror that divides the frame into two, and plays with facial expression.
(Your eyes and mouth will go into different filters and will show up differnetly!)
In order to do so, I had to use two for loops with separate y values.

(note: when I wrote this for the bottom half of frame,
for (y = height*1/2; y < height; y++){
for(x = 0 ; x < width; x++){

I got a syntax error message. so I had to change it to a number.)

Then I used brightness to filter out the pixels.

for (y = 0; y < height*1/2; y++){
for(x = 0 ; x < width; x++){
let i = (x + (y * width)) * 4;
let ri = ((width - x - 1) + (y * width))*4;
let r = myVid.pixels[ri + 0]
let g = myVid.pixels[ri + 1]
let b = myVid.pixels[ri + 2]
let a = myVid.pixels[ri + 3]

let bright = (r+g+b)/3


Instead of “showing” the pixels, it is drawing each rectangles and ellipses in the place of pixels.
It was kind of confusing at first when using existing pixel information and then drawing on to the canvas. 

changing settings of rectangles.

One thing to note is that my computer gets extremely heated up when I run my code.
I don’t know if it’s becuase I’m drawing so many ellipses and rectangles, or becuase something that I don’t know is looping and crashing behind.︎

© ymchoi 2019