P5.js { 2D primitives / translate() / rotate() / random() / fromAngle() / push(), pop() }
I was inspired by the kaleidoscope I used to play with as a child. I think it’s very classic and varied, but reminiscent of a classic pattern, so when it comes to designing GENERATIVE PATTERNS, it’s the first thing that comes to my mind. At the same time, I think its versatility gives the possibility to keep changing the shape, arrangement, etc. in the future. So in this first week, I wanted to make my first attempt with the basic transformations I had learned.
A Typical Kaleidoscope Pattern
I tried to incorporate various 2D primitives, such as square(), ellipse(), triangle(), and easily drew a basic version of the kaleidoscope.
Static 2D Primitives
Then in the process of researching translate(), I accidentally discovered the superimposed use of translate and fromAngle on the official website, and tried to apply it to my kaleidoscope, so that the three patterns began to rotate regularly.
Screenshot from: https://p5js.org/reference/#/p5/translate
Not satisfied with the three patterns moving in the same single way, I started to combine push() and pop() to separate the three patterns to define their translate positions. Define a new translate() after each push(). After defining a set of graphics, restore its position through pop() and reset the new value.
translate() + push() & pop()
In addition to this basic kaleidoscope design, I also briefly tried using random() on color selection and stroke weight variables, where each mousePress() would automatically select a background color and the strokeWeight size of all shapes. I’ve thought about trying to correlate the color selection of a graphic with the random result of the background color, but I haven’t succeeded yet.
Finalized Work Video Documentation
Future Potentials: I’d like to give it more variability in terms of shapes and permutations of shapes, such as setting several fixed shapes to be placed in the gallery, and randomly selecting one at a time; and then permutations where shapes in the more central part of the gallery are set to rotate less, and the number of rotations increases as it expands outward, and so on.