Week 4 – Text Art

Concept

For this project, I wanted to make something related to music because I liked the idea of using lyrics as part of the artwork. I decided to make a digital record player inspired by the song “Stupid Song” by Olivia Rodrigo. I wanted the lyrics to move around the record while it spins, almost like the lyrics are physically part of the vinyl. I used light blue colors to match the album and kept the design simple so the main focus would be on the lyrics. I also made the lyrics curve by placing each letter at a different position around the record.

My Artwork

Click on the screen!

Code I’m Proud Of

//separate function because curving every letter would make the draw() function hard to read
function drawCurvedText(words, radius, startAngle) {

  let spacing = 0.035;

  let totalWidth = words.length * spacing;

  let firstAngle = startAngle - totalWidth / 2;

  for (let i = 0; i < words.length; i++) {

// Calculates the position of each letter around the circle
    let letterAngle = firstAngle + i * spacing;

    let x = cos(letterAngle) * radius;
    let y = sin(letterAngle) * radius;

I am most proud of this part of my code because it was the part I struggled with the most. At first I didn’t understand how I could make the lyrics curve around the record without manually placing every letter. I was confused about what sin(), cos(), radius, and spacing were doing together. After experimenting with it, I understood that the for loop goes through each letter and the sin() and cos() calculate a different position for each one. I also made it a separate function so my draw() function would not become too messy. I am proud of this because the curved lyrics are the main part of my artwork and getting them to work made the project finally look how I imagined it.

Resources that helped me:

https://p5js.org/examples/Angles-And-Motion-Sine-Cosine/

https://youtu.be/O5wjXoFrau4?si=XUTff14jizVeiGJ6

https://p5js.org/reference/p5/text/

https://p5js.org/reference/p5/pop/

https://p5js.org/reference/p5/push/

Debugging & Reflection

The curved text was definitely the hardest part for me because I had no idea how to make the lyrics go around a circle at first. I was really confused about what sin() and cos() were even doing and why I needed both x and y. I also thought I would have to write code for every single letter, which would have been horrible. Eventually I understood that the for loop does that for me and gives each letter a slightly different position. I also had to keep changing the radius because at first the lyrics were too close to the record and were hard to read. I looked back at some of the p5.js examples we did in class and used the p5.js references when I got stuck. I had to keep going back and forth with the code and changing numbers until it looked right.

This project made me realize that I actually like experimenting with text and movement in p5.js. I still have a lot to learn and making things move around a specific shape. If I continued working on this I would want to make the record feel more interactive instead of just having it spin. I could make the lyrics change as the record moves or have the user interact with different parts of the record and in the future i definitely want to learn how to include sound in this!

Leave a Reply