Category Archives: Hexels

Color Palette Magic!

Although it looks deceptively like a plain old list of colors, the color palette in Hexels 2 has got a few tricks up its sleeve.

“Organize your mind, organize your life.”

While Hexels can’t tell you where you put your keys or what time dinner is, its palette can help you organize your mind.  Colors can be dragged and dropped anywhere on the palette, and even copied if you hold alt.  Or you can double-click to add the currently selected color anywhere you want.  Double-click again to edit the new color swatch.

The layout of your palette can help you keep track of what's what
The layout of your palette can help you keep track of what’s what.


Automatic Gradients

Drag and drop a color onto another to create gradients!
Drag and drop a color onto another to create gradients!

Do you find it somewhat tedious to carefully pick eight evenly spaced colors between salmon and magenta?  Then we have the solution for you!  Hexels allows you to create gradients right on the color palette by dropping one existing color onto another color in the same row or column.  Hexels will even create multi-color gradients that hit every color it finds along the way.

Space Travel

….Color spaces, that is.  Click the little gear icon at the lower right of the palette and you can select HSV gradients.  Behold!

The Hexels palette lets you create gradients in RGB or HSV color space.
The Hexels palette lets you create gradients in RGB or HSV color space.

Creating vertical gradients between the two takes just a few seconds and gives us a nice color selection.

Gradients can quickly populate an entire grid of colors.
Gradients can quickly populate an entire grid of colors.

Import and Export Photoshop Palettes

The heading says it all.  Hexels can import .aco palettes from Photoshop as well as export back to the format.  Hexels 2.55 even added support for importing Lab color (i.e. yellow, black, and chocolate), so all your bases should be covered.

So next time you fire up Hexels, take a new look at that plain-looking empty grid.  You could even draw a picture there!

(This is a flower and grass and a sun.)
(This is a flower and grass and a sun.)

Custom Shaders in Hexels 2.5

Custom Shaders in Hexels

Adding Your Own Blending and Post-Processing Effects

By Ken Kopecky, Lead Hexels Kengineer

Note:   This is a re-post of my Shaders tutorial from the Marmoset website.  I’ve posted it here because we’re currently in the middle of transitioning to a new website, and this tutorial hasn’t made its way over yet.

One of the coolest new features in Hexels 2.5 is the use of fragment shaders for layer blending and post effects (PFX). Shaders allow these effects to be calculated in real-time for Hexels’ vector graphics. This tutorial gives an overview of shaders and how they’re used in Hexels, and then shows a couple simple examples of adding custom shaders, allowing Hexels to perform new tricks. A basic knowledge of GLSL 1.2 (OpenGL Shading Language) is highly recommended, but anyone with some programming experience should be able to do something with this tutorial. If you need a refresher on GLSL, try:

Or this quick-reference guide:

Please note that as we improve Hexels, this information may change, and any shaders you make may need to be updated for future versions, but we’ll try to keep as much backwards compatibility as possible..

What is a Shader?

A fragment shader is a short program that runs on the graphics card (GPU) to determine the color of an individual pixel. Shaders run on the GPU far faster than compiled code runs on the CPU, which means that post effects can be re-calculated every time Hexels draws without causing a noticeable slowdown. Another important feature of shaders is that they can be loaded and reloaded while the application is running. For developers, this is useful because code changes can be seen immediately without having to recompile and re-run. For Hexels users, this allows people to create their own blending modes and PFX, potentially doing things with Hexels that we at Marmoset never dreamed of.

How Does Hexels Use Shaders?

  • Hexels incorporates shaders into every stage of its drawing pipeline:
  • Drawing shapes and calculating low-level effects like halftone and texturing
  • Layer masking
  • Post-processing effects applied to each layer
  • Clipping
  • Layer compositing (blending)
  • Calculation of glow
  • Final compositing of glow onto the Hexels image
  • Static (baked) color adjustment

Currently, three of these stages–PFX, layer compositing (blend), and baked color adjustment–support selection of shaders, including custom shaders supplied by the user.

