Tangela random tangle

tangela.svg

Some tips for understanding:

There is some dead code here, so running a trace from the top of the <script> section is probably the easiest way to understand it.

SVG’s don't support any kind of looping, so the 144 individual cells are hardcoded, (0-11)². Everything after line 386 is drawing Tangela’s face, and is comprised of special cases.

To form the tangle, for each hex, we must connect each of the six sides in pairs. Thus, each hex will be comprised of three individual paths. If you number the sides of each hexagon clockwise 0 through 5, then you will be able to understand the nomenclature that I used. Each connection is represented by a two digit name corresponding to the two sides that are being connected. Hence, “03” represents a straight path through the center of the hexagon from side 0 to side 3, “02” represents an arced path from side 0 to side 2, and “01” represents a sharply curved path from side 0 to the neighboring side 1. Since these are the only three necessary curves, all other permutations are appropriately rotated aliases (lines 82-108) of these three stencils (lines 40, 54, and 68 respectively).
Given this library of tiles, we need only choose which three pairings to draw in each hexagon. Since combinatoricly we have 6!/2³ = 90 unique tile configurations, I simply placed all of those possibilities in a single array called plist.
From this list, a random configuration is drawn (pun intended) for each hex.