The Art of Coding
Hello there! Hope you are doing good. I am back with another post on something interesting I recently did.
Complex geometrical patterns attract human minds far more than simple ones. One such pattern attracted my mind back in 2015. It was the logo of brilliant.org . After thinking about the exact pattern in it, I worked out two versions of the same in my drawing book (Yes, I love drawing and painting 😃 ).
Fast forwarding in time, let’s go to 2019, last year, when I came across a Javascript library called Processing.js. It is ‘the heaven’ for artist programmers. In simple words, processing is best (but not limited to) graphics library in Javascript. So far, I tried making fractal trees, ping pong and snake games, earth and moon illustration in 3-D etc. Literally out of nowhere, I had the thought of trying the same pattern artwork with this new tool.
The pattern seems complex, but logically it is too simple. Take a circle. Take equidistant points on its circumference then join each point to every other point. Done!
But computer doesn’t understand this. How to translate this to language computer can understand?
First things first; the environment. In processing.js, setup() and draw() are the functions that must be defined. Out of them, the block in setup() runs only once. It usually includes createCanvas() method and other settings like background color. draw() function runs repeatedly in loops, until any exclusively defined software or hardware event interrupts it. In simple words, setup() is preparation for drawing and draw() is actual drawing.
Idea is to get x-coordinates and y-coordinates of all required points into separate 1D arrays. The co-ordinates have to be in terms radius and angle, i.e. x=r*cosθ and y=r*sinθ. Here we can use javascript’s Math.sin() and Math.cos() or processing’s sin() and cos(). Both are good, but take care of unit of angle.
While iterating from 0 to 360 degrees, we push all the required points to the arrays, as follows:
But wait a minute! What are those 400 and 300? Here is simple task for you. Try the code without them. Those who have previously worked on graphics might get it immediately. If you understand why, let me know in comments 😀.
After getting all the points, all we need to do in draw() is to draw the lines. But here’s trick of p5. If we use a for-loop nested in another for-loop, we’ll get directly the final result and we won’t be able to see the development of pattern. Remember, draw() continues to run in loops until stopped. So, solution is to use the draw() itself as the outer loop with terminating condition and increment definition.
Still, whole design appears so fast, that we can barely see the development of design. p5 comes for help once again with frameRate function. Setting it to 1 will give required effect. You can play around this function with different frame rates to get different effects.
This code is very flexible. For instance, need more complex design? Simply decrease the increment value in the for-loop in setup(). Want to change size? Change the multiplier of sin() and cos() functions. Also with different multipliers to sin() and cos(), you’ll get ellipse of orientation depending on values. (Basic knowledge of conics helps a lot 😀)
Here is original code.
Hope you enjoyed this article. Give it a clap if you learnt something new. Take care of yourself and your family (hard times!) and happy learning!
