Environment Simulator (2023)
p5.js animation design project
Technique: p5.js
The inspiration for "Environment Simulator" stems from the restrictions many people faced during the pandemic, where going outside was not always an option. The project was designed to offer an immersive experience for those who might be confined indoors, providing them with the opportunity to explore various environments from the comfort of their home. By simulating different natural settings through particle effects, the project aims to recreate the feeling of being outdoors.
This interactive animation includes four unique environments. Users can switch between these environments using preset buttons, allowing them to experience different landscapes in a virtual space. My main idea is to bridge the gap between the indoors and the natural world, offering a visual escape for those who need it most.
default
beach&waves
rain&ripples
wind&grass
fire&burning
The above represents the different state modes within the animation. In the 'default' mode, the particles gently oscillate and continuously change color. In the 'beach & waves' mode, the particles flow like waves crashing onto a beach, accompanied by the sound of waves. In the 'rain & ripples' mode, the particles move in a rhythmic pattern, gradually forming ripples as if raindrops are falling on a surface. There is also a corresponding rain sound effect, and pressing the same button again intensifies the rain, resulting in more ripples. In the 'wind & grass' mode, the particles slowly sway, simulating grass moving in the wind, along with the sound of wind blowing through a field. In the 'fire & burning' mode, the particles remain stationary but change color like flames, accompanied by the sound of burning.
Pressing the four arrow keys on the keyboard allows you to switch between different animations. In the 'rain & ripples' mode, pressing the same key again intensifies the rain effect. Pressing the spacebar will return the animation to the 'default' mode.