On a boring weekend while trying to kill some time, a friend of mine recommended me a video1 on YouTube which inspired me to write some code to make patterns like below.
This is called Modular Multiplication on a Circle(Times table). Here I’ll walk through a tutorial on how you can make this yourself.
To make these patterns, the circle is first divided into n equal parts. They’re numbered from 0 to n — 1.
Each part is then joined with its kth multiple. The pattern shown below is made with k = 7. Which means that 1 is connected with 7, 2 with 14, 3 with 21 and so on. Doing this for above setup, gives the following pattern.
Doing the above procedure for a large number of parts give rise to some beautiful patterns. Let’s make them using HTML Canvas.
First lets initialize the canvas and draw the main circle.
Circles are drawn with
The first checkpoint of the code would be to divide the circle in n-parts and get their coordinates for later use.
And the final part to join the points with their index multiplied by k.
.lineTo() are used to specify start and end points. And finally
.stroke() method to draw it.
Also added some random colors for visual appeal ;). Take a look at my version here2.
You can read more about HTML Canvas here3.
Hope you liked this! Give this some claps on Medium.