Interactive Animated Pattern
Programs: Processing, Adobe Photoshop
Time Spent: 1 week
Completed: October 16, 2022
Music: "37 ohmperios" by Rolemusic (link: https://freemusicarchive.org/music/Rolemusic/single/37-ohmperios/)
For this project, the professor asked us to create an animated pattern that responds to user input. Some of the animation examples on the Processing website show lines moving up and down the screen in a simple animation. These reminded me of VHS lines, so I decided to try creating my animation inspired by VHS visual noise. I then built on this idea by adding chiptune music to the program!
The video above shows my animated pattern in action. The first 17 seconds are silent while I demonstrate how the noise waves change their height based on the mouse's position. Then I left-click, the music loads while the pattern pauses, and the music begins to play.
Below are the three sketches I came up with. I decided that I wanted to use my revamped portrait as the background for the pattern because the Vaporwave color scheme and low-poly design fit with the VHS video style I wanted.
I ended up combining aspects from each of these sketches for my final animated pattern: the play button, noise waves, and short white lines of visual noise.
To achieve my aesthetic goals, I first edited the final color render from my portrait project and gave the colors a glitching, VHS effect in Photoshop.
I then imported the image into my Processing project folder and reduced the image’s opacity using the tint function. Reducing the opacity not only made the bright colors easier to look at, but it also helped the image to feel more as if it came from an old VHS tape.
Next, I used an example from the Processing website (https://processing.org/examples/loop.html) to learn how to create a randomly generated static effect using simple white lines continuously being drawn in the draw function.
.png)
Lastly, I added several noise waves (https://processing.org/examples/noisewave.html) of different colors to satisfy the professor's requirement for a curve function. Each wave also moves according to the mouse’s position.
I also added a mousePressed() function so that when the mouse is clicked on the canvas, music will play!
Out of all my projects for my programming course, this one was the most fun for me! I am very happy with how it turned out.
.png)