For this assignment, I got inspiration from one of my favorite Brazilian songs, Wave by Antonio Carlos Jobim. The objective of this project is to display a Canva that looks like a YouTube lyrics video. Using generative text, I have created a CSV file with the translation of the lyrics. Then, it is loaded in the main sketch along with the background image and the instrumental of the song.
Rather than just displaying the lyrics on the screen, I added a bit of interactivity as the user gets to choose when to read the next sentences. So, if we click on the screen, we load one sentence at a time, following the order of the song. Additionally, I added some animation to the sentences, as they move in a wave format to match the concept of the song. It also allows the user to immerse themselves in the project and read the (I would say) beautiful and romantic lyrics.
When coding this assignment, I also got references from the text() function.
function draw() {
// Display the background image
image(bgImage, 0, 0, width, height);
// Sets the text alignment to center
textAlign(CENTER);
// Calculate y-coordinate with a sinusoidal function for wave animation
let y = height - 20 + sin(frameCount * 0.05) * 10; // Adjust the amplitude (10) for desired wave height
// Adjust the frequency (0.05) for wave speed
// Draw the current sentence at the bottom center with animated wave effect
drawWords(width / 2, y);
}
function drawWords(x, y) {
// Text color
fill('gold');
// Display the current sentence at the specified position on the canvas
text(sentences[currentSentenceIndex], x, y);
}
Reflection: One area I could still improve is to make the Canva more animated and dynamic. Currently, the animation is limited to the wave effect applied to the text as it moves on the screen. However, there are several ways we can enhance the animation to make the canvas more engaging, such as background animations and transitions between the sentences.