A Series (of Accidents?)
Intro to Computational Media Final
A series of mesmerizing animations that change dynamically according to Perlin noise. All of the animations presented were accidental. Multiple animations were created, but the outcomes never matched the intention. I created an animation (or many) every day for a couple of weeks using p5.js. Each animation was based off of the last and all of the animations used Perlin noise, which is a gradient noise or a more organic random form. From the series of accidental animations created, a select few were chosen in order to show a progression.
1st chosen sketch to be presented - dots changing according to Perlin noise.
2nd chosen sketch - green lines with heights changing according to Perlin noise.
I created a series of around 50 sketches over roughly a three week period. In the beginning, I was trying to relate all my sketches with Perlin noise, but as I progressed with the sketches, I based each sketch off of teh last one that I had created. All of the sketches that I created were accidents, unplanned, or not what I had originally imagined creating. I wanted to focus on Perlin noise because I really became fascinated with the natural progression of randomness. I like randomness and how unintended results can come about it, but at times it is too random. For this series, I wanted to explore Perlin noise and how it can be used to replace randomness.
In the beginning, I hard coded the sketches to fit a (200, 200) canvas, because that was the method that I was used to. After thinking about presentation and speaking to my instructor, Mimi, I decided to convert my existing sketches and progress with future sketches in a more dynamic fashion. Due to my new direction, I ran into some problems having to be more vague with the precision of the coordinates I would have wanted, etc., but those problems jsut lead to more accidental sketches.
3rd chosen sketch - multicolored rectangles stretched in a circular formation.
4th chosen sketch - blue and yellow circles changing.
One of my biggest flaws when completing projects is presentation and this project was no different. I initially wanted to present all the sketches I had created on one page as smaller thumbnails and when a sketch was clicked on, it would fill the entire screen. But when it came to presenting in front of more people, I wanted to slowly reveal the sketches I had created instead of presenting them all at once. To show a progression, I chose a few sketches that I particularly liked and ordered them as they were created. I "converted" each sketch into instance mode so that I could combine all the sketches together in one giant sketch. I then used the keyTyped() function ot flip through the sketches, but this provided many problems like too many sketches running on one page, not being able to clear the entire page without deleting the entire sketch, performance problems, along with other problems. I found a round about way of accomplishing this by deleting the canvas using the p5.dom function remove() and utilizing id numbers.
Overall, I practiced creative coding a lot by created a lot of sketches. I also learned a lot about dynamic coding, instance mode, and how to achieve what I want by combining different preset functions. I also learned how to manipulate or control random noise to tailor the output but also creating unintended outputs. Here is the link to the github repository that holds all of sketches that I created.
6th chosen sketch - neon bezier curves moving according to Perlin noise.
5th chosen sketch - blue and pink squiggles.
I was able to show this series of sketches at the 2018 ITP Winter Show. For the presentation, I created three mirror boxes so that each user could have an individual experience. I utilized three small monitors in order to display the sketches in chronological order.