Concept
For this project, I wanted to explore something simple yet engaging with text. My initial idea involved allowing user input, where text would fall to the ground. While that was a good starting point, I felt it needed more interactivity. Then, inspiration struck while I was listening to music: why not create a lyric video? And that’s how this project took shape – a lyric video with the text fading in and out, synchronized to the music playing in the background.
Code I’m Particularly Proud Of
In this simple project, the code I’m most proud of is the part that handles the fade-in and fade-out effect of the text. Normally, this would require a loop, but since the draw() function in p5.js acts as a natural loop, I managed it using a simple if statement combined with a counter that gradually changes the opacity of the text until it fully fades out. Here’s the core code snippet:
// Display the current line with a fade-in effect
fill(255, fadeValue);
text(lyrics[currentLine], width / 2, lineY); // Display the current line of lyrics at the center of the canvas
// Gradually make the text appear by decreasing its opacity
fadeValue -= 1;
// When the text is fully faded, move to the next line
if (fadeValue <= 0)
{
currentLine = (currentLine + 1) % lyrics.length; // Move to the next line, looping back to the start if at the end
currentColor = (currentColor + 1) % colors.length; // Change to the next background color, looping through the array
fadeValue = 255; // Reset the fade value to fully opaque
}
Final Product
The final product is available to experience, and you can interact with it by pressing the mouse button to move the lyrics forward. Otherwise, you can simply watch it as a lyric video with music in the background. Just a heads-up: the video includes audio, so be mindful before playing it.
Final Thoughts and Reflection
Working on this project was both intriguing and challenging. It was a lesson in embracing simplicity, as my initial ideas were quite ambitious. However, I realized that there’s a unique power in crafting something straightforward yet effective. While I’m pleased with the outcome, there are a few areas for improvement: I would like to synchronize the lyrics with the music more precisely, enhance the background visuals, and add more interactive elements to make it more engaging. This project has sparked new ideas, and I look forward to applying these insights to something even bigger and better. Stay tuned!