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!).
Most likely you will be creating some sort of shape such as an ellipse. An ellipse takes four values, a x-coordinate, a y-coordinate, and width and height. If you want your ellipse to move, your x and/or y values need to be variables! If you want your ellipse to change size, your width and/or height will need to be variables. Let’s say we want to move the ellipse along the x values. We first assign a variable called x a start value (how about 20?). Then inside the draw function, we need to increment x. It may seem intuitive to just add x++; or x+=10 for a faster speed. This will work but will send the ellipse to the right endlessly. What if we want to have the ellipse move back and forth? We need more variables. Make a variable called left and a variable called right. Set right equal to true since we want it to move right first and set left to false. We also need some y value too so our ellipse will show up on our canvas (we’ll set it to 5). Our variables that are declared…
