It arrived last week from ModMyPi.com and I paid around $40 for the “bare bones” board. Prices are still a bit higher because of the demand. But before you can see anything on a screen from your RPi, you’ll end up forking over a lot more dough, because you’ll also need to pick up the following “necessary accessories”:

• Storage: Any decent 4GB SD card will work, but why not grab a 32GB class 10 SDHC card like I did? $20 at newegg.com  The SD-card holds your operating system (Linux) files and any other tiny files you might normally keep on a tiny computer. But if you want more storage you can always plug in a USB thumb drive or an external hard drive.
• Power Supply: Your puny cell phone charger won’t deliver enough power for this monster of a tiny computer. You need at least 0.7A, but I got myself another iPad charger for around $13 (newegg.com), which delivers up to 2A. You’ll need the extra power when you start plugging in USB accessories, like dancing USB monkeys.
• Power Cable: Oops, your cell phone’s mini-USB cable won’t work either, you need a micro-USB cable. Did you catch that difference? $4 from ModMyPi.com  Because you can never have enough types of cables in your house.
• HDMI cable: 6″ cable is $3.50 at monoprice.com, and comes in a variety of fantastic colors. I picked orange because it reminds me of my cat, Arthur, who I had before I left home for college. He ran into traffic because he missed me so much that he couldn’t go on without me. I expect your cable color to be equally sentimental…and tragic.
• WiFi Adapter: Sure, you could hook it to a dusty old ethernet cable, but who wants to be told where you have to put your Pi?  Edimax EW‑7811Un costs about $10 at newegg.com
• Case: ModMyPi sells a great little plastic case for around $10, and you can even mix colors together. It’s durable and solid case, with slots and panels that can be removed if you want to insert gadgety-things into your Pi. I ended up also ordering a Ninja PiBow, which I haven’t yet put together. That one will cost you about $20, but the added coolness-factor is sure to end up being worth more than the $10 in additional cost. I’m kind of regretting not going rainbow on the PiBow, though. I didn’t want anyone to think I was fruity or something, but I’m kind of secretly rainbow-philic.
• Mouse/Keyboard: If you’re like me, you probably have lots of these lying around. Unfortunately, they were lying around in places where they we being used with other computers, so I had to order a new one for the Pi. $10 gets you a working keyboard from monoprice.com, or just go down to your local Goodwill and get one with greezy fingerprints for $1.

OK, that’s the basics. So let’s see… carry the one… about $120 – $150, depending on how cool your “mods” are (or factor in shipping). That’s kind of a long way from $35, but still pretty cheap for a computer that can play 1080p movies and Quake III.

Still, don’t expect to be able to “work” on it in the same way you would on your Windows or Mac machine. The Graphical User Interface is rather slow. Browsing your favorite web sites will require some patience. But that’s not what I’m using it for. I want a low-power system that can sit on the network and talk to my home automation devices (light switches, garage door, etc.) I also hope to have it act as an AirPlay device and run an XBMC media server for my home theater. “How can a slow computer play movies,” you ask? Well, the same way it can run 3D games: its GPU can decompress movies and render 3D graphics, even though the CPU is not powerful enough to browse a web site.

If I end up just using it as a computer on the network (using an ethernet cable), then the core cost is only about $60-$70. If you downgrade to a 4GB SD-card and use old legos for a case (or no case), then you could probably get it down to around $55. Not bad. Even if you just used AirPlay, that’s a lot less than Apple’s $99 Airport Express.

Hopefully I’ll have time to post more about my future experience with this teeny-tiny computer.

I’ve been looking into buying a stylus for drawing, because I have huge hands and fingers, like my father. Most of the styluses I’ve seen have a fat rubber or other squishy tip, which doesn’t seem much better than a finger. Apparently the iPad requires a minimum area of contact for the touch sensor to work (see photo on right).

