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.

zapra – reading03

It's difficult to gage where I stand along this spectrum of first and last word art because the need for both is so evident. If we only have first word art, we will never move out of the "novel" stage, and nothing will be built upon, improved, or analyzed in depth. It would be similar to a conversation in which every person is simply waiting for their turn to speak, not absorbing or reflecting on the thoughts of those surrounding them. On the other hand, having only last word art would be as equally implausible; if we turn our backs on what is new and novel, we can only work to improve the limited scope of what already exists. As for technology and culture, I believe that while technology can incite quicker change, culture will always be what determines its success. Throughout history, we seem to gage major shifts in culture based on technological advancements: the Industrial Revolution, internet, smartphones, etc. However, at the core of all these major shifts lie societal impulses that seem to be ingrained in our human nature--the need for information, speed, convenience, and "more" in general. All in all, as technology continues to advance, our essence stays the same.

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.

vikz-Reading-03

"First Word Art" and "Last Word Art" are both terms that I have been exposed to before, and my general stance that I continue to take is that both can be considered as "true art". I strongly disagree with the stance that "first word art" is not considered art, because I do not believe that mastery has to take place in order for a piece to be considered "art". Rather, I believe in that art can take an exploratory nature and serve as a catalyst for other movements and/or works; to me, this sort of effect serves an even greater purpose.

I believe my interests lie more so within the realm of "first word art". Rather than create the "ultimate" perfected piece and/or artwork of a certain sort of style, I much rather enjoy exploring new concepts that may inspire and provoke others. I enjoy seeing the possibility of extension and further exploration that could ensue after my work, rather than my actual final work, at times.

Although we aspire to make things of lasting importance, many times our creations do not age well. Many times, this could be a result of not designing and/or creating for the future without future-design thinking in mind. From a design standpoint, Jamais Cascio's three main critiques for designing for the future can be applied here: 1) Does my scenario and/or product focus only on technological advances and miss the day-to-day of everyday life, 2) Does my scenario assume everything will work and miss the possible failures and unintended uses and 3) Does my scenario only focus on the dominant classes and ignore the broader impacts of society? When considering future works incorporating novel technology, we can often fail to consider our work these lenses, consequently failing in creating things of endurance and longevity.

gray-Reading3

One main purpose of art, in my mind, is to show something that has never been seen before. Art as communication of an idea is extremely powerful, and if an idea is represented in a way that has never been seen before, or a completely novel idea is represented, it can catch the attention of the viewer/experiencer and let them understand it in a way nothing else can. In this respect, new technology is crucial to art, in that it can express ideas that can't be expressed any other way.

I don't think my own work is first word art or last word art, really, because I haven't done anything that hasn't been done before, but I also haven't done anything in an already existing medium that is good enough to stand out much in that medium. However, I definitely would lean more toward first word art. I do find it a little daunting to try to use a medium that has been exhausted so fully, or at least to use it in a way that stands out. I get more out of trying to do something that's never been done before than just trying to perfect my technical skills, even though sometimes I wish I didn't feel that way.

One danger I see in using cutting-edge technology is losing your message or losing yourself in the tech. It's easy to come up with an idea that fits the medium rather than vice-versa, and while that's a good exercise and can sometimes even have artistic value, you're much more likely to produce something worthwhile if you choose the medium to match the idea.

zapra – AnimatedLoop

View code

Sources:
Circular easing function for tongue
Golan's frame exporter

Sketches:

After exploring some ideas for walking cycles, bubbling stew, bees and other critters, I think I subconsciously drew inspiration for this frog from these cinnamon toast crunch characters, who have the dumbest expressions and horrifically long tongues:

I knew I wanted him to flick his tongue and give the appearance of being alive, but the nuances of his breathing and eye movement developed as I started on p5 and played with the variables. When choosing the easing function, I flipped through the examples in p5.func until I found one with the elastic motion I was looking for ("circular in"). The rest of his body movement is based on sinusoidal curves, as I found it best to give the impression of heavy frog breath.

Debugging the flies (haha get it?). I created a function using butterfly curves to draw their paths (equation source in code).

I certainly learned a lot about nonlinear motion and designing programs that actually loop frames. Also, who would have thought that making the gif would be just as hard as the actual animation? I'm also learning more about mining the web for solutions rather than trying to come up with everything from scratch. I'm definitely getting more comfortable reading and understanding code that I want from existing programs, like extracting the easing function for the tongue movement. If I had more time, I wish I could've done more. I had intended for a more complex background, and feel pity for the frog that he'll never actually catch any flies. For now, he'll just have to look on hungrily, dinner always just out of reach.

gray-AnimatedLoop

This piece took a lot longer than I though it would. In the end, I think I'm happy with it, but I would probably try to add more interesting parts to the fire if I could. It was very difficult to get a shape where I wanted it and moving how I wanted it to, so my initial idea of having a lot of individually-moving parts wasn't super feasible. My vision was of the fire being more chaotic. Because fire is so organic, it feels wrong to have this uniformly-moving, symmetrical set of shapes representing it, so if I could change that I probably would.

I used the adjustable-center exponential sigmoid function, with a different center and different phases for different parts of the piece. At first, I wanted to use a bunch of different easing functions, but I realized that this easing in and out function was what I wanted, and that the different parts of the fire are all reacting to the same thing, so it makes sense for them to behave similarly.

p5.js code: https://editor.p5js.org/gray/sketches/g8tvFT-kn

iSob-AnimatedLoop

I first spent a long time making this the wrong way, with a dx and dy for each object that incremented cx and cy with each call of the draw function. Mistake! That was not the purpose of the assignment, but it gave me good practice.

I also got a decent amount of trig and geometry practice by borrowing Golan's triangle-circle arc transformation code, to implement the bouncing guys as circles who would transform into triangles and back as they bounced (see sketches.) However, this didn't provide the naturalistic bouncing I wanted so I deviated from my original plan. Ultimately, I never got the squishy effect I wanted, this probably required a more complex simulation of the bouncing entity that took 3D volume, gravity, and density into account.

The easing algorithms I chose were quadratic for squishing width / height(the simplest option that was more interesting than linear,) and smoothStep for bouncing / movement. In real life, the effect of gravity is closer to a parabola, but I liked how smoothStep looked.

I don't think this piece is conceptually strong or memorable, but I did learn a lot. Now that I have a better handle on p5 and animation, I can hopefully start making more interesting work.

p5 sketch

Paper sketches:

meh-AnimatedLoop

Link to p5js: https://editor.p5js.org/meij_who/sketches/e3jsDmSo9

I was inspired by the those trippy illusion patterns initially and decided to make some interesting variation based on those images. I used sine wave and SinIn ease-in function to control the individual radius for each arc and use and offset to make sure it the each radius varies. Then I used an array to store the traces to create a lagging with colors gradient. The motion blur is done by giving the background some transparency (big shoutout to Izzy's smart idea). Overall, I enjoyed the visual complexity of the loop i created but I hope that the motion can be more dynamic instead of just one shape rotating at the same place.