What is Hexygen?

Hexygen is an interactive Hexagon graphics generation tool that runs straight off your desktop browser, with most of its functionaility available for mobile devices too. You can use this to create hexagon-themed desktop wallpapers/Facebook covers, or using the 'modal' pages to store more information inside each hexagon, it is an example of an alternative way to present lots of information in one interactive page; squares and circles can be a bit boring after all!

Hexygen is my second major visual project. I decided I wanted to make fewer but better concept demonstrators, which means I won't be releasing new experiments at the same pace as earlier ones, but hopefully each output is something truly a step forward, and actually worth people's time :)

Features and Modes

Like my previous major project, Gasketch, the best way to discover the features and capabilities (and bugs) of Hexygen is by playing around! But just in case you prefer a more formal listing, here are the "features":

A sleeker interface: I took feedback and lessons learned from previous experiments and tried my best to make this a more user-friendly tool, especially for mobile. You probably have already discovered that you can click/tap on the hexagons and edit data contained within them, and the options buttons are presented differently on desktop as to mobile.

I took feedback and lessons learned from previous experiments and tried my best to make this a more user-friendly tool, especially for mobile. You probably have already discovered that you can click/tap on the hexagons and edit data contained within them, and the options buttons are presented differently on desktop as to mobile.

Themes: I have bundled with this demo a handful of "Themes", which tells the drawing engine what colour to use for filling the hexagons and drawing the edges with. There is also an option to make up your own theme.

I have bundled with this demo a handful of "Themes", which tells the drawing engine what colour to use for filling the hexagons and drawing the edges with. There is also an option to make up your own theme.

Styling: I have also added a few sizing, density and effects options, which control the look and feel of the overall graphic with or without text labels. You can combine any size with any effects, with any density!

I have also added a few sizing, density and effects options, which control the look and feel of the overall graphic with or without text labels. You can combine any size with any effects, with any density!

Numbering: I sneaked in a 'show numbers' button which displayed which order the hexagons get drawn. Very quickly you can tell that I've drawn them in 'rings' from the middle outwards in a clockwise direction.

I sneaked in a 'show numbers' button which displayed which order the hexagons get drawn. Very quickly you can tell that I've drawn them in 'rings' from the middle outwards in a clockwise direction.

Stateful Hexagons: The hexagons in Hexygen aren't just drawn, they are stateful and can each store a document which is visible/editable when you click/tap it in "Edit" or "Presentation" mode. You can even download the current state of the graphics as A JSON file and load it again later or share around. This is one feature I really wanted to get working with Gasketch but didn't have the time to do. If I ever make improvements to Hexygen I will extend this feature to allow for more complex things to be shown instead of just text.

The hexagons in Hexygen aren't just drawn, they are stateful and can each store a document which is visible/editable when you click/tap it in "Edit" or "Presentation" mode. You can even download the current state of the graphics as A JSON file and load it again later or share around. This is one feature I really wanted to get working with Gasketch but didn't have the time to do. If I ever make improvements to Hexygen I will extend this feature to allow for more complex things to be shown instead of just text.

Radius and Layers: Depending on your scenario you may want smaller hexagons, or more hexagons (such as if you wanted to make a hexagon grid). Hexygen draws the hexagon in rings , so you can add or remove rings as you please. And when you change the radius, all hexagons will be resized accordingly. Note that because the hexagons are stateful, once a hexagon layer is created it is always there. Removing a layer only removes it from view, not memory. Any information you had in it will be kept unless you choose to clear the hexagons altogether.

Depending on your scenario you may want smaller hexagons, or more hexagons (such as if you wanted to make a hexagon grid). Hexygen draws the hexagon in , so you can add or remove rings as you please. And when you change the radius, all hexagons will be resized accordingly. Note that because the hexagons are stateful, once a hexagon layer is created it is always there. Removing a layer only removes it from view, not memory. Any information you had in it will be kept unless you choose to clear the hexagons altogether.

Edit mode: in this mode (which is default), a paragraph of information inside each Hexagon can be modified through a 'modal' form, and you can also customise that hexagon's colour and label or make it hidden.

in this mode (which is default), a paragraph of information inside each Hexagon can be modified through a 'modal' form, and you can also customise that hexagon's colour and label or make it hidden.

Presentation mode: in this mode you can view your final Hexygen graphic more cleanly. All the controls are hidden (including the page subtitle), all customisations are applied, and when you click on hexagons the information is presented more normally (instead of inside form inputs). A small 'exit' button at the upper-left corner will return you to "Edit" mode (or just press Esc if you're on a desktop).

Acknowledgements

Thanks to other generous javascript developers, tutorial writers, and stackoverflow-ers, I didn't have to develop every bit of code from scratch. Here are the list of modules/packages/guides I used:

Bootstrap (as usual)

D3.js by Michael Bostock

jQuery by jQuery Foundation

FileSaver.js by Eli Grey

jQuery MiniColors by Cory LaViska

Inspiration for this project also came from this example, and this example, and this article, and many more others who have tried making cool stuff with Hexagons!

Also thanking my physiotherapist who made sure my muscles didn't give out after a few coding marathons.

One last thing...

If you wanted to play with the code, you may have already noticed that the javascript on this demo page is minified. This is so I don't waste unnecessary bandwidth as the real file is larger. The tidied up code will soon be available on GitHub. It will also have a few more demo config files to highlight the potential of Hexygen.