Then I stumbled upon a Kickstarter project called the Jot by Adonit, that has a ball tip and flat, clear disk so that you can see what you’re drawing. You can get one on Amazon now for a about $25, which isn’t too bad. Some reviewers are complaining that it scratches the glass, which worried me, and the Adonit website recommends a screen protector. But oh man, Kickstarter is packed with cool styluses in development. There’s the iPen by Cregle, which claims to have vastly improved precision and proximity tracking, but requires a plug-in device. The apps that support it seems to be minimal also. $89 is on the steep side. What I really want is pressure sensitivity like the Wacom tablets. Well, there’s a Kickstarter for that too.

The Jaja Stylus, also $89, sends its pressure-sensitivity information via audio signals using a tiny speaker inside the pen. The maker, Hex3, claims the device battery lasts much longer than similar Bluetooth pens. It works pretty well, but the one I tried was on preview hardware and it had some bugs connecting to Procreate and Sketchbook Pro, so I wish I had more hands-on experience to pass along to you. I prefer the feel of rubber-tipped styluses to the hard plastic tip, however.

A few weeks ago I received my Hand Stylus, in green ($30). A little more affordable than some of the other fancy styluses. It’s got a nice weight to it, and the rubber nib is only 4mm. Because the tip has some friction with the glass, it’s about as close to how a pen feels on paper as you can get. The tips are replaceable (6 for $10) because they unfortunately don’t seem to last very long. The squishy tip is retractable and it rotates a bit with each click, in order to keep the wear even over the tip. Maybe I’m just not rotating it enough, because the rubber tip start to split after only a few hours of use.

Here’s a simple drawing that I did with the Hand Stylus using Procreate, based on a field I saw while driving in Eastern Washington:

Example of a mushroom with two cylinders in a compound physics shape.

Here’s a little Blender script I wrote to export Bullet-compatible compound physics collision shapes to a YAML text file. I’ve released it as open-source on Google Code:

Export Physics Shapes Addon For Blender

YAML is a great file format I’ve been using a lot lately. YAML parsers support JSON and the format is more compact and more readable than XML, but adds some great features like type-tags and a simple comment format. I highly recommend it.

Application Usage

If you are using Bullet Physics, your application must create a parent btCompoundShape and then parse the exported YAML file to create the child shapes. The exporter supports the following shapes: Box, Sphere, Cylinder, Cone, Capsule, and ConvexHull

Note that even though the exported shapes are siblings of one another, by default the btCompoundShape class will create an automatic AABB tree so that it won’t be testing against every shape on collision with your object.

Your application should construct a btTransform from the properties origin, scale and rotate. The rotate property provides a quaternion sequence in WXYZ order and is compatible with btTransform::setRotation().

yaml-cpp (new API) is recommended for parsing YAML files in C++.

Blender Installation

This script has only been tested with Blender 2.63, but it may work with earlier versions as well. In Blender User Preferences > Addons tab, click the [Install Addon...] button and select the export_physics.py script file. Alternatively, copy the export_physics.py script file to your blender addons folder and enable it in User Preferences > Addons. See blender documentation for more information.

Blender Usage

To create a compound physics shape for a mesh in blender:

1. Place the 3D cursor at the origin of the mesh object.
2. Add > Empty, name it “physics”
3. Create a physics shape with Add > Mesh > Cube, UV Sphere, Cylinder, Cone or create an arbitrary mesh for a ConvexHull shape.
4. Parent the new shape to the “physics” Empty.
5. The mesh name must start with: Box, Sphere, Cylinder, Cone, Capsule, or ConvexHull, depending on the shape you want.
6. Position and scale the shape object, but do not modify the internal vertices, unless it is a ConvexHull type.
7. Repeat steps 3-6 until your compound shape is complete. Shapes can only be a 1-level deep hierarchy.
8. Important: Select the parent empty object named “physics”
9. Click File > Export > Physics Shapes (.yaml)

Exporter Options

• Append To Existing File –> Appends the Physics shapes to an existing YAML file
• Convert To Y-Up –> Converts the values to a Y-Axis Up coordinate system
• Root Name –> The top-level name (in the YAML file) that will contain the physics shapes

