NOC | W5 – The Ballet 🩰

Working Process

Inspiration ✨

When I started working on this week’s assignment, I had already admired many other classmates’ works; they were all so good! Consequently, I felt quite intimidated by the idea of competing with them in terms of subject matter. As I pondered what theme to pursue, I stumbled upon a video of someone attending a ballet performance. Though the costumes of the dancers weren’t clear, in my mind, ballet performers always wore shoes with lace ribbons, fluffy and pristine white dresses, and garments that accentuated their beautiful body curves. During their performance, their movements were both powerful and graceful, and their bodies, actions, and stage formed numerous elegant curves! Thus, I decided to base my “Additive Waves” assignment on a ballet theme.

Set up a Performance 🪄

(I would not include many screenshots of my coding this time in this part (because I’m short of time and lazy😅😅😅). But I think they are quite clear in my P5JS editor! Click the link to the sketch at the bottom of the blog and you can take a look at them for each part I’m talking about!)

After confirming the theme, I began to imagine the scenes I should create. I sketched some sketches on Procreate, including the backdrop, the lower body of the ballet dancer (skirt, socks, shoes), the back of the ballet dancer, and the appearance of the ballet dancer performing on stage. (My sketches are a bit ugly, haha.)

✨ The first sketch is the backdrop, corresponding to B1 in the coding. When it naturally hangs down, it has many curved folds. By adjusting the parameters inside the trigonometric function, I can also make the backdrop pull up and hang down by adjusting variables. When the backdrop is pulled up, the background color changes from black to white, and when the backdrop is lowered, it changes back to black.

✨ The second sketch is the lower body of the ballet dancer, corresponding to Class B2 in the coding (as well as various variants of B2). They are divided into several groups (legs, feet, and the skirt) because I find this coding simpler for me. I couldn’t figure out how to use the same group of circles to vary them in different positions through programming. It’s easier for me to duplicate more groups than to think about it, haha. Similar to what I did in the week 4 assignment, I used the frame count to make them appear one by one from top to bottom. The amplitude of the sine wave and the size of each circle are also subtly changed by me according to the needs and parameters of each small circle and their y positions.

✨The third sketch (which doesn’t exist because I think what I draw looks ugly, so I won’t put it in, haha) is about the back of the ballet dancer, corresponding to Class B3 in the coding (and various variants of B3). I used trigonometric functions to construct shoulder straps, waistbands, waist-reducing bands, and part of the skirt. The amp of the waistband and the waist-reducing band are also related to the y position of the small circle, creating a slim waist effect.

✨The fourth sketch is the stage (I didn’t create a class for it). Three ballet dancers are dancing on the stage. Here I abstracted their bodies as five quadratic function curves, representing their torsos (two vertical ones), skirts (two overlapping horizontal ones), and arms (one curve, but through the torso left and right). By modifying the sine wave with the frame count added as a parameter in our class, I achieved the effect of real-time changes for them. By adding mouseX and mouseY, the dancers can move up, down, left, and right due to changes in the mouse and get different amplitudes at different positions, creating a feeling of dancing. The principle of the stage setting is similar to what was mentioned above. By adding “random” to the parameters, the stage has a sparkling feeling. When switching to the stage view, the stage changes from white to black. By pressing different keys, dancers, and lights are added one by one. Pressing the keyboard ‘f’ helps the stage return to white when the performance is over, and at this time, you can switch back to view 1, lower the backdrop, and end the performance.

Finally, I have to mention that my coding architecture cannot be complete without the following keyboard shortcuts, which allow me to switch views and adjust positions and colors to complete the transition between stages. (As shown in the figure below.)