a post of utmost hexellence

hello friends, i am a hexagonal pixel (hexel) artist now. please indulge me for a brief story before i explain:

when i was in second grade (around '91 i am guessing) i had a lite-brite and a tonsillectomy, the latter of which involved a very bad healing process and led to me being in the emergency room in the middle of the night on christmas eve. a hospital employee dressed as santa claus had come up to my bed and offered a choice of gifts: a lite-brite or a teddy bear. because of tubes and blood coming out of my throat, i couldn't scream "LITE-BRITE PLEASE I WOULD LOVE A SECOND LITE-BRITE PLEASE SANTA". but my tubeless, not coughing up blood, father told him "she already has a lite-brite, she'll take the bear." i vividly remember sobbing and the nurses assuming i was in pain from the tubes and not from the sudden realization that my father and i would never truly understand each other. i wanted the lite-brite. i already had like 20 teddy bears.

lite-brites, much unlike removing tonsils or coughing up blood, ruled. it was the closest i had to having a television in my bedroom. if you look at it, it's a hexagonal grid much like old-school CRT screens.

me holding my lite-brite

this is not *the* lite-brite i owned as a kid, but an even older one from the 70s that desperately needs rewiring so i don't take down the entire jersey city grid. more on that another day!

a crt zoomed in

a CRT screen zoomed in

if it seems sad–the idea of me "drawing" a scene out of dozens of easy-to-lose plastic pegs and then looking at it as if it were my own television–i've got even sadder stories for you (like how i found a large dead roach in the box i just pulled that lite-brite out of to show you). but i loved to stare really close at the television in the living room and try to recreate square inches of rescue 911 in the lite-brite–shouts out to my eye doctor, dr. chaung, who rightfully wonders how my eyes have not turned to glass by this point.

what i'm trying to say is that i've been making hexel art WAY LONGER than i've been making pixel art or tools that faciliate the making of pixel art. i mean, here is an "analog" hexagonal grid i drew in march of 2013:

picture of sketchbook with a hexagonal grid drawn on it

and here is a screenshot of a hexagonal grid mode i was working on in tandem with make8bitart.com's early rewrite at around the same time i made the above sketch:

screenshot of an old hexel art editor prototype

what i think is fun and wild about pixel art is that its original display was on hexagonal grids on television screens, not a rectangular grid like on our retina displays today, SO PIXEL ART WAS A FAKE IDEA ALL ALONG AHAHAHA! but now we do view digital media with pixel grids...kind of...

iphone display zoomed in

this is an iphone 4s display zoomed in.

using this pixel grid is fine because it is so much more simpler to describe both programmatically and from a visual perspective. i mean, what would "make it a just few hexagons wider" even mean? diagonally? linearly? the linear and continuous y axis is kind of a fake idea with hexagonal grids!

hexels, at the very least on an html canvas, require quite a bit of mathematical computation to draw its outer path and fill, so i can understand why pixels are more optimized for current algorithms of image processing in the browser. but is that even the case at a higher level or is it something avoided because of a lack of "dedicated hardware available for hexagonal based image capturing and display".

also would images look better in hexels? for the sake of keeping this post brief but also leave you wanting more, i'll just show one comparison that is very dear to me - diagonal lines. here's a hexel line:

hexel line

it's a lot more smooth than a pixel line:

pixel line

lines are hard no matter what grid you have. hexel diagonals are a lot smoother, but no angle of them are as smooth as straight x=0 or y=0 pixel grid lines. it's obvious to me that it's curves where hexels shine - and photographs typically have lots of curves! btw, i've studied pixel lines a lot more than i've ever studied hexel lines (so far!) and if you're interested, i gave a talk about how lines on a pixel grid are drawn programmatically using bresenham's line algorithm a couple of years ago:

i hope that at this point i have piqued your interest in hexagonal grids, either artistically, programmatically, mathematically, or all of the above. if so, i've built a hexel art editor á la make8bitart.com in glitch with some heavily annotated and descriptive javascript in client.js. read and/or draw below:

the experience is better in its own tab because i haven't had it expand the canvas as the window expands (like make8bitart.com has). this is a prototype for a future "hexel mode" but i hope you get the idea :)

i'll probably write a lot more about hexels as i work on this app (the height of them needs more work, which i blame on floating point math in javascript), but i do recommend you read my source code above with more info on the math behind hexagons and also how to draw them within the constraints of a hexagonal grid. and if you make something cool - with my app or any remixes of it - let me know!

btw here are some posts on hexagonal grids you may enjoy as much as i did:

do not worry (i'm sure you are worrying), i am still and always will be a pixel artist and grid enthusiast.

xoxo
j$