Example YAML output

This physics shape output was appended from 2 separate meshes: tree and stalagmite

tree:
  physics:
  - shape: Cylinder
    origin: [-0.0272567,0.630798,0.0155753]
    half-extents: [0.123097,0.64184,0.123097]
  - shape: Sphere
    origin: [0.0406867,1.64268,-0.0203434]
    radius: 0.4183913767337799
stalagmite:
  physics:
  - shape: Cone
    origin: [0.0335,1.0,0]
    radius: 0.35
    height: 1.0

The app supports a lot of layers, which I can use to sketch different shapes and experiment with facial expressions to get the look I want, similar to Photoshop. I enjoy sketching on the iPad because it just feels a bit more loose when you’re drawing with your finger in a big comfortable chair, as opposed to sitting all stiff in front of a computer. I tend toward more technical drawing patterns, so I’m trying to practice sketching with more fluidity.

I don’t think the ears are quite right yet…what do you think?

Mouse Character Model – Part 1
Mouse Character Model – Part 2

More Mesh Tweaks

I’ve been coding a lot lately, but recently I got to the point where I needed to finish this mouse character. In the last day or so, I’ve made quite a few smallish changes to the mesh, and here’s my latest version:

Changes of note are:

• I shaped and added resolution to the feet, including some toes.
• Added more definition in the back legs so that they bulge-out some.
• Removed quite a bit of body length, mostly between the front and back legs.
• Created some additional mesh details in preparation for skeletal rigging.
• Pulled in the under-side of the jaw a bit.
• Using smooth shading with a simple Lambert color-ramp material to show the contours better.

What do you guys think?  Thanks for the feedback!

Unwrapping For Fun and Profit

With the mesh pretty much the way I want it, I turned my efforts toward texture-mapping. If you’re a Blender beginner, please Google a Blender texture mapping tutorial before you read further, or you might find yourself a bit lost.

The first step is to “unwrap” the mesh to generate the UV coordinates at each vertex. To do this, I marked “seam” edges on the mesh. Because we’re using a mirror modifier, there’s already a seam along the central axis of the body (top and bottom). So all I need to do is mark seams on one side of the body to separate the tail, legs, feet, and ears. The seams are indicated below with red edges:

While in Edit Mode, I just selected the edges I wanted to be seams and then clicked the [Mark Seam] button in the mesh tools panel. Make sure the parts are completely separated from the body – the seams should go all the way around the circumference of the legs. Next, click the “UV Mapping: [Unwrap] button” in the tools panel. Select all vertices and then go to the UV Editor. You should see a layout similar to this:

This is pretty good, but I want to add some fur with a “directional grain” to it, and that means the UV mapping will partially determine what direction the hair flows. The other issue will be that I need to make sure that the fur grain approximately matches up at the seams, especially where the legs and tail meet the body. I created a simple high-contrast grayscale fur texture using a Photoshop filters. I’ll just use this to make sure things are roughly correct:

The technique I used is just to select the various “UV islands” by clicking on a vertex and then select linked (Ctrl+L). Rotate and scale the UV islands while looking at the mesh to check for alignment. I also left some space in the upper-right corner, which I will later use for mapping the eyes and nose into this same texture. After about an hour, here are my results:

Notice that the grain of the fur on the legs matches with the body. On the ears, I chose to change the grain direction, but the final texture won’t be so high contrast, so I will try to cover up this discontinuity when I paint the diffuse texture in 3D. The diffuse texture will be blended with the fur detail and a baked ambient occlusion map to create the final texture.

Color Grid Texture

Blender has a couple of “generated” textures that help you visualize the UV mapping. One that I particularly like is the “Color Grid” type. Just create a texture of “Image or Movie” type and then select “Source: Generated, Color Grid.”  This type of texture lets you verify that the texels (texture pixels) are consistent in size over the entire mesh.

Here is an example, using the same UV mapping above with a colored test grid texture:

