process

code breakdown

references & inspiration

final project

welcome to my pixel project for icm!

in this sketch, the live video feed is translated into 10x10 pixels. the code extracts the brightness of each pixel and its relationship to the threshold defined by the user via a slider. if the brightness is higher than the threshold, it blends between hot pink and light green. conversely, if the brightness is lower than the threshold, it blends between light blue and red. in other words, if there's a lot of bright light, the squares will be pink or white; if it's darker, the squares will be blue or navy. users can use the slider to adjust how bright something has to be for the squares to change colors.

pixel project by tinaaayu -p5.js Web Editor

process

1. understanding the assignment and setting goals:

the assignment asked me to manipulate video or image data at the pixel level and incorporate user interaction, while also allowing the image to change over time. given that we had already worked closely with sliders and manipulating live webcam feed, i decided to use those as the source of the project.

2. getting video feed:

the first step was to set up the video feed:

• used createCapture(VIDEO) to access the webcam feed and display it
• the size of the video was adjusted to a 30x30 grid of div elements (so the video resolution was 30x30 pixels) because i could not for the life of me figure out how to make it responsive to the canvas
• used video.loadPixels() to grab pixel data from the video feed and map pixel values to div elements on the screen
• could not figure out how to make it responsive to window; am i… stupid???

3. creating div elements grid:

i wanted each pixel from the video to be represented by a small, colorful block on the screen. since p5.js is designed around drawing to a canvas, i chose to use html div elements instead (chatgpt chose it), which I could style and place on the page in a grid layout.

• used nested loops to create a grid of div elements with createDiv(''), then styled them with css to set their width, height, border radius, and margin
• created a parent('mirror') to place these divs inside a container element on the html page