Concept
I’ve always been fascinated by stargazing, but I wanted to create a unique way to experience it. In this interactive sketch, you’re not just a passive observer—you control where the stars appear as you move your mouse across the canvas. To enhance the experience, I created the night sky with faded clouds manually using Perlin noise, inspired by Professor Nimrah’s work from Week 2, rather than using an image from Google. I adjusted this technique to fit my needs, resulting in a serene and dynamic background. For the interactive elements, I incorporated a random walker that moves in the direction of the mouse from List 1, symbolizing your role in guiding the stars. From List 2, I used the concept of walking through RGB space to generate evolving colors as stars are plotted, and I tied the presence and intensity of the stars to the volume and playback of a soft piano sound, one of my favorite instrumental tones. The music fades away along with the stars, creating a soothing, immersive experience where the visual and auditory elements blend together seamlessly.
Highlight of the Code
One part of the code that I’m particularly proud of is how the volume of the music changes based on the number of stars on the screen. This small detail adds an extra layer of immersion:
// Adjust the volume of the song based on the number of stars on the canvas
let targetVol = constrain(map(stars.length, 0, 100, 0, 1), 0, 1); // Map the number of stars to a volume level
song.setVolume(targetVol, 0.1); // Gradually change the volume over 0.1 seconds
if (stars.length === 0 && song.isPlaying()) {
song.pause(); // Pause the song if no stars are left on the canvas
} else if (stars.length > 0 && !song.isPlaying()) {
song.play(); // Play the song if there are stars on the canvas
}
}
This section of the code ensures that as more stars are plotted, the volume of the piano music increases, and as they fade away, the music gradually softens until it stops. It’s a simple yet effective way to tie the visual and auditory experiences together.
Embedded Sketch
Video Representation
Reflection and Ideas for Future Work
Creating this sketch was a rewarding experience as it allowed me to combine my love for stargazing with music in a creative way. The fading effect, both for the stars and the sound, adds a dreamy quality that I find very calming.
In the future, I’d love to experiment with adding more interactive elements, such as varying the types of sounds or letting users choose different star colors and patterns. Another idea could be to introduce a more complex musical composition that evolves as the stars increase in number or move in specific patterns. This project has opened up so many possibilities, and I’m excited to see where it can go next!
P5.js Full Code and Sketch
https://editor.p5js.org/maryamalmatrooshi/sketches/IZVrVbVB1
References
https://editor.p5js.org/masakudamatsu/sketches/uPF7TUpcf
https://editor.p5js.org/nimrah.syed/sketches/w_5GyQsyh
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#reversing_an_array_in_place
https://p5js.org/reference/#/p5.SoundFile/setVolume