The next step will be to set up a material node shader in Blender and then use the 3D painting tool to create the fur texture. Stay tuned for Part 4!

Making The Eyes

Edit the body mesh (TAB) and cut a starting hole for the eyes by selecting a polygon near the eye and deleting it (X-Key):

In my concept sketches, the eye is an oval shape, but to animate the eyes properly, they need to be spherical. We can achieve the oval shape by positioning a large eye ball mostly inside the body and shape the eye socket to create the oval (look at your own eyes in the mirror).

To create an eye ball, switch back to Object Mode (TAB) and in the Add menu, select Mesh -> UV Sphere. Scale and position the eye so that it is roughly where you want it. It might help to add a pupil texture to help with positioning it. I won’t cover texturing in this tutorial, but there are a lot of resources on the web.

Then I said “Oops!” and replaced the eye with a lower-polygon-count UV sphere.  Eye meshes are easy to create, so you can always change the triangle count later. Create a linked duplicate for the left eye so that the left eye shares the mesh with the right eye. Position it mirrored (copy the X coordinate and make it negative). Now we can begin creating the socket shape around the eye ball.

Begin by shaping the edge around the polygon that you cut out. Subdivide the edges using the Knife Tool (K-key) and drag the edge vertices out from the eye until you have a socket that is quite a bit larger than the eye ball. Here I’ve selected all the edges that I either subdivided or added:

Next, select the inner edge loop around the socket and extrude with scale (E, S). Extrude twice to create nice quad loops around the eye ball:

Then one more extrude with scale. This time you also want to pull the loop down into the eye ball to create the edge of an eye lid. I’m also going to add a white material to the eye ball so that it stands out better:

These loops around the eye will be important if an animator needs to manipulate the eye lids to give the mouse more emotional character. At this point there are several problems. My mouse is looking a bit sleepy here, so I need to flatten out the loops around the eye. The resolution looks a bit low as well, so I added some more cuts. I did about two hours worth of knife cutting and shaping to get it all looking perfect (give me a break, this is my first time modeling eyes). Et voila!

From the side, the eye is looking oval-shaped as I wanted in my sketch. Great!  I also did some work to scale in the body, as my mouse was looking a bit wide. All ready to add the tail…

A Tale of A Tail

The tail was actually quite easy to model compared to the eyes, the hard part was figuring out how many segments it should have to look smooth when the bones are bending. Too few segments and it will look jagged. I made a separate tail model and experimented with a few different bone counts. I ended up with a 16-segment tail, but your count may vary depending on length and target screen. The iPad is pretty detailed, so I don’t want to cheat on polygons.

Start by shaping the “tail hole” so that it’s round and the right number of edges around. I chose 10 (decagon). If you change your mind on this later, you’ll probably have to redo the tail. No pressure.

From here, you’ll be doing one short Extrude and Scale (E&S) to start the tail, then a very long E&S to establish the length. You may notice that when you scale, it pulls the vertices away from the center (X=0). This is because we’re using the Mirror Modifier, so the vertices we actually have selected are just the ones on the right half of the tail (see origin in the above images). Scaling around that center pulls the vertices away from the Y-Z plane. There are two ways to fix this:

• Method 1: After scaling, select only the vertex that is closest to X=0. Copy its X coordinate. Then select the vertices in the loop you just scaled and translate them using this X coordinate: hit G (grab) and then Enter (confirm). Then in the tools panel you can paste the X translation amount and negate it to move all the vertices back towards the center of the tail.
• Method 2: Before scaling your extruded edge loop, perform a “Snap -> Cursor to Selected.” This will place the 3D cursor in the center of the extruded half-loop. Next, move the 3D cursor on to the Y-Z plane by setting the 3D cursor X coordinate in the properties panel (N-Key) to zero. Select 3D cursor as the Pivot Point, then scale.

Finish the tail with a couple more E&S operations, ending in a vertex merge (Alt+M) to create a point:

