Concept:
This idea of records spinning came into my head as I was djing over the weekend and seeing how the dj software looked like:

I was also inspired by the album cover of Kanye West’s album “yeezus”:

My piece inspired by these has a couple of functions. It spins freely when nothing is touching it. Once a mouse is hovering and pressed down above one of the records, that specific records starts slowing down, eventually coming to a stop, much like a real record. Once the mouse is released, the record starts spinning again, but with a different rectangle and central circle color, as if you have swapped the record out.
Code highlight:
// Rotate and draw elements for each circle
let angles = [angleLeft, angleRight];
let rectColors = [rectColorLeft, rectColorRight];
let innerCircleColors = [innerCircleColorLeft, innerCircleColorRight];
for (let i = 0; i < centers.length; i++) {
push();
translate(centers[i], 200); // Move the origin to the center of each circle
rotate(angles[i]); // Rotate by the current angle for each circle
drawSpinningElements(rectColors[i]); // Draw spinning arcs and rectangles
pop();
}
// Update angles based on rotation speeds of each record
angleLeft += rotationSpeedLeft;
angleRight += rotationSpeedRight;
This segment of code is in charge of the spinning element of the piece, using a loop, it affects both records. Within the loop, rotate is used to rotate the elements of the rectangle and the arcs. the angleLeft and angleRight incrementing is what creates the animation.
Reflection and future improvements:
For future improvements of this piece, I would love for the record to be spinning only when music is planning, and/or have the colors respond to different parts of music like drums or snares.