Devastation Of An Island
05 Nov 2019 - Jake Sherwood
Pixels and Color - Life and Devastation of an Island
Pixels and Color - Life and Devastation of an Island
Canvas of final work at bottom
Delving deeper into the power of p5 we were tasked to modify an image or video at the pixel level. Utilizing the p5.image object and the pixels array.
It was a group assignment and my partner, Christina, and I both wanted to do another conceptual piece.
After we had settled on doing a piece on climate change we got thrown a small loop with the added requirement of creating a “1-minute experience of color.”
Our concept was to utilize some of the before and after photos from NASA to illustrate the effects of climate change.
Christina had a personal connection to the island images due to her parents and family being from the Phillipines so we decided to use the northern Bahamas island devastated by hurricane Dorian.
I idea was to have the before photo slowly erase pixel by pixel to reveal the after photo.
The after photo shows the devastation in the sea floor and the browning with the loss of vegetation on the island.
To emphasis this further and to create the color experience we added a breathing effect to the before image.
We did this by bouncing the alpha setting on a tint function call. This creates the breathing effect eluding to the island being “alive.”
Then we have a storm image that follows the erasing path to illustrate the increasingly destructive force of stronger and stronger storms as the result of climate change.
As the storm moves around the screen it erases the before image, by setting that pixel’s alpha to 0, and reveals the after image which is also tinted to a darker brown to emphasize the “devastation” aspect of the island.
After a predetermined amount of time, set in the timeDestroy variable, the before image completely fades out and we’re left with the “devastated” after image.
Working with Christina was great. We basically divvied up the work but ran into some issues when we went to combine the pieces.
It worked out to be some issues with extraneous for loops that we were able to remove and everything started to work much better.
The experience can be described as “Storm devastates a living, breathing island.”
We basically have 2 main sections, “the life” and “the devastation.” Life is illustrated with the breathing effect and devastation comes about in the form of the storm(s) intensified by climate change.
We also had a lot of back and forth with timing and movement of the storm and breathe.
We settled on delaying the storm a bit to try to make the “breathe” more noticeable as well as opting for a more natural random storm path.
Final p5.js sketch link: https://editor.p5js.org/lucidprojects/sketches/IVGel83Mt