How to draw a hexagonal shape dynamically using HTML, CSS, and JavaScript

Hexagons have great visual appeal (okay, I think they look cool!) When stacked together they can also make interesting matrices but, I'm getting ahead of myself. Because I am a person of the gaming persuasion, I also think hexagonal matrices can be used to construct interesting game boards.

As a professional web developer, every idea that occurs to me somehow morphs into a web programming project. *sigh*

So, this example explores one approach to drawing a single hexagonal shape; this particular approach is a little more "old-school" in that it does so using HTML markup to fabricate containers which approximate the shape of a hexagon.

As a side note, I'll look at using a newer (probably better too) process for actually "drawing" as a next example building this shape.

For graphic artists, drawing a hexagon could be done using a graphics program. These could be used in a web development project as sprites, but I'm getting ahead of myself. As a starting point, I just want to 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. This particular example is very "blocky" (low-resolution), so the full benefits of scaling to accommodate the display aren't explored here. However, be aware that such scaling is a highly desirable part of graphical development projects in general--and using vectors is a means of accommodating scale variability.

Here is my original note sheet. (Please forgive the jarring verbal transition--writing for humans is harder for me than writing the code to make the computer do what we're after.)

Click "Generate" to build board.
Each click rebuilds the board.

Objective: To create a hexagonal shape using HTML and CSS

Secondary Objectives:

  1. should be reusable "n" times in order to create a matrix of shapes
  2. should be fast and lightweight
  3. shouldn't require images or additional HTTP requests beyond the first.

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", they are not intended to be changed by caller

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...

See Also