Check out the live interactive website:

 

Luminous Night is a glowing nature scene with moving fireflies, trees, mountains, and a soft melody in the background all created in HTML coding with the p5.js library. The main movements are the fireflies that are jitterbugs, a mountain range made up of noise, pine trees made with random gaussian, a firefly that can move with the arrow keys, and another one that moves with the mouse. The cursor firefly has a pink glowing trail when the mouse is pressed while the keyed firefly has a yellow moving trail based on the semi-transparent background I set. I drew a custom firefly cursor in Adobe Illustrator and saved it as a png to use in my coding to create a firefly. The final touch was adding a sound button to play music that helps create a serene night scene.

 

Interactions:

  • Moving mouse cursor = firefly icon

  • Press and hold the left-click mouse = firefly leaves a pink trail

  • Arrow keys = controls firefly movement in the top-middle area

  • “Play” button on top-left of screen = plays/pauses music

Firefly icon to replace the mouse cursor: