Member-only story
Animation Logic with p5.js
A while back I learned how to use p5.js for a game I was building. I decided to revisit the graphic library as I found an interest in doing something to creative and challenging — building a video for my band, Symfinity. I was not looking to make a music video but a video that could be used for live performances like many pop artists have. I can thank The Chainsmokers for their epic concert at Jones Beach for some added inspiration. They get to have cool visuals after all, so why not me?!
My main goal was to make something that clearly fits a song specifically, that changes when the music changes and maybe even depicts the lyrics a bit. The obvious choice for me was our single Everything I Know Explodes which is currently perhaps our most iconic song. At any rate, making animation requires quite a bit of logic and I thought this would be a good opportunity to talk about some animation basics.
Variables — Movement
Variables are an essential part of abstracting any sort of code. With animation, there is a LOT to abstract and a lot of values than need to change. If nothing changed, then there would be no animation after all. So plan on needing to declare many variables, typically outside the setup and draw functions because they will need to be changed outside of draw since it is constantly being called (that is how p5.js works!).
