Creative Computing Hub Oslo (C2HO) presents a series of workshops focused on getting started with creative computing in p5.js, a beginner-friendly JavaScript library with a full set of drawing and sound-making functionalities. In the third workshop we will explore interactive and aesthetically pleasing visuals.
Part 1: Interactive Circle Grid
To begin this workshop, we will expand upon the concepts from the previous two workshops to create a grid of circles that get bigger as you move your mouse closer to it (code from p5.js user jpcaldwell). This is accomplished using the distance and map functions from p5.js that were introduced in the last workshop. We also implemented a gradient with the circles by slowing increasing the red and blue values as we go left to right.
Part 2: Cyclic Animations
For the next section, we will use the sin and cos functions to create objects that move in a cycle (code from the p5.js wavemaker example). In this instance, we have a circle that moves in the center of the screen according to the sin and cos function, and the position is kept track of using the frameCount function, which counts the number of frames executed since the program started. The angle used in these functions can be changed based on the mouse's x and y positions.
Part 3: Wave Animation
While the wave animation below looks complex, it is simply a combination of the last two parts. Each circle uses the exact same cyclic animation from part 2, but arranged in the same grid patter as part 1.
Part 4: Noise and Dynamic Sizing With Wave Animation
To make our wave animation a bit more interesting, we will introduce the same dynamic sizing functionality as part 1 and noise on the cycle animation. The p5.js noise function is similar to the random function, but produces more organic feeling random numbers.
Part 5: Noise Orbit Part 1
Using the same concepts from the first four parts of this workshop, we will be recreating a noise orbit (credit to Stevan Dedovic for the code). While this animation looks complex, it can be easily broken down into three parts. The first part is simply making nested, circular polygons, seen below.
Part 6: Noise Orbit Part 2
Next, we must distort the polygons using the noise functions. Every time the page refreshes, the distortion function will produce slightly different distortion for every polygon.
Part 7: Noise Orbit Part 3
Now we just need to get the polygons moving! This will be accomplished using the same kind of cyclic animation with the sin and cos function as parts 2-4 of this workshop. Quite simply, we will add some noise to the z axis and nudge the circles in a cyclic pattern. In the example below, you can increase the intensity of the nudge by moving your mouse to the right, but the pattern will always move back to its original position because of the sin and cos functions.