In my project, I utilized a rotating animation project created with p5.js to demonstrate the dynamic rotation of the cartoon avatars of the members of the band MAYDAY.
This project is a character animation demo based on a sine wave rotation effect and contains five characters, Ashin, Masa, Monster, Ming and Stone. Each character has a unique look and feel with different colors and images. The rotational motion, driven by sine waves, achieves a rhythmic oscillation effect similar to that of a live concert.
Each member uses separate push() and pop() blocks to control their rotation and position. The code applies the rotation by rotate(sin(angle) * 0.5) to give them a dancing animation effect.
Explanation of each parts:
global variable angle: controls the angle of rotation, which changes slightly randomly as angle += 0.1 + random(-0.05, 0.05) in the draw() function increases, giving the rotation a natural wiggly effect.
sin(angle) of the sine wave to achieve a smooth rotation effect, so that the rotation angle is constantly changing between -0.5 to 0.5, creating a dynamic visual effect of rocking.
the random(-0.05,0.05) randomization makes the character rotate slightly irregularly, adding to the vividness.
Interestingly, in addition to using rotate(sin(angle) * 0.5); for rotation, I can also use rotate(angle % TWO_PI). This produces a continuous smooth rotation, rather than a swing. There are advantages and disadvantages to both methods, but in my opinion, I belive the sine wave rotation effect is more appropriate for the "Live Nation" theme of this project.