WP2WS01: Transformations and Vectors in p5.js

– Assignment requirement –

This assignment requires us to develop sketches utilizing vectors and transformation functions in p5.js, experimenting with diverse functions in p5.js and various types of motion.

– My Sketch –

https://editor.p5js.org/tj1059/sketches/RHiemSY3d  

– Inspiration –

In class, Prof. Moon showed us a variety of sketches with simple code yet fancy visual effects, therefore I intended to do something similar, i.e., to explore different visual effects by manipulating lines of codes and parameters, while at the same time including some mouse interactions if possible.

When browsing online about vector/transformation-related effects, I found this site a great reviewing material for what we’ve learned about p5.js transformations. It demonstrates an interesting result in the end, which I found quite inspiring and could think of several tricks that I’d like to manipulate and add on almost at the first glance. Therefore, I took this as a starting point for my project.

– Basic Understanding –

In general, the original code applies the translate() function and for loop to construct an effect of multiple (8) squares swinging along a circle track, where each square allows a similar construction of multiple (6) squares following a similar effect. The entire sketch, therefore, shows a pattern of multiple (8) square clusters demonstrating dynamic motion. The size of each square (no matter the big ones or the small ones) varies as the clusters swing, so does the distance between each small square and between each cluster as well. Other tricks that contribute to the final effect include frameCount(), a system variable effectively facilitating dynamic motions, and Perlin noise, an effective function that produces “a more naturally ordered, harmonic succession of numbers” compared to the random() function.

– Further Development –

Based on an understanding the basic logic of the original code, several further manipulations that I could think of include but are not limited to:

• Motion pattern: 

I first utilized rotate() function on frameCount() variable and the for loop index without applying the noise() function, therefore making each cluster rotate following a clockwise circle track instead of swinging back and forth. Similarly, each small square is also set to rotate in circles yet anticlockwise by setting the parameter negative for rotate() function. Fm = frameCount()/100 was examined to be the proper speed of squares rotating visually and aesthetically. 

• Interaction

The most intuitive idea that came to my mind when seeing this project was to add mouse interactions to control the transformation in some sense. After several trials, I decided to change the extent of each cluster gathering together using mouseX(), in other words, the further the mouse is away from the center, the further the clusters are away from each other. The closer, the closer. In this sense, I utilized the map() function to map the mouseX() variable to the distance between the center to the furthest that each cluster could go (within the canvas). I constructed an updateP() function to update the parameters every time the mouse is moving in order to pass to the draw() function. I experimented several times and set r = 30 * noise(fm) in the end. The noise() function was applied to maintain the effect of each square dynamically varying sizes. 

• Color

Amazed at Prof. Moon’s example of transformation applications, I was especially impressed by the color effect of blendMode(ADD) where the most overlapping parts demonstrate the brightest colors instead of all lines showing the exact same color. Therefore I experimented with several blendMode() effects, finding the ADD effect the most attractive in my project. 

Besides, as I already applied mouse interactions, I intended to slightly change the color to make the visual effect in general more smoothly and dynamically. The map() function was again utilized to map the filling color from transparent (when away from the center) to bright (when close to the center where clusters gather together), while the stroke color from transparent (when close to the left) to bright (when close to the right). A gradual transition is therefore operable when users move the mouse around.