First off, what do canvas and herd immunity have in common? Well, nothing as far as I’m aware. Of course if you do a search for these two terms after this has been published then this post should be the only link between these two concepts.
Anything that is in italics like this refers to a side rant that’s filled with some tech jargon. You don’t have to understand it, it’s not important.
Before I go on, I shall just explain what herd immunity is for the benefit of those who don’t know. It has multiple meanings, but the one I’m talking about here is, the indirect immunity against a disease or virus due to the immune individuals in a community. The concept is simple, being immune to a pathogen does not only protect the individual, but also those around them. Since they cannot contract the disease, they will not be another transmission vector.
Game creation
I started off my game development adventures in plain-ish OpenGL. That’s a basic graphics rendering engine that allows you to draw shapes on the screen by define the coordinates of the objects. There are extensive tutorials on it where you can see exactly what it does. Compare this to the game creation engines of today, like Unity or Unreal Engine, and you’ll see a world of difference. There are no asset management functions or nice preview screens for you to see what the game will look like before you actually compile it. And I liked it.
It felt like I had full control over every aspect of my game. No wrestling with strange bugs and wondering why my objects aren’t appearing in the correct locations. (Okay, there were lots of bugs, but to be fair it was because I didn’t code it properly.) The point I’m trying to make is, when you use a high level rendering game engine to create something, you spend a lot of time trying to figure out the quirks of the engine instead of focusing on the logic of the game. (Admittedly it was also because I was new to it.)
The Horrors of DOM
DOM is short for Document Object Model. That’s the thing browsers use to make sense of your HTML code and display the pretty site you see. I have been working with web development for quite some time now and I am happy to say that I know enough about the quirks of HTML/CSS/JS to piece a website together. But for the untrained, they will be faced with the strangest and seemingly unsolvable quirks.
Quick rant, z-index is one of the most misleading properties I’ve come across. Every time the divs inexplicably appear in the wrong z order, I try in vain to use z-index to fix the issue. It usually turns out to be a problem with the position property instead.
At the start, I was lamenting on how difficult it was to corral my divs and make them behave. How nice it would be to simply define the exact coordinates of my div.
Yes, I know that position:absolute exists. But the top and left values are relative to the first parent in the hierarchy that have position:relative set on it. Something that was not intuitive to me at the time at all.
The HTML Canvas
When speak of the wonders of the canvas, I refer to the functionality of the canvas in just about any platform. But let’s stick to the HTML one for now. The canvas element allows the programmer to specify what to draw on the screen using coordinates and lines. No more wrestling with divs flying all over the place and behaving strangely. You define the exact start and end coordinates of the line and it appears where it should. I am aware that coding a website in the canvas is a foolhardy task to take on, but nevertheless, I was flushed with the same emotions I had when I first started programming.
Herd Immunity
Now what does herd immunity have to do with this? Well, it’s a concept that I found interesting enough to code out. I made a bunch of things appear on screen and was pleased with it. But I needed something more to make it even slightly interesting.
Below you will see a simple program demonstrating the concept of herd immunity. The rules of the program are simple. Green = healthy, blue = immune, red = infected, black = dead. Infected dots have a chance of infecting healthy dots. The dots can recover after a while, but if they are sick for too long, they die. Click/tap a button to begin.
Update: iFrames don't want to play nice with my security settings. So here's a convenient link
And there you have it. A working HTML5 canvas playground. I’m hoping you are viewing this on a HTML5 browser, what with it being > 2016. The awesome thing about this is that it should work on every modern browser including mobile platforms.