laurenhyoseoyoon / Generative-Coding-Project2

Creating animations/GIFs with p5.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

README for Assignment 2: Animated GIFs 🔎 🧭

✔️ Name:

Lauren Hyoseo Yoon

✔️ Personal link:

✔️ Describe each of the four GIFs

  1. BOUNCES
  • Balls that bounce consecutively. To illustrate the sequential manner of bouncing, different color schemes are utilized.
  1. CLOCK
  • Inspired by John Maeda's artwork <12 o'clocks>, this work illustrates the actual time of viewer's current location. To add dynamic components, the circumference of arc changes as seconds, minutes, and hours change. The seconds, minutes, and hours are also symbolized with different color codes.
  1. FOURIER SERIES
  • This project aims to illustrate the square waves in multiple lengths of Fourier series. Using the scroll bar in the bottom, user can interactively test that the more larger the length term is, the closer approximation to the the square wave.
  1. MUSHY BLOB
  • Illustration of the mushy blue blob. The dynamic movement and size of the blobs are created through the Perlin noise function.

(+) 5. WHAT KIND OF PILLS DO YOU WANT?

  • This is the project inspired by the artist Damien Hirst's Pill series, this project illustrates pills that are dynamically moving based on viewers' mouse movement.

(+) 6. ACTUALLY TURNING...

  • Word/Letter based project that the word "Turning" is actually turning!

(+) 7. RECURSIVE SIMULATION

  • Simulation of recursion using geometry.

(+) 8. RUN BETTER RUN

  • Character that shows a levitating run!

✔️ What P5 method or technique did you enjoy using the most? What was interesting to you about it?

  • Methods: (1) Mathematics Functions (e.g. Fouriers Series); (2) beginShape() and endShape(); (3) Push() and Pop() method
  • I enjoyed incorporating mathematics functions the most when creating GIFs. As I have strong interest in mathematics, creating GIFS provided me a mindblowing, yet practical space to leverage theoretical mathematics in generative arts.

✔️ Did you find any P5 functionality that wasn't covered in class?

  • Mouse usage which allows to incorporate more interactive components.

✔️ How did you get your looping gif to loop smoothly? What was hard or easy about that techinque?

  • Push() and Pop() method. This method is one of the conventional methods to illustrate dynamical movements and loopings of frames; it was useful for removing and creating new images that seem to be distinct but should be related in a sequential manner. Yet, the hardship of this method was to have a clear ideation of what are the objects that should be linked in order to create smooth dynamics - for isntance, what are the generic frames (i.e., storyline of the images) that should be created and removed?
  • Utilizing mathematical functions, for instance, fouriers series or sine waves. This method was especially convenient since the function itself is not bounded and thus generates the value (and image associated with this value) consistently.

✔️ Link a few GIFs you found inspirational here

✔️ List any resources (code, images, etc) you've used, and where you got them from

✔️ List any help you got from classmates or websites, so that you can remember it for later

About

Creating animations/GIFs with p5.js


Languages

Language:JavaScript 54.0%Language:HTML 46.0%