Playing with Patterns
The first project of the PATTERNS chapter
contains a pattern of lines isolated within a circular perimeter. This project demonstrates the scaling of objects by using map() functions.
This project also utilises tau (also known as two PI) which is used to equally divide the spacing between each line segments within the circumference.
How the user is able to change the stroke weight and length via their mouse cursor is due the map() functions. The radius is mapped for the width (x-axis) of the canvas
while the weight is mapped for the height (y-axis). An alpha value is also added in the background() to add the "motion blur" effect.
Trigonometry
This interactive project shows objects individually following the user's mouse cursor around
the canvas. This also demonstrates the use of P5.js trigonometry function, atan2().
The inverse tan calculation is used to create a function that allows the individual squares to follow the cursor
(i.e. let rotateVal = atan2(mouseY - transValY, mouseX - transValX); rotate(rotateVal);).
Following the theme of "interpolation" from the previous chapter, the projects in this chapter also integrates the lerpColor() function to further add dynamic aesthetics.
Trigonometry - Iteration 2
Continuing on from the previous project, this iteration includes ellipses with smaller ellipses in each of them to further display the atan2() function.
Calculating the scale value is also demonstrated within this demo.
This project is essentially a combination of
PLAYING WITH PATTERNS and TRIGONOMETRY
to create an interesting interactive pattern.
Controlled-Randomised Pattern
A pattern of pseudo-randomised objects demonstrating ordered-random. This includes a bespoke animation loop that displays a "pulsating" colour effect.
To develop this, a function must be created to choose either 0 and 1 only
(i.e. let randomNum = round(random(0, 1))). This is then used in an if() and else() statements. For instance, if the chosen number
is 0, draw lines going to "this" direction, else draw lines to "that" direction. To prevent the canvas from looping continuously without using noLoop(), the P5.js
function randomSeed() is used. The value in the parameters of this function can be played around with until the desired pattern is displayed. To create the pulsating effect,
another if() and else() statements as well as booleans are used to determine the timing and speed of the animation.
Controlled-Randomised Pattern - Iteration 2
Identical in terms of functionality to the previous project, however, the objects are different and user interaction is considered.
The lines are replaced with rectangles and pulsating ellipses, which are inspired by a combination of postmodern aesthetics and the
movement of a subwoofer speaker. The interaction is done by the user's mouse cursor.
This is done by using the scaling function demonstrated in the TRIGONOMETRY project.
The function is then implemented within the ellipses' x and y parameters to create the "waving" canvas effect.
Patterned Wrapping Paper
The last project of this chapter demonstrates the basic capabilities of pixel manipulation from an image.
By calling the specific RGBA value of the image, a new value may then be implemented to change the particular colour (i.e. changing white to deep pink).
Instead of looping through the same image within the grid, the imageArray[] will allow that one image to be split into individual images.
In conjunction to this, the colourArray[] allow us to change the colouring of each individual image within the grid.
Instead of using a 2D array, the imageNumber variable represents the first image within the grid.
This is then incremented within the grid loop to count through all of the images (i.e. imageNumber++).
This will allow the function of imageArray[i] and colourArray[i] to work within the pixel array.
