Project Title: Kaleidoscope
Link to sketch: https://editor.p5js.org/mld9095/sketches/AMcUsa7tr
Inspiration
For this assignment I was inspired to create a repeating pattern like a kaleidoscope, that would change color and pattern with the gui parameters.
Documentation
In my initial exploration for this assignment, I first created patterns using Daniel Shiffman’s 8.6 Fractal Tree code as a base. I wanted to deconstruct this code to create an interesting pattern, with more shapes, movement, and colors to create the kaleidoscope. Additionally, I wanted to see how other shapes would be visualized with the fractal pattern, like circles and hexagons as opposed to lines.
Using a function pattern(len), with len or length being included in the shape parameters, the length of the shape would be changed as the pattern recurs. I started with one pattern to understand how the code is visualized when sin() and cos() functions are added to the rotate() function.
I then duplicated this pattern four times at different angles to create more complex geometric patterns.
To create more complex patterns, I played around with different colors and shapes, and changed the angle() parameters like the width and PI angle to change the speed that the shapes were moving at. I then added GUI to change parameters like the value “len”, the RBG color of the hexagon, and the width and PI angle that the angle of the pattern is mapped on.
Process Videos
Reflections
My biggest challenge for this assignment was adding the GUI, as I wasn’t sure how to incorporate the gui parameters with a function as opposed to an object class. This led to a lot of experimentation (https://editor.p5js.org/mld9095/sketches/3hTJnRk9X) trying to use both functions and object classes to create the same effect; however, I wasn’t able to figure out how to smoothly incorporate both, and looked for references that utilized gui not with an object class.
Additionally, I found that the shapes I used in the fractal pattern didn’t visualize the fractals as clearly as Daniel Shiffman’s tree example did. I tried to incorporate lines, circles, and squares to see if the fractals could look more connected or branch like, but the shapes seem to be more similar in size despite the increments of length changing. Going forward, I would experiment with the pattern and shape orientation to see if the visual output would look more reminiscent of a kaleidoscope.
Final Assignment
References:
- https://editor.p5js.org/slow_izzm/sketches/rJXAyI7JV
- https://editor.p5js.org/natureofcode/sketches/DaINq2A85