The aim was to emulate a swiss poster pattern I came across on Dribbble. While tinkering around the code, I began to play around with the rotate property and realized I could develop this intricate pattern by rotating the points about an axis; which moves during each iteration of the nested loop.
The process is quite basic and I have outlined it below (the code is commented as well to depict the structure):
- Illustrate a grid of ellipses with a nested for loop.
- While generating each elliptical dot , translate the origin of the grid to the center of the eliipse (we are plotting the eliipses in center mode).
- Plot the ellipse at a further distance (i,j) from this new origin. This helps in the ellipse paths crossing over onto each other.
- Rotate about the new origin at a fraction of the frame rate (can tweak this as it suits you.)
- The color is intended to change at odd and even cycles of rotation. Also I am tweaking the opacity to bring the pattern forth slowly.
I played around with the code a lot, before arriving at this final result; it never started in this specific manner as stated above.
- Key Pressed is used to generate a screenshot whenever needed
- Save Frame is used to generate frames for compiling the video later
Rotational Pattern - Daydreaming
Rotational Pattern - Full Version
-
Processing is a java based environment for coding in the context of visual arts.
You can download the tool here. -
Used the tool for generating a sample from the song Daydreaming by Radiohead.
tool.
-
Processing Help Reference. I looked up the reference to understand some of the used concepts like push, pop for interacting with the co-ordiante system.
-
A tutorial video I referred, in order to generate a video from a set of images in processing, by the very helpful Daniel Shiffman (check out his channel for some insane Processing content)
- Devin Sager for the Dribbble post reference.
- Daniel Shiffman for the Processing Help.