Welcome back to my series of Hexels tutorials.  This time around I’m going to talk about glow in Hexels 2.5, how it changed from Hexels 2.0, and how you can go back to  something similar to the 2.0 glow if the new glow just isn’t doing it for you.  As usual, I’m going to have a background/details section for the curious and a how-to section for the men and women of action.

Jump to the How-To Section

Glow:  The Most Convoluted Thing in Hexels

Hexels’ glow effect is convoluted.  Literally.  If you’re not familiar with the term, (and I wasn’t, when I started work on Hexels) a convolution is a sort of geometrical multiplication of two things that aren’t numbers.  Here are a few examples of image-based convolutions:

So for our purposes, a convolution is basically taking one image and pasting it onto every pixel of another image.  In Hexels, glow is a convolution of the glow image you select in the Glow tab, and your drawing.  At the very last step in the render process, the glow image is overlaid onto the main image with additive blending.  But this convolution is generated in different ways in Hexels 2.0 and 2.5.

Way Back in the Day (Glow in Hexels 2.0)

Hexels 2.0 (and earlier) drew glow per-hexagon.  So for every hexagon (or triangle) you drew, the glow image would be repeated a single time:

This produced a nice aura, and if you switched out the default glow and put in your own glow shape (called a “kernel”, in image processing terms), you could get some really neat effects.  The target-symbol glow is one of my favorites:

Painting with glow patterns like this would yield really neat, stylized pictures.  But this method also had some drawbacks.  The glow image could only be affected by the actual colors of the Hexels.  Things like outlines, textures, and image cels had no glow of their own.  We were able to get image layers to occlude glow, but it was becoming clear that per-Hexel glow would need to eventually be re-thought.

Things changed in 2.5

Hexels 2.5 changed a lot in terms of how the graphics pipeline in Hexels worked.  Things like post-effects, layer transforms, and blending modes meant that a hexel’s color, position, or shape could change.  It no longer made sense to draw glow per-hexel, so we decided to move to per-pixel glow.  But it wasn’t going to be easy.  Hexels 2.0 had to redraw the glow image hundreds or thousands of times every frame, and this could get fairly slow sometimes.  Doing this for every single pixel would have meant drawing the glow image millions of times every frame.  Sure, graphics cards have gotten faster since the initial release of Hexels in 2013, but not a thousand times faster.

I experimented with a number of ways of making per-pixel glow in a way that looked reasonably like the glow in Hexels 2.0.  At first I tried just overlaying a Gaussian blurred copy of the Hexels image onto itself.  I don’t have any pictures from that testing, but I can recreate the idea in Hexels.

It looks great!  But not enough like the old glow.  Especially on the single Hexels along the top, where it’s barely visible.  Another problem with a blur filter is it takes a lot more time to run as the blur range increases, and zooming in on the image in Hexels requires the blur range to increase accordingly.  But the biggest problem is it doesn’t allow use of a kernel, so target glow and other custom glow shapes would no longer work.

In the end, we went with a sort of hybrid approach that has three basic steps.  The first step is to apply a very slight blur to the source image:

Next is the scattering step.  Here, the source image is sort of atomized randomly into the shape of the kernel image.  In other words, it’s a very, very rough convolution:

Finally, the resulted is blurred several times to smooth it out a bit:

The final result looks a lot like the glow from Hexels 2.0:

Although some lumpiness is still visible at the top of the image, this is generally not noticeable when actually using Hexels because it generally emanates from a wider area, like on the lower portion of the image.

Although this method is unable to preserve hard edges in glow kernels, it still allows for use of softer ones, like our rainbow glow preset:

Still though, there are those who want the old glow, particularly if using a hard-edges glow kernel.  Fortunately, there’s a way to do that!

Getting the Old Glow Back

While the old glow method isn’t explicitly supported in Hexels 2.5, it’s very straightforward to simulate it with textures.  Start by grabbing the image you want for your glow kernel.  I’ve provided the default glow pattern here, or you can grab the image from Hexels’ data folder in Resources/Glows.  (Or you can use your own!)

Next, go to your Texture tab and checking the Enabled checkbox.  Then make sure the first square from the left is highlighted, click the Replace button, and select the glow image you’d like to use.

Now, we need to convert this texture to be drawn on top of your hexels and additively blended.  Check the “Show Details” box.  Click on Mapping and select “On Top”.  Then click on Blending and set it to “Overlay”.

At this point, it should look like highly exaggerated old-school glow:

From here, you can use the Opacity slider to mimic glow strength and the Scaling slider to mimic radius.  Hold shift if you don’t want the sliders to snap to a few default values.  Here’s the result if we set scaling to 5.5 and opacity to 0.25:

