For this assignment, I aimed to create an animated visual pattern using ellipses that oscillate back and forth in a circular motion. The key concept behind this project is the use of trigonometric functions (sine and cosine) to control the position and size of the ellipses over time. Additionally, the animation changes direction resulting in a dynamic visual effect. Since the goal of the assignment was to create a harmonic motion, my inspiration or the starting point was the sine and cosine functions in itself rather than a wish to recreate something in particular.
Here is the final sketch:
One of the more challenging parts was the math behind the sketch. First, by using sin and cos together for x and y coordinates, respectively, I was able to trace points on the unit circle. The variable i is used as an angle that varies from 0 to 2π and therefore a full circle is completed. The effect of f is to control the frequency of the oscillation. As f increases, it speeds up the oscillation, making the ellipses move more rapidly from side to side. I wish I could explain the radius calculation better, but honestly, it was just a random experimentation of plugging in random values and functions until I achieved a smooth transition (a trial and error method more of).
// Looping through 600 iterations to create a series of ellipses
for (let i = 0; i < TWO_PI; i++) {
// Calculating the x and y coordinates of the ellipse. Using sin and cos allows for the circular appearance
let x = (width / 3) * sin(i * f);
let y = (height / 3) * cos(i * f);
// Radius is based on a combination of sine and cosine functions involving 't', 'i', and 'f', resulting in a changing size over time.
let radius = 60 + 100 * sin(12 * sin(t) * sin(i * f));
Another challenge was changing the direction of the animation. I decided to switch directions once f reaches TWO_PI instead of when i does. This was also a personal preference, as I wanted the animation to loop for longer. I then switch the direction and set t and f to 0 to keep the animation from accelerating.
// Check if 'f' has completed a full loop (TWO_PI)
if (abs(f) >= TWO_PI) {
// Reverse the direction of motion
direction *= -1;
t=0
f=0
}
Some ideas for further enhancements could be implementing a smoother transition in the change of directions, as well as enhancing the visual appearance. I do like the fact that the visuals are rather simple and allow for focus on movement, structure, and shape, but I believe this sketch has more potential than only that. Speaking about the aesthetics, I was also quite satisfied with the rotateX(1) line, which enabled me to create a little more depth in the sketch and move slightly beyond the 2D view.
To add, this was actually where I started to notice some interesting dynamics. However, I found this initial pattern a bit too flashy and uncomfortable for the eye. In general, this assignment was an engaging and freehand experimentation with changes in values in the trial and error method until I achieved something that I liked. Here is the first sketch: