Mathematical Patterns - the Infinite Star

I decide to create a code.org "Artist" project where we can use a canvas to make drawings and patterns. I was tinkering around with it, and created this beauty. Its very simple to make, and watching it in motion is truly amazing!

You will need to go to code.org as the "Artist" canvas is only available there.

The variables are available on the left-hand menu. This variable is called 'Long' as it is will be used to increase the length of the pattern. This is set to 0 for the first job.

Now, we create another variable called rotation. This, by itself is pretty explanatory and put it with the 'Long' variable. It is set to 360°, as the maximum rotation is 360° as per mathematics.

The star pattern is broken into 6 parts, but my approach breaks it into only 3 parts. To setup the function, you will have to click the function's tab and choose new function. It will send you to thee function setup, as seen in the picture.

So, we have named a function, but now we have to give it function. So, we start off by making it move "Long" pixels, and turn left by "Rotation" degrees. This makes it so that all we need to do is change the variables to get a different outcome

In the "Artist" setup, the brush colour is always set to black. To change this, we will have to manually change the colour. Luckily, in the Brushes menu, there is an option called random colour, which changes the colour. So we add it into the function, to get a vibrant look.

Now, to make the project start working, we have to start changing the variables, to create the pattern. So, we do this. With ever move and every turn, you will be made to move 1 pixel extra, and the angle of rotation would decrease by 60°, causing a shift from 360 to 300, then 240, 180, 120, 60 and finally 0, creating a spectacular diamond structure for us to see.

Now, to get the diamond structure, we would have to repeat the function several times, so inside the function, we would loop this by 300 or 240, as they are a multiple of 60. This will be valuable later on, and it creates 2 diamond structures from the centre, with a connecting line.

Now, click close on the top-right corner. Go to the function's tab and choose the function. Then, take a loop and put the function in the loop. Put the number of repetitions to 3, as this function needs to be repeated thrice.

As you might have noticed in the previous picture, the sprite is not on the screen, so we need to bring it back. As our number of repetitions is 300, we can just call the sprite back by asking it to move forward the "long" number of pixels. But, we seem to run into an issue in the 2nd and 3rd repetition as seen in the image

If you haven't noticed yet, we need to rotate the sprite to repeat the process once again. We rotate by 60° as the canvas has been divided into 6 segments, and 360/6 is 60. So, we rotate it once again, but there seems to an issue once again.

Yes! The issue was that the the "long" value was way too high, causing the 2nd long value to be 600 and the 3rd to be 900, causing a major breakdown in the mathematical pattern. So, to fix this, all we need to do is set the "long value back to 0 once again, and we will get the finished product, a mathematical pattern with no errors.

And thats it! I hope you enjoyed and understood this mathematical pattern. If you don't understand, all you need to do is whip up a whiteboard and trace what all I did, and it would make perfect sense. You can make your own changes to this, like reducing the change in angle, or putting in a brush pattern, as in math, there are endless possibilities.

The link: https://studio.code.org/projects/artist/S6uZchBy9R3CkyyYsIqfnjV_7yaduSM3prEVklfoiz0

And bye now! :/