There we are.  Although it’s not guaranteed to be perfect, this  should give you a good reproduction of the glow from Hexels 2.0.  Feel free to ask questions in the comments section!

Hello!  This is my second in a series of Hexels mini-tutorials that look at some of the finer points of that strange-but-wonderful little art program.  For this post, I’ll be discussing the three different ways you can move your hexels around on the canvas.  In particular, I’ll be discussing when you should use which tool and how they work behind the scenes.  My hope is that you’ll understand each tool better and have an idea of why it acts the way it does.

If you’re just looking for the short summary, I’ll get to that first:

Click-and-Drag Transform:  Easy, operates on your selection, doesn’t animate, rotate, or scale.

Free Transform:  More difficult to use.  Doesn’t animate, but can rotate or scale your selection to certain angles and sizes without messing up your shapes.

Layer Transform:  Can only modify the entire layer because it moves the grid itself.  Can do any translation, rotation, or scale, and can be animated.  Also, motion blur!

 

Now for the details.  Or as kids (and I, when trying to annoy my wife) call them, the deetz.

Click-and-Drag:  This one has been around since Hexels 1.0.  Make a selection with one of the selection tools, then mouse over the selection and click and drag it, or use the arrow keys to move your selection.  This tool simply takes each Hexel and moves it to a different spot on the grid.  Or if you hold down ctrl/cmd, it just moves the selection outline and doesn’t modify what’s on the canvas.  The exact way each Hexel moves is determined by the shape mode you’re in, but we do our best to keep the shape together and move it in a way that makes sense given the user input.  With this type of transform, you’ll always up with the same number of Hexels and outlines as you started with.  Click-and-Drag movement will also respect a tiled (wrapped) layer, so moving a selection off one edge of the canvas will cause it to appear on the other side.  This transform type affects only the selected area of an individual Cel, so its effects can be used to make an animation Cel-by-Cel, but the transform itself is not animatable.

Free Transform [ctrl/cmd-T]:  The Free Transform tool in Hexels was designed because a number of our users wanted a way to rotate and scale their selection.  This sort of thing is relatively easy in a pixel-based tool like Photoshop, because you generally don’t need to preserve the exact alignment of each pixel to keep the image looking nice. (Unless you’re specifically making pixel art).   But in Hexels, we needed a way to preserve the shape and alignment of each Hexel, otherwise the image quickly turns to gibberish.

The solution we can up with is what we call a “visual cast”.  The visual cast reinterprets the selection by moving, rotating, and stretching it and then checking to see what shapes in the underlying grid now match up with the transformed image.  This means that you may get a different number of Hexels than you started with.  It also means that your selection will get jumbled with transforms that don’t map fairly closely to the grid.  Don’t worry though, as Hexels will snap to valid points if you’re close to them.  Here’s a GIF showing how how visual cast works.

Notice the grey dots.  These represent the center of each Hexel on the grid.  When the original shape (overlaid in red) covers the dot, that Hexel is filled in with the corresponding color.   As you can see, only a small portion of the possible positions can properly be re-mapped to the grid.  It gets even more complex with rotation and scaling, but we handle most of that for you.

Similar to the Click-and-Drag transform, Free Transform can’t be animated.  You would need to create multiple Key Cels and individually position each one.  But it’s the only way you can rotate or scale a selected section of a layer.

Layer Transform [T]:  The final transform method in Hexels is the Layer Transform tool.  This one differs from the others in that it actually modifies the underlying grid that the selected layer is drawn on.  Because it transforms the entire grid, it doesn’t need to do any funny business to make the Hexels fit on the grid.  This means you can do any offset, angle, or scale and all your shapes will look just fine.  I made a GIF that shows the Layer Transform tool in action (although I cheated a bit in making it–you can’t actually rotate and translate in a single mouse click.)

Notice how the entire red grid is changing.  The blue cube is on a lower layer, which is set to draw with an exported grid as reference.

Aside from keeping the image coherent as it moves, the Layer Transform tool has the advantage of being animated.  This means you can specify keyframes for the transform in different frames, and Hexels will fill in the intermediate frames with the proper transform.  You can even apply different types of tween curves by right clicking on the different key frames, so you can have your  layer speed up and slow down smoothly.  Just make sure the Key icon next to the Transform track is highlighted, like in the image below.

Finally, there are a couple nice extra things with about layer transforms.   For one, you can add the Motion Blur effect to layers with animated transforms.  Here’s what that looks like on the animation above:

The other cool thing about layer transforms is you can apply them to groups and even to the document itself (click on Document Properties).  This equates to animating your camera!  How else would we be able to watch the Trixelmobile as it makes its epic journey down the driveway?