1 - The star module
First off there is the module that I worked out that creates arrays of points that when drawn in order end up drawing stars. There is more than one method provided by this module to create these point arrays, and some internal helper methods to parse options and get a point when given a radian, and radius from a given origin.
One method that creates an array of points that makes up a star I called just simply create1. This method works by having not one but to radius from a center point. There is one set of points at one radius, and another set of points at another radius, and both sets of points are spaced out between each other half way. When the array of points is drawn the line will be drawn from a point at one radius to the next point at the other radius, thus forming a star like shape that way.
The other method that I worked out is called just create2, this method creates an array of points by way of having a single set of points at a single given radius, the order in which points are added to the array is just set by a point skip argument that defaults to 2. This method does not work so great as of this writing when it comes to stars that have an even number of points, the eventual work around would have to be something that involves create collections of points or some other kind of system to help with this. I will be keeping the current state of both methods in the module as i continue working on this no matter what though.
This is not the end of the line when it comes to using this star module or any other module like this. The idea here is to create a collection of point locations and that is it. When it comes to drawing this to the canvas that will be the responsibility of the draw module for this example. Also when it comes to creating a collection of these points that in turn will also be the responsibility of another module that I will be getting to that has to do with creating and update a pool of display objects.
2 - The utils module
As with many other canvas examples I have a general utility module, this is where I park methods that I will likely be using across two or more modules, or might use in other canvas examples. So it is nice to have them in one place, and keep them in a pure function like state if possible where there is just the arguments and the returned result. I do not just use a single utils.js module for all canvas examples, so the state of this kind of module will change a little from one example to another depending on what I will be doing in the example.
Just like all my other canvas examples I also have my usual create canvas method that I am now using in all of them more or less as a way to just keep everything in line with a certain standard. Simply put any basic thing that I want to do to any canvas element I place in this simple copy and paste method that I can take with me to any other canvas example. However in some cases I might make a few project specific tweaks to the function.
As of this writing there is nothing new that I have parked in the utils method. these are all methods that I have in other canvas example modules, it is just that this is the set of methods that I am su far just using with this example only.
3 - The pool module
Here I have an object pool module which is just a fixed collection of objects that I use over an over again. I made another module in my canvas example on object pools where I get into this topic a little deeper, but for this canvas example I made my own custom cut solution for this very example, rather than something that might be a little more reusable that I worked out in that post. Which is something that I often do so when and where needed anyway with these examples as I like to keep each of them there own independent thing.
In this module I also have a number of helper methods that have to do with things like what to do when a display object moves out of bounds, and how should a color property be set for a display object. For example I have a helper method that will use my utils distance method to set the distance between the current position of a start to the center of the canvas. The bounds helper is then called to check to see if the star has reached max distance, if so it will use Math.atan2 to get an angle from the center and use it to set the position of the star to a location at the other side of a circle area that is defined by the max distance state property.
4 - The draw module
I then have some draw methods that I worked out that I made as part of an additional module following just th simple object literal pattern. For now this module is to just draw a background for the example, and also of course this contains my draw points method that is used to draw an array of points to a canvas such as you guessed it an array of points that draws a star.
In version 0.1.0 of this example I added a draw method that does not draw to the canvas, but it does use the 2d context of a canvas element to create and return a linear gradient. This can the be used as a style such as the style of the background of the canvas. I have wrote a post on the this 2d context method or course, and I also created another canvas example that is another kind of gradient type project. It is nice to make use of this kind of method to create a background that is at least a little more interesting than just a solid color background.
I also have additional helpers for this draw method that have to do with drawing debug info about a star, drawing lines that show the current heading and facing directions. This is a common practice when it comes to canvas examples as i am alwys working on them and I like to have methods for drawing the current state of various state proprieties.
Like all of my canvas examples I also like to have a draw version number method so that I know what version is deployed here at the website. This canvas example like all my others is still very much a work in progress, and I do get around to adding features, improved features in place, and creating new versions.
5 - The Main.js file
Here in the main.js file of my star canvas example I am making use of all of the modules that I have covered to make a finished canvas project of sorts that looks kind of cool. At the top of this fine I have some constants for the various options of the pool state object, these are hard coded settings for the speed and size of stars, in time I am sure that this list of constants will grow.
The utils create canvas element method is then what I want to use to create a canvas element with all the various properties of the canvas set up just the way that I like it. When doing so I can also set the actual display width of the canvas, but not the scaled size of the canvas, that I like to do with CSS.
I then use my pool module to create a new main state object with a few properties that I have set with some hard coded settings, and I pass a reference to the canvas element while I am at it. After that I have my main app loop in which I am drawing the current state of the main pool state object, and calling the update method of the pool module to update that state.
As of 0.1.0 I now have a single event listener attached to the canvas that for now I am using to just toggle a debug mode on and off each time the canvas is clicked. In the debug mode I am not displaying detailed into about each star, in future versions this might change to something else that displayed into about the state of the example over all, but that is something that I will be writing about more when and if i get to it.
When this is up and running I get a bunch of stars moving around the canvas with all kinds of different properties for the number of points a star has as well as the color, facing direction, heading direction, and so forth. There are all kinds of additional things that come to mind with this so there might be some additional updates coming at some point in the future with this one.
6 - Conclusion
So this canvas example of a star module worked out pretty well, it was a nice little exercise at making stars for use in a canvas element. There is more than one method for making them both of which have to do with Math.cos and Math.sin that are used to find out points around a given origin point. I also have come to find that making a system that will work not just with stars alone, but arrays of points in general, is the best way to go about drawing stars. There is also come up with more than one system for the same thing, I used to like one way of drawing stars, but have come to find that I now like a whole other system for doing so.
In this post I also touched basic on a number of other topics also, such as separating a module from a view by having the star module septate from the model that is used to draw the array of points to the canvas. With that said I hope that you picked up one or two more interesting things when it comes to canvas, and javaScriopt in general that can be applied to your own projects in the future.
New versions of this will be coming out sooner or later, there is more work to do on this one for sure as there is code that I am not using when it comes to the create2 method for example, I would like to do more with user input with this one also, I have some things drafted out but it might be a while until I get to it. I do have a lot of other canvas examples that also need a lot more work also after all.