The beauty of Spirographic Art
I drew inspiration from one of the sketches in the Computer Graphics and Art book and started to experiment with lines and loops to see what creative and motion graphics i could create with all the knowledge we have acquired in class.
Here is the image of the Computer Graphics Art that inspired me.
After getting some practice with the looping and line strokes i wanted to create a rotating motion like figure with line strokes that would alternate in colors.
In order to get the motion correct i had to make sure I got the degrees and angles correct and being able to move them by a small angle. After watching Dan Shiffman’s video on rotate and Transformations I was able to learn the translate() and angleMode(DEGREES) functions and how to properly used them.
Here is a link to his p5.js tutorial video https://www.youtube.com/watch?v=o9sgjuh-CBM.
I started coding by initializing the global variables that i might need such as storing X and Y coordinates the color values and the boolean flag to alternate the colors. Then I began by creating the canvas and setting up the background color values. I used the random() function inside the color for all the RBG arguments so that i can get a new color on everycall. I also used a predefined alpha value as the transparency of the color.
I setup the X and Y position to be in the middle of the canvas as i wanted it to start from somewhere in the middle of the canvas since the range of the random spawn would be controlled by the new_step offset value.
Inside the draw function i started by translating the X and Y position and rotate by the angle variable which was initialized as 0 but would increment by 1 every frame. I also created the line and played around with the x2 and y2 coordinates. I used to colorFlag to change the color of the stroke of the lines.
After this i decided to increment both the X and Y position by 1 to move the next line a little bit. I also had a checking function which used the angle variable and checked if it was more than 360 if so it would reset the X and Y positions by randomly adding a new spawn distance from the step offset range, while setting the angle back to 0. In other words this allowed the circle of lines to start again from a new random location once it was completed.
Lastly, something that i wanted to solve was the problem of the X and Y position to be out of the canvas. Thus i used 4 if conditions to see if it coordinate was greater than the canvas size if so i set it back to zero. Else if it was less than 0 then i simply set it to the canvas dimension (width and height). This allowed me to the wrap the design around and continue back on the canvas.
In order to make the sketch visually appealing I tried to remove the restarting aspect at a random location and started to create continuous spiral which wrapped around the whole sketch in a diagonal manner.