How to draw a hexagonal shape dynamically using HTML, CSS, and JavaScript
I've always thought hexagons looked cool. Stacked together, they can also make interesting matrices.
And, being of the gaming persuasion, these hexagonal matrices can be used to construct interesting game boards.
Further, being a web developer for the past decade or so,
I find the idea of the web environment a familiar yet continually fascinating challenge for doing just the sort of thing that gaming is.
Hence the motivation for this mini-project: How to draw a single hexagon?
And, how to do so using the tools associated with web development.
Hopefully this will build a corner stone to creating more complex examples, such as the matrices described.
But, since everything starts somewhere, this effort starts with the first visual building block.
One additional clarification; rather than doing this using a graphics program, we'll approach this shape drawing from a vector standpoint.
Theoretically, using vectors should give us the ability to scale shapes if, for example the screen accommodates higher or lower resolutions
than we used during development. I don't plan to visit this aspect in detail, but this avenue should be available should it be desirable later.
Author:
Thomas Ballard - http://thomas.ballard.ws
(c) 2009-2010 -- ESQ Software - http://www.esqsoft.com
authors note:
This was a fun day-sized project. If you find it useful, do me a favor and click through a
sponsor's advertisement, every cent helps us cover our hosting costs. THANKS!
Objective:
To create a hexagonal shape using HTML and CSS
Secondary Objectives:
1. This should be reusable "n" times in order to create a matrix of shapes
2. This should be fast and lightweight
3. This shouldn't require images or additional HTTP requests after the first one to get it.
Public and Private interfaces:
1. user/programmer can set...
w to specify the size of the width of the shape
h to specify the size of the height of the shape
note: "public", meaning that these are intended to be changed casually
2. housekeeping variables are determined based on the public vars
note: these are "private", meaning they are not intended to be changed casually
------------------------------------------------------------------------------------------
Creating an algorithm for drawing the shape
The hexagon consists of 6 sections, in a 3x2 matrix (3 horizontal, 2 vertical)
| x0 | x1 | x2
----+-----+-----+-----
y0 | ^,> | -,> | v,>
----+-----+-----+-----
y1 | v,> | -,> | ^,>
----+-----+-----+-----
Legend:
> means x is changing by |n|
< means x is changing by -|n|
v means y is changing by |n|
^ means y is changing by -|n|
------------------------------------------------------------------------------------------
Converting the concept for the algorithm into pseudo JS code
we'll draw the shape in two passes (you may have noticed that the top and bottom halves are
merely mirrors of each other) each pass needs to understand how to transition between x0, x1,
and x2 we'll send a parameter to the pass function to inform it which half we're drawing,
top (y0) or bottom (y1)
we need to factor in the dimensions of a "pixel" (generally a 1 x 1 dot used for drawing).
In this example, we may want those pixels to be more than 1 x 1 (for example, I'm starting
this with 5 x 5 chunks).
so...
set starting vars
begin the pass and watch for transitions between x0, x2, x3
at transisitions, alter the y acceleration variable (yy) so we're changing the relative
y position correctly for the section of the matrix we're working on for that segment.
...and now for something completely different...