Concept:
There is one element in space that intrigued me a lot as a child: meteors (or shooting stars). Seeing a shooting star in the sky made me so happy, as I believed my wishes would come true as soon as I see one. Hence, this assignment was inspired by my dream as a kid to have a sky full of shooting stars!
The sketch tries to capture a bit the essence of a chaotic scene where the dark sky is filled with unending meteors. It’s a simple but effective, interactive (and hopefully immersive with audio!) project where I implemented a range of random sized and colored lines moving across a black background. The legendary Interstellar movie theme song starts as soon as the you press the key. A loop of the scenery also occurs if you press the key “space”.
Link to the version with sound: https://editor.p5js.org/aa8915/sketches/aU8fd7qtB
Highlight of the code:
//stars movement
update() {
this.position.add(this.velocity);
if (this.position.x < 0 || this.position.x > width) {
this.velocity.x *= -1;
}
if (this.position.y < 0 || this.position.y > height) {
this.velocity.y *= -1;
}
//fade out over time
this.lifespan -= 2;
}
I’m proud of many parts of this sketch. Yet, I struggled a bit with the bouncing effect (took a lot of research in tutorials and Google pages, The Coding Train videos saved me in this.). I had to ensure that the particles maintain a smooth appearance especially when they bounce off the boundaries. Along the process, I discovered the ‘update()’ function which was responsible of movement, boundary conditions and also fade out of particles.
Final thoughts:
Overall, the whole sketch took a lot of trial and error to be implemented. Unlike the first assignment, this second one took me immense time. I’m still not a 100% satisfied with the shape and appearance of the meteors. I wanted them to have gradient colors but couldn’t figure out this part. However, I put a lot of efforts on the animation this time which is something I’m proud of. I also love the effect of the new element in this assignment which is sound.
References:
Coding Train playlist: https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
Shooting Star: https://m.espacepourlavie.ca/en/what-shooting-star
Code art (for brainstorming): https://www.code-art.com/