Post-processing (PFX) shaders will be used for our two examples. PFX are similar to filters in Photoshop in that they modify an existing image according to a set of rules. Common PFX in Hexels include blur and color adjustment. PFX are only able to read textures from a single layer.

Blend shaders are like blending modes in Photoshop; they combine a layer with the image below it. Thus, they read the color of the incoming layer and the color of the already-blended layer stack, and output a result that is a combination of those two colors.

Both PFX and blend shaders are applied in real-time to layers, and any input values they have can be changed and even animated. Baked shaders, on the other hand, are applied once and the effect is permanent (that is, destructive, unless you hit Undo, of course). These are available in the Edit-> Adjust Colors menu in Hexels. Rather than operating on each pixel of the image, baked shaders operate just once on each Hexel, changing its stored color. Baked shaders must be flagged as Atomic. This is explained further in Technical Details.

A Simple Example

To get started, let’s see what it takes to add a very basic PFX shader to Hexels. This shader will simply invert the color.

  1. Launch Hexels
  2. Under the Shaders menu, select “Open User Shaders Folder…”
  3. Open the “Post Effects” folder inside the folder from Step 2.
  4. Open a text editor or IDE (preferably something with syntax
  5. highlighting and line numbers, such as Notepad++ on Windows or TextWrangler on Mac)
  6. Create a file with the following code and save it as “Invert.frag” inside the Post Effects folder.
void main()
 //sample the incoming pixel color
 vec4 incoming = texture2D(_Layer, gl_TexCoord[0].xy);

//ensure the incoming color is between 0-1, so we don't get negative colors!
 incoming = clamp(incoming, 0.0, 1.0);

//basic color inversion here of the r, g, and b channels
 //the built-in _EffectStrength variable is used to adjust the “amount” of a shader
 //currently, _EffectStrength is used only with the opacity of an adjustment layer
 //use it lessen the effect of a shader in a tasteful way
 incoming.rgb = mix(incoming.rgb, vec3(1.0, 1.0, 1.0) - incoming.rgb, _EffectStrength);

//set the outgoing color
 gl_FragColor = incoming;

  1. To view your newly created shader:
    Close Hexels and launch it again. This will re-scan the add-ons directory for shaders.
  2. Draw something, then go to the Layer Properties window for the current layer, and click on Post Effects. You should see “Invert” listed when you click the + button. Go ahead and add it to the layer.

Screen Shot 2017-01-06 at 11.48.55 AM

The above picture shows the invert effect applied to a masterpiece of Trixels. The left side is the original, and the right side is after the effect is applied. Hopefully you saw a change in your image, too. If not, either you made a mistake in the above steps, or this tutorial is out of date. Fortunately, we tried to make it easy to get feedback on your custom shaders. Start by going to your Shaders menu and selecting “Reload Shaders”, or just hitting ctrl(cmd on Mac)+shift+R. This causes Hexels to re-read all of its shader files, recompile them, and then write all the compilation logs to a file in your log directory.

Note: When editing your shader, you’ll need to reload shaders every time you change your shader file.

To see the contents of the shader compile logs, select “Show Shader Log…” under the Shaders menu to open your log directory, and open ShaderCompile.txt. Shader errors should be clearly marked in this file with easy-to-spot things like “***”, “___”, and “ERROR”. Look for the filename of your shader, and then look immediately below it for any errors that popped up. Please note that the file provides line numbers, but these line numbers are off by 1000, due to the way Hexels assembles shaders internally (i.e. an error on line 1025 means line 25 in your shader). So just ignore that extra 1.

The Shader menu also has an option to show shader errors on the main Hexels canvas if you don’t feel like digging through a text file. If no errors are found, selecting this option won’t display anything.

Fixing syntax and other shader errors are beyond the scope of this this tutorial, but our Technical Details section will provide information regarding shader uniform variables provided by Hexels.

Adding Adjustment Controls