It’s important at this point, before you subdivide the tail into segments, that you get the tail tapering and size just right. Normally to subdivide something like this I would just use the “Loop Cut and Slide” command, but Blender doesn’t like the fact that the tail isn’t a true loop (again, due to the Mirror Modifier). To subdivide, the best method I’ve found is to select all the long edges running parallel with the tail (do not select any loop edges). Then simply subdivide those edges.

In the Tool Properties -> Subdivide, choose the number of cuts to create. In my case I wanted 12, but the interface only goes up to 10. I got around this by doing two subdivides first by 2 cuts and the second by 3 cuts. Here’s the result, all ready for rigging:

Concept Phase

First I made some quick sketches on my iPad using Autodesk Sketchbook Pro:

It’s challenging to sketch with my fat fingers, but if I zoom in a lot it works. I really enjoy sketching on it. I might buy a stylus at some point soon to improve the accuracy.

The layers in Sketchbook Pro make it very easy to rough sketch on a bottom-layer and then go in with ink and color later if you want. It’s good to try different shapes on multiple layers so you can compare them and select the best one. For example, from the side-view, I tried both the more “upright” and “forward” arching mouse shape (above), as well as a “semi-circle arc” shape – one that looked more like an actual mouse:

The more realistic I made the head shape, eyes, and nose, the less friendly and more “critter-like” the character became. Since I’m targeting casual gamers for this title and the story works best when the player has empathy for the mouse, I choose a friendlier art direction.

From 2D Sketch To 3D Mesh

Once I decided on a general direction with the sketch, I imported the sketches into Blender using the Background Images section in the 3D view options (N-key). This feature does exactly what I needed. It only shows the sketches when you’re aligned to a particular view direction (in orthographic) and you can easily blend the foreground polygons with the sketch so you can see it as you are modeling. Once you add a sketch image, the panel has options for scaling and moving the sketch around, so it was relatively easy to align it exactly to the size and offset that I needed.

There’s a decent tutorial on modeling from images that you can read here. I ended up using the first technique of extruding boxes, but with a mirror modifier along the X axis.

Another good Blender character modeling tutorial can be found here. This one showed me how to sculpt by extruding loop edges instead of faces (more on this below).

I began to extrude out a cube to approximately the right shape from the top and side views. Then I began loop cutting and shaping the body until it was round instead of rectangular.

I have coded some pretty compelling character physics tech (more in a later post). So I’m building this character to work with that tech. At this early phase of modeling, all I want is a rough shape so I can be sure the tech is going to work as expected. My first test of the tech was on a simple tail model, and it looked great, but the body is going to be a bit more challenging.

Here’s a “work-in-progress” capture of the mouse body (no tail, eyes, or whiskers yet). The feet and nose are just roughed-in for now. I think the front legs might be too far forward, what do you think?

Building the Ears

I used the “loop edge extrude” technique to build the ears. Start by extruding a row of faces from the top of the body to create an “wall” shape. The Knife Tool works well for sizing the faces before you extrude the ears. Then shape the top of the wall into a rough ear outline. You’ll need to subdivide those faces enough to create a somewhat smooth arc. Here’s what mine looked like at this point:

You’ll have a bunch of long quads formed when you extruded the ears out from the body, but you can just delete these (X-key). This leaves a hole, surrounded by a loop of quads that was once the “top” of your “ear wall.”

Now, in edge-select-mode, select the top edge of the loop (Alt-Right-Click) and then extrude the edges (E-key) and then hit S to scale them in. Repeat this a couple times.

To complete the ear center, extrude one last time and then hit Alt-M to merge the vertices to one center vertex. From this point you need to do the same for the back of the ear. Once you have the topology built, it’s time to sculpt. I used the Proportional editing tool with vertex grab (move). But the sculpting brushes will also work for this.

Please leave a comment and let me know what you think!

namespace Frog
{
    class A
    {
    };
}

template<class T>
class B
{
};

Now suppose you wish the template class B to have access to private and protected members and methods of class A. Normally you’d add the following line of code to the declaration of class A:

