• Elvin Ou

Attempt to animate

Updated: Oct 3, 2018

https://editor.p5js.org/full/B1wllacOm

For the second week during class we started doing some experiment in animating the graphics and it was fun to first time try out creating variables and making things move

EventuallyI created this little interactive animation on p5.js web editor.

It was quite a process for me to actually figure out what kind of animation I want to create and what I can create with the limited knowledge of coding. I first started with brainstorming ideas and also looking up some really cool examples as follows.


So I kind of concluded my idea into some couple keywords:

- constrained

- random (eventually become perlin noise)

- directional

- traces


From there, I started looking up Shiffman's video series explaining what perlin noise is and how to code it. I first actually understood a bit of the difference between noise and random, and how noise works in one dimensional way. I eventually was not able to get the 2 dimensional and 3 dimensional ideas of creating noise since the coding actually includes lots of other variables and functions that I have not learned. So I kind of walked a way from and started exploring more on the idea of "constrain" and other variables.

I actually tried out lots of stuff during the process and the most two interesting variables besides "constrain" is "randomCord" and "Easing". However I was not able to figure out how it works, so I mainly focused on "constrain"....

When I first used "constrain" to "trap" an ellipse in a square following the mouse, I was thinking what if I duplicate more "traps" and make a whole group of them. I kind of figure out and created my final animation by literally manually duplicating and switching the coordinates of the constraint and the values of the ellipse.I


In conclusion, I would love to figure out how peril noise actually works, and also how to code to let the ellipses follow the mouse along the central axis of each grid.