Star Spinners

Sep 11 2018

I recently completed another HTML5 canvas animation project. The spinning star, found in the Cover Pages drop down (you can restart the animation by clicking the mouse).
First, I came up with the basic idea of how I wanted the final piece to look, but this changed during the building process into what is now the final product. The changes weren't major, I decided to go from discs traversing the screen to stars. As a result of this change, I added the spinning element. The motion trails were always a part of the idea.

Despite the end product looking fairly basic a decent amount of work went into it and a decent amount of problems were faced along the way. First challenge was actually creating the star object (I wanted to do this on my own so I didn't look at any templates that might be online...for stars). I drew out a prototype on paper and went about recreating it on screen. I noticed that it could be done by just drawing point to point...but I didn't see how this could be easily automated (e.g automatically change size when the screen changes size). I also thought that maybe I could "glue" two shapes together...pentagon and a bunch of triangles, but this also was too much messing about. The pentagon however, gave me the breakthrough. (I did look up the template for the pentagon though). I managed to modify it...and quite considerable modifications were required...go get it to look like a weird star. The final step was to mirror this weird star and merge the two mirror images to get a real, nice looking star shape. The beauty of this approach despite it's apparent awkwardness is that I have easily implementable control over how many points the star has. Changing one variable will change the number of points while still appearing symmetrical and balanced.

The next challenge were the motion trails. I read a tutorial that helped achieve this effect, and it was very helpful https://www.kirupa.com/canvas/creating_motion_trails.htm. But it wasn't completely what I needed. I decided to create a new object class and new arrays, but getting the objects to spawn in the right place needed some "creative thinking". I got the right inspiration from https://www.youtube.com/watch?v=vqE8DMfOajk. This basically would have done everything for me but I'm not using p5 so I had to come up with my own solution. That solution was TWO arrays, heh...big mental breakthrough here. Basically, I fill one array with the star objects x-coordinates through time and the other array with it's y coordinates. I use those as the spawn points for my motion trail objects. To get the end result I adjusted the size and the opacity of the motion trails, also I implemented tricks I learned earlier to pop these objects from the array to save processing power.

Through the testing process I got to practice the idea of object creation within arrays. Also, I greatly improved my understanding of the hierarchy of the animation process. Basically, I 1) Create an object.
2) Create a function to draw the object.
3) Create a function to handle the movements of the object, which also calls the earlier draw function.
4) Then you create the amount of objects you want through an implementer function utilising array pushing.
5) Finally, you use the animate function, which clears the screen and updates repeatedly to make it look like something is moving (but its just your update function being run in multiple succession. The challenge arises when you have an update function tied to a different object that you only want to run once...easy just run it outside the animate function...but what if you want to run it at a time that is specified by a different update function that IS within the animate call...Well I don't have an answer for this one. What I ended up doing was using the inbuilt setTime() function to do it...it actually worked quite well...but still didn't feel as nice. I actually ended up removing this effect all together as I wanted the focus to be on the star object.

So even though it looks basic, I have a degree of control over the animation. E.g how fast the star moves across the screen, how fast it rotates, how long the motion trail is, what the colours are. All of these are easily changed.