Category: 03-AnimatedLoop

 

I began making the piece by first experimenting with arcs and easing/time based functions in p5.js. After coming up with some looping shapes that I liked, I added more and more until it was basically a jumbled mess. After looking at it some more, I related it to a telescope pointed at the sky and was inspired by the recent "Storm Area 51" hype and memes to create something relating to extraterrestrial life. So, I decided to make a loop that shows supposed extraterrestrials eyeing the Earth's moon for some purpose. I'll link the experimental sketch at the end as well. 

Beginning my actual sketch, I started making the moon shape and detail first. I wanted to add enough craters to make it distinguishable as the moon, but also not too much to draw all of the attention of the piece. I then started working on the scoping/targeting device and used sinusoidal (sin and cos) functions to make the dashes move in a somewhat elliptical rotation around (width/2, height/2), as change their radii in a similar fashion. For the rounding triangle, I used one of Golan's examples of how to change a circle into a triangle (and vice versa) in p5.js and changed some of the parameters to augment my loop. I then began to move on to the stars in the background.

For the stars, I used two different easing functions. The first was a cubic function I wrote myself which uses the curve (x-0.75)3+0.5 as its basis, and the other was the DoubleExponentialSigmoid from Golan's Pattern_Master folder. I used both because I wanted to vary the movement of the stars coming in from off-screen, and by manipulating the functions differently for each individual star, I was able to add some "character". I also added some stationary stars to make the scene more realistic. Finally, just to underline the fact that this loop was "occurring" in outer space, I added a slightly larger star to represent the sun which also moves sinusoidally about its center. I added text to make the scene feel more like the view from a scope or some kind of binocular, and added movement to that as well. At the end, for some extra detail and a repetition of the alien motif, I added a UFO in the corner to make it seem like the beings looking at the moon from this point of view may not be the only extraterrestrials out there. 

Ultimately, I feel I could have added more detail to the moon and UFO, but both did not want to distract the viewer and didn't have enough time to do so. I'm also not completely happy with the movement of the stars, as both easing functions look like they have very similar outputs in the viewable range. I also don't like that I was not able to increase the resolution, but I had a lot of problems with GIF creation as my loop had a longer period than the example from class on computational exportation, so it took a lot longer than I expected to construct a GIF out of my many frames. I am however, happy with the output of the binocular view, as it has a sci-fi feel to it, and the reduced resolution can add more to the story about the extraterrestrial's technology. That all aside, I believe I made a decent product that utilizes some of the many capabilities of arcs in p5.js. 

Experimental GIF loop:

https://editor.p5js.org/svsalem/sketches/vD9v-5B60v

Final GIF loop:

https://editor.p5js.org/svsalem/sketches/rHk3ddtlm

Sketch:

 

GIF:

Note: Quality of colors, shapes, and fps has been greatly reduced to compress file size. For the original file project, visit this link.

Initially, I began trying to create a precise fire by programming each flame individually. The endeavor seemed too tiresome to complete, until I realised I could simulate the particles using randomised variables. This greatly reduced the amount of time required to code this piece. I particularly enjoyed playing with gradients using essentially only fill() and arc() and creating an atmospheric animation. I also enjoyed implementing subtle animations such as the twinkle of the stars and the shooting star. 80% of creating this piece was refinement. Using mathematical functions to simulate organic, fluid fire required a lot of toggling of different variables and trial and error. I used sigmoid functions to control the size of the flames as they burst into and fade out of existence, as well as to control the size and position of the shooting star. These sigmoid functions gave the appearance of acceleration and deceleration.

I am proud of how well the fire turned out. It looks organic yet also stylistic. The light emanating from the fire and the shadow the log casts on the ground are effective at giving the fire an appearance of warmth. I like my use of bright, warm colors against dark, cool colors. I wish I could have added more elements to the scene, like a caveman cooking some meat over the fire for example, but the fire and the rest of the background proved too time consuming for that. I would have also liked to pay more attention to the shooting star, which could have had a longer trail and maybe a twinkle as it fades. I think I could have also added more detail to the trees, the ground (adding plants or rocks) and the texture of the log, while maintaining the Adobe After Effects-like animation style.

 

The process of creating this gif was a combination of incredible fun and stress. I considered doing a geometrically focused animation à la Bees and Bombs, but I do those kind of works a lot. I decided to use this project as a way to explore some whimsy instead. My full animation ended up being a little longer, with a day night cycle and a moon, but near the export phase of this project I ended up having a series of technical difficulties involving file size and frame rate, so I simplified the deliverable for the sake of time. I ended up choosing the smoothStep easing function partially because I liked the feeling of the sun and cloud coming in as if they were runnings lining up for a race. I would say the piece may not be incredibly complex, but it was helpful to get out of my stylistic comfort zone a little. Where I fell short most was interactions in the scene. The sun/cloud and hill/sheep interaction is basically the same, and without the day night cycle there isn't as much to unify everything in the scene.

P5JS code

I spent a lot of time struggling with creating the central object - the segmenting circle. I wanted it to have certain properties so that when I moved it around, it would naturally segment itself. When I finally managed that to my satisfaction, it was just a question of using the tool I had created in an interesting enough way. I wish I could have figured out how to make the balls actually fragment more than I managed, but overall I like how the basic interaction creates interesting illusions in the eye.

https://editor.p5js.org/ilovit/sketches/dg17jIwJm

Code Link

The overall process for this piece was interesting, and challenging in places that I did not expect it to be. I found that one of the most time consuming pieces was wrapping my head around and  implementing the relationship between the wave loop and the loop combining the separate motions of the boats tilt and flip. Because of how I had implemented the location and multipliers based on frameCount, I found in counting the length of the flip cycle, that reaching a point of repeated looping took two loops to settle into. This took a lot of finagling (and magic numbers) to fix . I was did not implement all of the elements that I initially planned to, and am unhappy that the boat rising motion is abrupt. However, I am very happy with how the waves turned out. I used the 'doubleExponentialSigmoid' ease function to increase their size, and sin relations to 'wave' them. I think it worked nicely, visually relative to the boat, and moving across each other.

Initial Sketches: