P5.js
- using p5.js, I created colourful sketches based on the same checkerboard design, that I thought were apt to the song and the mood boards I created for it.
- I then cropped the videos into a CD shape and made it rotate using Adobe Premiere Pro using the transform, crop and circle options.
Coding Process
- Coding different checkerboard designs.


















I ended up with 2 patchwork checkerboard designs, 2 scrolling designs and 4 still designs (which would end up animated anyway by virtue of a spinning record).
Final Pieces









The colours are exactly as I envisioned them, and I planned to do the slight adjustments such as exposure and contrast on Adobe Premiere Pro.
Animating Process
Splicing them into a video with Premiere Pro


Using the saveCanvas() function on p5.js, I downloaded all the work I did. For the animated ones, I screen recorded them and the cropped them. I imported all the pieces into Adobe Premiere Pro and set them all to the same size and position. I added the audio.


I then cropped them into identical circles and colour corrected them slightly so that one was not brighter, more exposed, or cooler than the rest. This was difficult to do in p5.js as RGB values have to be inputted and replaced in a ‘trial and error’ method to find a satisfactory colour combination, which would be an arduous process.


Lastly, I added a small black circle in the middle to make it look like a CD and animated them all to rotate at the same speed to give it the effect of a rotating vinyl. (Had I made the central circle bigger it would look more like a vinyl but the designs would not be as visible, so I kept it smaller).