WEEK 8
HTML - Pixels
Create and / or manipulate an image or video at the pixel level. The image should change over the course of the minute.
1-3 words to describe the image
- The three words that we chose are: Tranquil, mesmerizing, constrast. Then the idea developed to color rings that are saturating the desaturated desert with colors.
Links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
![]()
We decided to reference Lisa's raindrops project for ICM midterm. She used the 2d lines of circles using arrays and mouseX and mouseY functions to make an interaction that
grows with time and placement of the mouse.
https://editor.p5js.org/lisa2294/full/yp2eE7-29
![]()
Also, got a reference videos from (The Coding Train).
![]()
Here is an original desert image that we used to manipulate pixels. The image was taken by Santiago Manuel De la Colina.
![]()
Then we grayscaled the picture in P5 using the filter function.
![]()
First, Maria looked up the mathematical equation for the water ripples:
z=(cos( 0.5sqrt(x^2+y^2)-6n)/(0.5(x^2+y^2)+1+2n), n={0...10}
https://www.youtube.com/watch?v=JrzgE7p-xnU&ab_channel=IanHoover
Using and remapping the z-values from the equation, we ended up
random values of R, G, and B pixels and the circles of waves.
![]()
![]()
![]()
Then we had to figure out the color palette, and less pixelated and got rid of the square edges from the ripples
Final
![]()
![]()
The music we used for the final experience is from: https://www.youtube.com/watch?v=xg7f5YO38Hg&ab_channel=Meditate
1-3 words to describe the image
- The three words that we chose are: Tranquil, mesmerizing, constrast. Then the idea developed to color rings that are saturating the desaturated desert with colors.
Links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

We decided to reference Lisa's raindrops project for ICM midterm. She used the 2d lines of circles using arrays and mouseX and mouseY functions to make an interaction that
grows with time and placement of the mouse.
https://editor.p5js.org/lisa2294/full/yp2eE7-29

Also, got a reference videos from (The Coding Train).

Here is an original desert image that we used to manipulate pixels. The image was taken by Santiago Manuel De la Colina.

Then we grayscaled the picture in P5 using the filter function.

First, Maria looked up the mathematical equation for the water ripples:
z=(cos( 0.5sqrt(x^2+y^2)-6n)/(0.5(x^2+y^2)+1+2n), n={0...10}
https://www.youtube.com/watch?v=JrzgE7p-xnU&ab_channel=IanHoover
Using and remapping the z-values from the equation, we ended up
random values of R, G, and B pixels and the circles of waves.



Then we had to figure out the color palette, and less pixelated and got rid of the square edges from the ripples
Final


The music we used for the final experience is from: https://www.youtube.com/watch?v=xg7f5YO38Hg&ab_channel=Meditate