sansal-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

rysun-AnimatedLoop

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.

 

lsh-AnimatedLoop

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

ilovit-AnimatedLoop

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

lubar-AnimatedLoop

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:

szh-AnimatedLoop

 

I created the wave/oscillating motion with the easing function sineOut(x). I achieved the oscillating motion that I intended but I fell short in trying to fully loop (without hiccup) the add ons/effects I had paired with this animation:

I had hoped to achieve a motion blur effect, which with the affect of the arcs changing dimensions (closing and opening like Pacman), gives the trail it leaves behind a certain effect.

I was inspired after looking through various of beesandbombs' gifs: https://twitter.com/beesandbombs/status/1090673528758849536?s=20

Where the movement of each individual piece seems to be controlled by a sinusoidal wave. I also tried playing with the overlap of the colors of each piece (where some parts of the line looks darker because of the varying opacity).

Code

vingu – AnimatedLoop

view code

This piece is based off a childhood memory: I planted a seed in a pot, later my grandma re-potted the pot with a flower, I got confused by how fast the seed grew and yanked the flower out. I spent a lot of time testing out the colors/composition and kept simple motions/animations. I'm happy with how the sequence turned out, it's very straightforward.

At first, I was confused with the frames/frame rates/speed/time etc.. I increased the number of frames and percentframes to make it longer (it seems to work? but made things way more difficult later on). I used if statements with certain frame sections to make it sequential (a lot of hardcoding). I wish I made the code more efficient and used more easing functions to show more emotion. For example, having the eyes follow the plant, or the eye enlarging. Also having the plant leaves/petals move with gravity.

Draft in Google drawings using the circles and arcs. Testing colors and positions.

 

Sequence/Storyboard sketch.

MoMar-AnimatedLoop

Ob-La-Di, Ob-La-Da!


https://editor.p5js.org/MoMar/sketches/JHpokW31q

I started working on this piece with no idea how I'll program the animations. I made two completely different sketches from the end product at first. When I started coding, I realized that I didn't have time to figure out the nuances to program the original sketches. So I looked at some of my favorite childhood cartoons for inspiration. I found an animation loop of a sea monster playing a guitar and eating boats. I decided to program that.

Critique:

I'm disappointed that I couldn't figure out how to program in time a loop of boats spawning on the top right corner to be eaten by the monster. If I had more time I would've worked on the graphics a tad bit more and had the guitar move around.

Regardless, at the end of the day, the knowledge I gained from this excesice is invaluable. In High School, to animate objects we used to move them using "for loops". Easing functions blow that method out of the water. I'm sure these functions will come in handy for future projects. I also programmed this using Visual Studio. I'll write a blog post (or just post a template) on my website on how to do that soon and link it here.

 

 

 

tli-AnimatedLoop

Code

I didn't start with a sketch for this piece but rather a concept: tiling. My goal for this gif was to create a grid of many shapes that shift together in visually stimulating ways. This gif was strongly inspired by the video Canon, which we were shown in class. After I finished implementing a basic unit that can rotate in four different directions, I experimented with different layouts, movement patterns, subdivisions, and layering of the various arcs before I settled with this result. I tried to encourage visual interest by obscuring certain elements and revealing others, but it was a fine line between visually interesting and chaotic. I still think I failed to create a cohesive piece, but I take this as an opportunity to experiment with these simple moving tiles. After reviewing other people's work, I almost wish I had gone a representational route instead of playing with abstract shapes. I used the doubleExponentialSigmoid easing function.

vikz-AnimatedLoop

https://editor.p5js.org/vikz/sketches/3PhA3Unrt

For this piece, I thought it would be particularly interesting if I could play around the concept of having my frames be able to stand alone, but also seamlessly blend together to form a larger picture when stacked together. For some reason, I can't seem to figure out if I can embed pictures side by side on WordPress, so for now, my current example is how the gif interacts with each other when vertically stacked. Although my original sketch is not exactly what I created in the end (four circles that would follow a trajectory that could bleed into other squares) - I believe my new outcome was more interesting because of the functions I used (doubleExponentialSigmoid) and (elasticInandOut) from github libraries https://github.com/IDMNYU/p5.js-func/blob/master/lib/p5.func.js and https://github.com/IDMNYU/p5.js-func/blob/master/lib/p5.func.js. Frankly, so much of the time was spent trying to figure out how to alleviate the hiccups and create a GIF, so I know that much more time could be put into creating a more "seamless" flow between the different GIF frames, as there is some sort of hard line where one frame ends and the other starts.