Canvas Example grass blades
1 - The blade.js file for this canvas example
So for starters I made a blade.js module that I will be using to create just one blade of grass that will be rendered to a canvas element. This blade object will contains an array of points that go from the bottom of a given canvas, along with other properties that are used for rendering. So for one thing there is a base position object that is a point on the bottom of the canvas element. From this position upwards a bunch of line segments will be drawn, but not all at once.
The blades module has just one helper method that is used to create the array of points for the blade. When it comes to rendering the t and tMax properties of a bald object will be what is used to know how many of the segments to draw from the bottom to the top. More on this later when I get to the module that will be used to draw things to the canvas.
So for now the blades module just has a single public method that creates a new blade object. This module is not going to be used by itself, although I guess it could when it comes to just testing out the module by itself when working out new features for just a blade. However for this canvas example the blade module here is going to be used in yet another module that will be used to create a collection of these called the grass module, so lets take a look at that next.
2 - The grass.js blade collection module
So now that I have a blade module I will also want a grass module that will create an object that will store and array of blade objects created with the blade module that I covered in the last section. This Grass module will have just two public methods one that is used to create a new grass object, and the other that is used to update such a grass object.
3 - The draw.js module
So then I have my blades and grass modules that will be used to create a state object. That now just means that I need another module that will be used to render this module to a canvas element.
In my draw module I have a single internal helper method that is used to render a single blade object created with the blade module. This helper is made public in the public api of the draw module, so it is also public. In addition to this it is also called in the draw grass public draw method as that is just drawing a collection of blade objects.
4 - The main.js and index.html
Here in my main.js file I create the actual canvas element that will be used in this canvas example, as well as get the drawing context for it just like with any other canvas example of mine. In then attach the canvas element to a container element that I have hard coded in my html. I set th width and height of the canvas element, and also translate it so that it looks better.
I use my grass module here in main.js to create a new grass object. The grass object will then be updated, and rendered in the main app loop of the canvas example here that is powered by the request animation frame method.
So then I have my html that makes use of this main.js file, and of cousre I am also loading in all the other modules that the main.js makes use of.
The result as I would expect is a bunch of blades of grass popping up from the ground up over and over again.
5 - Conclusion
So this was a quick fun little canvas example that is what I had in mind more or less. I do like making these kinds of projects that involve just rendering something to the canvas over and over again like this. I guess there is much more I could do with this kind of project when it comes to making it a little more interactive, as well as have maybe a few more things going on to make it more interesting. I have a whole lot of other canvas examples, blog posts, and other ideas for projects though so I am not sure I will get around to putting much more time into this one or not.