I want to start making at least a few more canvas examples that are the kind of example that I will be coming back to a few times. In other words the kind of canvas example that might prove to be a bit more that just a center piece to write about in a blog post before moving on to the next thing. That kind of habit is something that I would like to break with at least a few of these canvas examples.
I was happy with how my grid gradient canvas example came out as it is was a canvas example that I put a little more time and effort into than usual compared to most of these thus far. The main reason why I liked working on it so much was the plug-in system, this turned out to be something new and interesting for me. However that canvas example was just an eye candy type thing, it would be nice to start another canvas example that is something a bit more than just a nice visual effect of sorts.
So this canvas example will be similar to the grid gradient example, but this time I will be aiming for the start of a world simulator type project, something maybe vaguely similar to the game sim earth. Such a project is not the kind of project that I am going to complete in just a day or two, and even then I don’t think I could write everything about it in a single post. So this canvas example will be a starting point or core of such a project as it will be a long time until I get something that is really something like sim earth.
So lets start out with just a core world.js file along with some additional dependencies, and just one plug-in file for the core of this project. For now I will just want to get the basics of this worked out before going crazy with plug-ins for it.
I have a utils module for this canvas example as is the case for most of these canvas examples. So far for this one I just have the distance formula that I will be using in the world module, as well as maybe some plug-ins in other files so it needs to be parked here.
As the complexity of the world module and set of plug-ins grows so will this utility module. Basically anything that is used in two or more files should be parked here as a default. Eventually there might be an array of modules like this one, but for the core of this project just one general, generic utility library might work just fine.
The world.js file is the main module that will create all the cells for the gird that will make up the world. It also contains some internal objects that can be expanded with optional plug-ins via a public load method. So I aim to try to keep the world.js file as slim as possible, pulling much of what I think might need to happen for this project out of the world.js module and into external plug-ins.
I have worked out one plug-in thus far for this world simulator that just works out some basic values for a land object that will be appended for each cell in the world grid. This plug-in just creates some land objects for each cell and attaches a fert property that stands for fertility. Very crude, and in time I migt make a more advanced plug-in for this and much more when it comes to everything about land, but for now this plug-in is just to test out the core features of my world.js module.
Now for the draw module that contains the methods for drawing the state of the world object. For now this draw module just contains a method for drawing the background, and a method for drawing all the cells in the world object. For the sake of this post I just want to focus on the core of what the module is, so just solid color squares for the cells is fine.
In some canvas examples I might put more time and effort into the main.js file, and other aspects of this part of canvas project development. However for the sake of this post this kind of simple, minimal app loop design will work well enough to just test out that my world.js file is working as I want it to. In fact O could even just take a headless approach when it comes to just working out a model, but this is a canvas example post.
And here is the html that I have worked out thus far for this example.
There is a lot more work to do with this one of course if I choose to put some more time into this one. It looks like I do have the basic idea that I had in mind working at least, but now there is further refining the core of this a bit more as well as writing some additional plug-ins. Still the aim of this post was just to get together the core of what a world simulator type project would be and thus far I guess that is what this is for me at least.
This is on of my canvas example projects that I would like to put more time into, but there are many others that come to mind that might be good candidates.