template<class T> friend class B;

However, in this case the compiler may object when a method in class B tries to access protected or private areas in class A. In this case, your compiler is probably thinking that your template friend class B is actually in the namespace Frog, even if class B is declared globally and before Frog::A is declared.

To fix this, simply tell the compiler that class B falls in the global namespace, like this:

template<class T> friend class ::B;

Notice I just added a double colon (::) before B’s name.

1. Only render the objects that you are debugging. In Xcode 4.2, capturing a frame consumes a TON of memory if you have a lot of objects. For example, my game renders about 50 objects, each with approximately 2000 vertices and this will consume gigabytes of memory. So unless you enjoy trying to end tasks while your Mac is completely unresponsive, hide all but the objects that you are investigating. On the Apple Developer Forums, I was told that this issue has been improved in Xcode 4.3.
2. Group your commands. There’s a handy debug extension you can call to mark the start and end of a group of rendering commands. Rendering a single primitive like a triangle strip, even if it is one object, involves setting a lot of attributes and uniforms and possibly changing blend modes. You can group all these commands together in the debugger by first calling glPushGroupMarkerEXT(0,”Name”) before issuing the commands and then glPopGroupMarkerEXT() after. You can also group objects together in the same way to create a hierarchy in the tool’s interface.
3. Label your resources. When you create a texture or vertex buffer, you can attach a friendly name to it so that it doesn’t appear as “Texture #28.”  This is done using the glLabelObjectEXT()function. Here’s how to do it for a texture:
   
   

   glLabelObjectEXT(GL_TEXTURE, texture.glid, 0, texture.name)

   where texture.glid is the GL texture identifier returned from glGenTextures() and texture.name is a null-terminated char string. One important tip here is that you can’t call this until you’ve actually created your texture using glTexImage2D(). Otherwise you’ll get an error returned.

Command Grouping

Resource Labels

NOTE: you may want to read my article on Twisted Hue Lighting before reading this post.

Background and Issues

The standard way to blend between two colors (C1 and C2) is just to linearly interpolate each red, green, and blue component according to the following formulas:

R' = R1 + f * (R2 - R1)
G' = G1 + f * (G2 - G1)
B' = B1 + f * (B2 - B1)

Where f is a fraction the range [0,1]. When f is 0, our result is 100% C1, and when f is 1, our result is 100% C2. Simple enough. If we sample 7 points along this range, it produces a gradient, such as this one:

If you visualize RGB color-space as a 3D cube (one axis for each component), then this blend is just taking uniform color samples along a line that connects the two color points within that space (hence the term “linear” interpolation).

This technique is used a lot in games, for example if you have a changing dynamic light source – like the light from a setting sun. Or perhaps you’ve got an particle effect that blends from one color to another. The code for this is fairly cheap to run. However, depending on your art style, a linear blend in RGB color-space may not always be the best choice. Suppose we do the same blend as above, but with blue as the starting color:

Observant readers will notice something a bit strange about this gradient. The middle color, where f=0.5, is gray. It has no color at all. We can measure the saturation of these colors (by converting them to the HSB color-space), with the following result:

[1.0] [0.8] [0.5] [0.0] [0.5] [0.8] [1.0]

The brightness also changes in a similar way – it is not linear across this gradient.

In some applications, you may want to maintain color saturation, especially if you’re using these colors as a diffuse material color. It changes the characteristics of a scene dramatically when the saturation (color) goes away and the brightness is cut in half, such as when the middle color became gray in the blue-to-yellow example above. In the real world, a dramatic sunset is created by the particles in the air refracting the sunlight into wavelengths that create colors of yellow, orange, red, purple, and blue. The colors are blended in the same way a rainbow sends various wavelengths of light into your eye.

Polar Color-Space Interpolation

If your goal is to maintain color saturation and brightness, you can perform the interpolation in a polar-coordinate color space. Instead of the cube-shaped space of RGB, polar color spaces are cylindrical or conical in shape. Examples of polar coordinate spaces include HSB (also called HSV), HSL and CIE-LCh. *