Hopefully, the simple PFX shader in the last section worked for you (If not, please contact us and let us know what we can do to improve this tutorial). While the above is a clear example of what you can do, it’s not very exciting. Most post-effects have settings with sliders, buttons and widgets that you can play with to make them do different things. Fortunately, Hexels provides hooks to let you add UI controls to your shaders. In fact, nearly every PFX in Hexels (as of this writing, the only exception is Curves) uses a UI that’s generated based on text in the shader file itself. In this example, we’ll modify the Invert shader we just made to allow control for each channel. At the top of the Invert.frag file, add these three lines:

UI_Uniform_Float(Red, 0, 1, 1); //this text will show up as a tooltip
 UI_Uniform_Float(Green, 0, 1, 1); //so will this
 UI_Uniform_Float(Blue, 0, 1, 1); //and this

These lines tell Hexels to create sliders in the shader’s user interface (UI) pane. Inside the parentheses are the parameter name, and its minimum, maximum, and default values. Comments following the declaration will be used as tooltips in the UI. Save your file and reload shaders in Hexels (ctrl/cmd + shift + R). When you go back to Layer Properties and click on the Invert post-effect, you should see something like this:

Screen Shot 2017-01-06 at 11.49.54 AM

The values for “Red”, “Green”, and “Blue” are now accessible in Hexels. If you’ve set your Invert post-effect to be animated (by clicking the key icon next to it in the Layers window), these three parameters will even animate if they are set differently at different frames. In the shader itself, Red, Green, and Blue are float uniforms and can be used in code accordingly:

UI_Uniform_Float(Red, 0, 1, 1); //this text will show up as a tooltip
 UI_Uniform_Float(Green, 0, 1, 1); //so will this
 UI_Uniform_Float(Blue, 0, 1, 1); //and this

void main()
 //sample the incoming pixel color
 vec4 incoming = texture2D(_Layer, gl_TexCoord[0].xy);

//ensure the incoming color is between 0-1, so we don't get negative colors!
 incoming = clamp(incoming, 0.0, 1.0);

//use the values of our Red, Green, and Blue parameters to affect how much
 //inverting is actually happening to each channel
 vec3 neg = mix(incoming.rgb, vec3(1.0, 1.0, 1.0)-incoming.rgb, vec3(Red, Green, Blue));

incoming.rgb = mix(incoming.rgb, neg, _EffectStrength);

//set the outgoing color
 gl_FragColor = incoming;

Other UI items are available, including checkboxes, int sliders, and color pickers (color pickers coming soon…). Syntax for those can be found in the “Technical Details” section of this tutorial.

Technical Details

Now that you know the basics of custom shaders in Hexels, this section will cover some of the more nitty gritty things you need to know to actually write them. The most important thing to know is that all of the shaders covered in this document have a common shader file that is inserted above your code. This file is located inside Hexels’ shader directory. Select “Open Built-In Shaders Folder” under the Shaders menu and look for Header.frag in the Post Effects folder.

Protip: While you’re in there, be sure to take a look at the shader code we shipped with Hexels to get an idea of the syntax.

Header.frag includes all of the uniforms and textures passed to PFX, blend, and bake shaders, as well as some #defines for interfacing with the UI. This file is heavily commented and will be up-to-date for your current version of Hexels. I won’t go over everything that’s in there, but here are some highlights:


As we saw above in the second example, these statements are what connect shader variables to Hexels. They help Hexels create UI elements like sliders and checkboxes so you can edit and animate the values in your shader. There are four basic types that are currently usable:

UI_Uniform_Float(name, min, max, default); //comments here are converted to tooltips

This creates a basic floating point value slider in the UI. You’ll probably use it more than any of the other types. Underscores in the name are converted to spaces so they look nice in the shader properties window.

UI_Uniform_Angle(name, min, max, default); //...

This is the same as a float, except its value always moves the “short way” around a circle (in degrees). So if you’re animating this value from 10 to 350, it will pass through zero and sweep just 20 degrees, rather than sweeping a full 340 degrees like a UI_Uniform_Float would.

UI_Uniform_Int(name, min, max, default); //…

