In my first getting started post on HTML 5 canvas I made a simple example on how to quickly throw together a canvas project in a way in which I usually do so when first starting out with a canvas project. However the way I wne t about things there is not always what I would do if things start to get a little complex. As a project grows in size it becomes more important to separate code that has to do with creating and updating a module from code that renders that module to the canvas.
So in other words if a project is something stupid simple things like separation of concerns does not strike me as something that is that important. However if I do start to put together something that is a little advanced, it does become more important to separate what is often called state, or a model from what is often called a view. Doing so is a good way of avoiding writing the dreaded spaghetti code as a project advances.
So I will put together a jsfiddle and talk about it in detail here
First off is the model this is what makes up the current state of data, and it also might contain some additional code that has to do with it’s storage, retrieval, and manipulation. Yet again maybe not, maybe you might break things down further. The idea here though is to try to break things down into independent parts that may or may not depend on each other.
One way is to create a Class for the state, but a more functional approach can also be done where the state of a project is just some properties in a plain old object, and that objects is passed to one or more methods that return a new state object without changing the state of the object that was given as an argument.
In this post I will just work with a hacked over version of what I was dealing with in my first canvas post, that looks like this:
In the old post this was part of a whole project all warped together in a signal immediately invoked function expression (IIFE) . However now it is pulled out of that, and is now it’s own little module. References to the canvas have been removed, and replaced with arguments, as doing so is more in line with separating concerns.
So obj will serve as the model, it’s job is to just simply serve as the storage of the current state of the model, and provide a method that has to do with the manipulation of that model.
When you have a given model there is more than one way you can often render data from that model. Yes I can just make a view that displays the current state of the circle, and nothing else. However I can also write a view that displays the current values of all variables concerned, display just a progress bar of two variables concerned, or a whole bunch of things at once.
As such something like this comes to mind.
This is just a simple example of what I mean, but maybe a better example would have to do with something 3D. When it comes to 3D objects there is the way that we see them, and the way that they actually exist in space. A cube that is the size of yourself on all sides will appear smaller as it moves away from you, but it does not actually get smaller now does it? Software that has to do with the size, position, and manipulation of the cube can be thought of as a Model, while software that has to do with the display of that cube can be though of as a view. Yes you can do what is typical with the view, and make it so it gets smaller as it moves away from a camera, but you don’t have to, you can design your view any way you want, you can make (or use) more than one with the same Model if you want.
So for this post I will just be covering the Model and having at least one or more Views, but I will not be getting into Controllers. I am not going there, at least not today. Still I will need something that fills a void when it comes to how this all ties together. So here it is:
So now I just have a simple loop that for now will act as a Controller in the Model View Controller (MVC) software architectural pattern. Just with the View I can have more that one Controller, one that updates a model by way of user input, and another by way of some kind of AI script, but that is a whole other ball of wax.
The goal I had in mind here was to just express the first step with writing better code when in comes to getting into making canvas projects vanilla js style. If a project is very simple it is not that important to think in modular terms, but as things start to get a little complicated, yes it is a good idea to start breaking things down more.
It is okay if I do not get things perfect the first time, in fact I never will of course. However even if I do find myself having to completely restructure a whole project from top to bottom I do not always really have to start over completely. Changing a class into a more functional from often just means replacing instances of the this keyword with a reference to an argument for example assuming that a method is more or less a pure function otherwise.
Be sure to check out my other posts on canvas.