* Technically HSB is a hexagonal cone shape, but we can consider that it approximates a circular cone.

To blend in HSB space, for example, you need to first convert each RGB color to an HSB color. For code to convert colors, follow the link at the end of this article. The code isn’t free, so don’t use it on 10,000 particles, but later I’ll show ways to optimize this.  Once you have two HSB colors, their saturation and brightness can be interpolated linearly, using the same formulas that I introduced at the beginning of this article. The hue component is an angle around a circle, so you need to handle the discontinuity from 360 to 0 degrees and interpolate the shortest route around the circumference. Here is the algorithm as pseudo-code:

d = h2 - h1
if (h1 > h2) then swap(h1, h2), d = -d, f = 1 - f
if (d > 180) then h1 = h1 + 360, h = ( h1 + f * (h2 - h1) ) mod 360
if (d <= 180) then h = h1 + f * d

Here I’m assuming that the hue ranges from [0, 360), but some implementations use [0, 1), so adjust accordingly. Using the blue-to-yellow example, we now get:

If the two colors have the same saturation and brightness (they do in the above example), this interpolation will just rotate around the circumference, taking the shortest path (could be clockwise or counter-clockwise). Notice the color saturation is maintained through the entire gradient.

One issue with the HSB color-space is that it doesn’t do a great job of representing brightness as our eye sees it. The disadvantages of HSV and HSL are explained very well in this Wikipedia article. In the above gradient, the blue on the left is perceptually much darker than the yellow on the right, even though in HSB, the brightness component is 1.0 over the entire gradient. The brightness is also inconsistent across the gradient, and the greens are too close to one another in color.

Perception Rules

To solve this, we can do the interpolation in a different polar color space. The CIE-LCh color-space is similar in geometry and function to HSB, but takes into account human perception of color differences. It is a polar-coordinate version of the CIE-Lab color-space. I’ve put together a simple page so you can see the difference in the two color-spaces side-by-side.

Here is a blend of the same blue and yellow used above, but interpolated in CIE-LCh color-space:

Great! This time perceived brightness appears to change uniformly across the gradient.

Converting from RGB to CIE-LCh is not cheap: it requires converting RGB to XYZ, then XYZ to CIE-Lab, and finally CIE-Lab to CIE-LCh. After you compute the interpolated colors, you need RGB values to render the colors onto the screen. This means you have to reverse this conversion for each color along the gradient.

Approximation Trick

If you are generating a gradient with a lot of steps, you don’t have to do this conversion at every step. You can approximate the CIE-LCh interpolation by converting only a subset of steps back to RGB and then interpolate in RGB-space using the old school technique. If you just do this with the halfway point (f=0.5), for example, your cost is only 2 conversions to CIE-LCh space and 1 conversion back to RGB space. The rough approximation looks pretty close to our CIE-LCh result above:

What About CIE-Lab Space?

Even though CIE-Lab is a perceptual-based color-space, linear interpolations within it do not maintain saturation, even though brightness is uniformly blended. Here’s an example, showing the same gray problem:

Compared to the interpolation in CIE-LCh where saturation and brightness are uniform:

For an interesting comparison, here’s the same interpolation in HSB space:

And in RGB space:

Final Comparison

Here are all the gradients of blue-to-yellow for comparison purposes:

Row 1: RGB Interpolation
Row 2: HSB Interpolation
Row 3: CIE-LCh Interpolation

Here is a cyan-to-red interpolation that also exhibits the gray problem in RGB space:

It is a dramatic example of the improved quality that you can get by interpolating in the CIE-LCh color-space.

In a future post, I’ll talk about how to do a weighted-blend of an arbitrary number of colors in polar coordinate systems.

Open-Source Code Examples

Example code to convert RGB color to HSB and back (C/C++): Stack Overflow

ColorJizz color conversion library (AS3, PHP, Javascript, C#): Google Code