The int slider takes the same arguments as the float slider, but integers are passed to the shader instead of floats.

UI_Uniform_Checkbox(name, default); //…

Instead of a slider with arbitrary values, this one is a checkbox and its value are just 1 and 0.

More uniform types (such as colors) are supported internally but are not yet accessible via the UI.


This one is important, and should be used in every PFX shader. The “_EffectStrength” variable is used when adjusting the opacity of a blend shader to smoothly increase or decrease the “amount” of an effect. In our blur shader, for example, as _EffectStrength is reduced, so is the blur radius. In our color adjustment shader, it fades the output color back to the initial color. Try to use it in an elegant way in your shader, if possible. It’s usually just a simple multiply.

Multi-Pass Shaders

Several shaders in Hexels need to run several times to achieve the desired effect. Our blur shader, for example, saves time by running two (relatively) fast linear blurs in perpendicular directions. You can add this sort of thing to your own shader by using

UI_Uniform_Const_int(Render_Passes, c);

Where c is the number render passes you want your shader to use. Try to keep this number low or Hexels will grind to a halt. The number of the current render pass is stored in a uniform called (you guessed it) _RenderPass.

Atomic (Baked) Shaders

Because baked shaders aren’t aware of the spatial relationship of each Hexel, they should only be used for PFX that don’t change the “shape” of the drawing, like color adjustment, rather than blur. Any PFX shader containing #define ATOMIC somewhere (including inside comments) will be made available as a baked shader in the Color Adjustment window. A wonderful exception to this is if you’re editing an image cel, any post-effect is available for baking. You can even select a portion of the image and modify that.

Blend Shaders

Although the above examples are for PFX shaders, blend shaders are extremely simple to make. The only difference is they have two texture inputs instead of one. Check out the blend shader code supplied with Hexels 2 (“Open Built-In Shaders Folder…” under the Shaders menu) for plenty of examples.


I hope you have found this tutorial to be both helpful and inspiring. We are very excited to see what sorts of special effects people add to Hexels, and we worked hard to make it as easy as possible while still giving you, the user, a great deal of control. If you have any questions, comments or suggestions for how we can improve the custom shader system, please let us know by sending an email to

Glow Classic

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:

Some examples of image convolution

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:

Old-school glow from Hexels 2.0
Old-school glow from Hexels 2.0

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:

Target glow in Hexels 2.0
Target glow in Hexels 2.0

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.

Additively blended blur looks nice as glow, at least from a distance.
Additively blended blur looks nice as glow, but it’s a one-trick pony..

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:

A few pixels of blur.

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:

The scatter step is a very rough convolution with the kernel.

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

The final glow step smooths out the result from the scattering.

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

Glow composited with the original image.

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:

Colored glow kernels work well with the new glow system

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!)

Default glow image used in Hexels.
Default glow image used in Hexels.

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.

Load your glow pattern as the first texture.

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:

Too much, perhaps?

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:

More reasonable fake glow values.
More reasonable fake glow values.

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!

Hexels 2.5 Transform Tools

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.

Clicking and dragging is a reliable way to move your Hexels, even if they sometimes look a little odd along the way.
Clicking and dragging is a reliable way to move your Hexels, even if they sometimes look a little odd along the way.

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.

The Free Transform tool uses a "visual cast" to reinterpret transformed Hexel data onto the grid. In practice, the tool will snap to the grid pretty readily.
The Free Transform tool uses a “visual cast” to reinterpret transformed Hexel data onto the grid. In practice, the tool will snap to the grid pretty readily.

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

The layer transform tool lets you translate, rotate, and scale however you'd like, but it affects the entire layer.
The layer transform tool lets you translate, rotate, and scale however you’d like, but it affects the entire layer.

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.

Make sure the key is highlighted to enable keyframed animation of a layer property, such as Transform.
Make sure the key is highlighted to enable keyframed animation of a layer property, such as Transform.

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:

Motion blur is a nice perk of layer transforms.
Motion blur is a nice perk of layer transforms.

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?