Concept and Design:
Through my midterm project, I aim to illustrate the catastrophic impacts of global warming and climate change visually, emphasizing the immediate need to address this challenge. My project aims to shows the contrast between a world where we act on climate change and one where we don’t. I envision a canvas split into two parts:
- The Tree: This side represents the vibrant life we’re accustomed to. As time progresses, the tree’s leaves gradually fade, losing their color. This change is symbolic of the gradual death of nature due to the neglect of environmental well-being.
- The Rising Tide: Here, a sea will be portrayed. As time passes, the water level subtly rises, reflecting the real threat of rising sea levels due to melting ice caps.
Designing the Code:
- Functions: Key functions will handle the color transitions of the tree leaves and the water’s incremental rise. The “lifetime” feature in p5.js will be used in simulating these changes over time, giving viewers a tangible sense of progression.
- Classes: I envision there to be at least two classes: ‘Tree’ and ‘Sea’ classes, which will encapsulate their properties and behaviors.
- Interactivity: To engage the viewers more deeply, I’m considering having the users press down the mouse in order for the changes to the Tree and Sea to occur – this would reflect the impact and responsibility humans hold when it comes to the crisis of climate change and global warming.
Challenges and Mitigating Risks:
Making the water rise in a way that looks realistic, rather than just moving a flat blue rectangle upward, can be tricky. I’m thinking of Investigating how using the noise() function in p5.js can give the water a more natural appearance.
Also, creating a seamless transition in the color of the tree leaves as they fade might be challenging. I started looking into p5.js’s lerpColor() function, which interpolates between two colors. I want to explore this function to find the most visually appealing transition.