Keali-AnimatedLoop

seastarsgif

kealiseastarsgif

The introduction to the assignment and the subsequent examples shown made me instinctively assume that the gif project would have to be approached in a very geometrical and structured way–which was different from my usual ideas. As such, a lot of my original sketches and planning were ingrained in shapes and solids, trying to integrate a seamless transformation while manipulating perspective in space. However, I was unable to come up with an polished idea from this track, mainly because I couldn’t tell without modeling, whether some figure would be able to translate or rotate into a continuously looping gif. So I worked off my personal aesthetic of a streamlined design again, particularly inspired by the sinusoidal wave from Golan’s sample gif. With my affinity for nature, almost reflexive because of my constellation clock from the previous assignment, I thought of utilizing multiple sinusoidal waves as strings and curtains of stars against another dynamically rendered blue backdrop–but then finally decided to actually contrast this by customizing horizontal waves with differing heights and angles to mimic waves; I increased the substance of the idea of a body of water by also adding noise waves that barely blend in with a top-down gradient, upon which I loop the raining down of stars that lose opacity as they fall, as if swallowed by the waves of the water. I believe I succeeded at sticking true to the type of design and atmosphere I wanted to output–like my clock, I wanted the visuals to exude a calm sense of smoothness and serenity, rather than the mind-boggling, logically impressive illusions and riddles of the complicated, geometric gifs. Food for thought on improvements include: an alternative to noise waves that better compliment sinusoidal waves by being more wavy and streamlined, but also visualizes a solid color underneath it’s boundary; comets/shooting stars in the skies to add texture (streaks from the changes in velocity), perhaps another approach to gradient backgrounds (increase complexity/layers if necessary).

**in regards to exporting the gif, I used Photoshop after exporting the frames from the p5.js framework–but as to why it’s incredibly slow on some browsers, I unfortunately can’t tell why…
I also realize that my noise waves end up becoming the bug in the animated loop–they don’t carry over seamlessly like the sine waves do, so it probably would have been better if I just kept and multiplied the sine waves (I’m so sorry)
for future reference, I’ll try to learn how to somehow “hardcode” noise waves–I could numerically manipulate the sine waves to customize height, girth, speed, and ensured that the frames exported matched up as it loops, but I could only change the potential height and depth of the noise waves, and as such they are still “random” with each run of the program.
I also made the conscious decision to keep the noise waves because I felt like the bottom of the graphic felt a bit too empty with just the linework of the sine waves, and the gradient of the background..

gifnotes

GitHub repository//