Week 1: Images and Pixels

For my pixel artwork assignment, I created a human to digital converter. Throughout the process, I learned a great deal about pixelation and implementing elements outside of sketch.js.

Finished sketch
Link to p5.js sketch: https://editor.p5js.org/nickgran321/sketches/mtJeQxHj0
Link to code on Github: https://github.com/nickgran321/Nick-Grant/blob/master/Computational%20Media:%20Week%201%20Pixels
First draft

I first began by simply pixelating my video capture. I created a for loop within a for loop for the x-coordinate and y-coordinate of my pixels. I utilized get() to return an array of the RGB pixels within the canvas.

More rectangles

In the next step, I created several video capture copies. I noticed that when the user placed his/her head in the top left corner, the image captured by the webcam appeared in all of the rectangles. I desired to create a peculiar human to digital converter with several copies of the user’s head in different colors on the right side. When I attempted to download an image for the user’s head to place in, I noticed that my sketch became too slow. I successfully, however, implemented music in my sketch with the function preload().

Text and HSB system interfere with my sketch
HTML text

I created several different rectangles and assigned different sizes and starting colors for them. Each rectangle incorporates a different array of colors. For example, the red value in the first rectangle is divided by 2, but the red value for the small square in the third row is pixelColor[0]+random(100, 100). I liked adding random colors for a few values because the pixels would change slowly. I set the frameRate to 10.

I noticed that if I added any text or shapes in the sketch, they would appear in all of the video capture copies. I don’t understand why this is the case exactly, but I assume that the square in the top left corner is completely reflected in all of the rectangles. To add text to my sketch without interfering with all of my rectangles, I added text in index.html for the top two lines. The bottom line was constructed with createP(), which is an element in the DOM.

At one point, I changed the color mode to the HSB model. While I enjoyed changing the hue, saturation, and brightness with my sliders, I noticed that the colors of my video capture copies changed too greatly. I opted for the RGB model instead, but limited the maximum to 127.5 because I disliked how the video capture copies would all turn white if the user changed the sliders to the maximum.

Creating sliders by accessing the page source

A student from the Coding Lab taught me how to access the page source of my sketch in order to customize the sliders. I desired changing the colors of them from black. In style.css, I altered the progress, track, and thumb colors of the sliders.

Sliders with different colors

In my sketch, I assigned IDs to the red, green, and blue sliders that are connected to the values in style.css. To change the colors in CSS, I used color hex codes. I’m not very familiar with them, but I would like to learn more about how the strings are developed. The RGB values are assigned to each slider, which I then added to the fills of my rectangles. Each time the sketch is run, the sliders start at 0.

Experimenting with the doubleClicked function

Lastly, I implemented an option for users to take a picture. In order to do, I created a boolean statement. Initially the screen would freeze each time the mouse is pressed, but that interfered with the user changing the colors of the sliders. Instead, the user must click the screen twice.

Related Post