As our first Computational Media assignment, we were asked to create a screen drawing using a p5.js. I decided that I wanted to come up with something a little more generative with some random values assigned and in particular something that moved. Once I began thinking about this, I had a hard time shaking the Windows screensaver of yesteryear, Mystify Your Mind.
It seemed achievable and simple enough. Without fully thinking it through, I found myself tumbling down a rabbit hole of topics that we didn’t cover in class. I got it to a point where the reference is unmistakable, but I think there may be more elegant ways to achieve these results with a bit more advanced coding techniques. While as a class we were beginning with simple 2D primitives and colors, I ended delving into the following topics that were not in last weeks lesson:
- if statements
- for loops
The first obstacle was replicating the dynamics of a bouncing ball. This was relatively simple to figure out. I set up a boolean value for the x and the y coordinates that would switch from true to false when it exceeded 400, the canvas size, and from false to true when it dipped below 0. When the boolean was true, x or y would increase by a certain amount and when the boolean was false, x or y would decrease by a certain amount.
I decided that the speed of the particle should be constant and that the x speed or y speed values should accommodate for that constant total speed, so I used a bit of trig to set up.
In other words, dX would be a random value, between 0 and s, the variable for speed, and dY would be the square root of s squared minus dX squared.
What I didn’t realize was that in order to replicate this logic on a polygon, I would have to run 4 different simultaneous bouncing particles algorithms. In order to do this, I had to read up a bit on arrays. I brushed up on this and nested them into for loops to assign values and retrieve values. The resulting code produced the following:
Pretty close, but the behavior isn’t perfect. I think in order to get the ghosted follower profiles seen in the gif above, I’ll need to learn 2-dimensional arrays, and that felt a little too off topic. What’s shown here is faking it a bit by simply subtracting the dX or dY value multiple times.