"Antiquified" version of a BBT promo photo

I’m guessing you’ve seen this style of image before – a sort of pseudo-antique filter than can make any photo look like it was taken with a very old camera (or even a daguerreotype – how’s that for a cool word?).  There are many ways to programmatically generate images like this, and in this article I’ve put together one that does more than just make the image look “brown.”  This filter involves several steps (fading, multiplicative brightness, and gamma correction, among others) and results in a conversion that not only adds a sepia coloring, but also gives an image a histogram more in keeping with older photos.

As with all graphics code on this site, the algorithm is fast enough to be applied in real-time.  Full source code and a sample executable are provided.

Download Sepia/Antique Image Filter Code (186 kb)

As always, full source code and a sample .exe is provided in the download link below.

Download Nature-Inspired Image Filter Code (318 kb)

Below, you can see how each filter looks on a promotional image from Final Fantasy Versus XIII.

Original:

Final Fantasy Versus XIII

Atmosphere:

Final Fantasy Versus XIII - Atmosphere Effect

Burn:

Final Fantasy Versus XIII - Burn Effect

Fog:

Final Fantasy Versus XIII - Fog Effect

Freeze:

Final Fantasy Versus XIII - Freeze Effect

Lava:

Final Fantasy Versus XIII - Lava Effect

Ocean:

Final Fantasy Versus XIII - Ocean Effect

Rainbow:

Final Fantasy Versus XIII - Rainbow Effect

Metal:

Final Fantasy Versus XIII - Metal Effect

Underwater:

Final Fantasy Versus XIII - Underwater Effect

In this project, I’ve provided a 5×5 custom filter engine with support for scaling/weighting and biasing/offsetting.  This is identical to the custom filter engine provided by Photoshop, and mine is even slightly faster (at least for the screen-sized images I’ve been testing).

Besides being fast, the engine is also smart.  It is clever enough to estimate edge pixels correctly – even for scaled/weighted filters – and it will automatically validate all input values to make sure they’re appropriate.

Finally, I’ve included 7 sample filters for you to play with, including blur, sharpen, emboss, engrave, grease, unfocus, and vibrate.

Download Custom Filter Engine Code (91 kb)

Below, you can see how each filter looks on a promotional image from Castle, an excellent new NYPD dramedy on ABC.

Original:

Blur:

Sharpen:

Emboss:

Engrave:

Grease:

Unfocus:

Vibrate:

Download Edge Detection Code (86 kb)

For those who have never used edge detection algorithms before, here’s an idea of the output:

Original image:

Prewitt method (horizontal):

Prewitt method (vertical):

Sobel method (horizontal):

Sobel method (vertical):

Laplacian method:

Hilite method:

Tanner’s method 1:

Tanner’s method 2:

As promised, here is the second half of my histogram code project.  In this project, I’ll show you how to stretch a histogram, equalize individual channels, and – most useful of all – equalize an image’s overall luminance.  Cool, eh?

Stretching a Histogram

The most straightforward of these functions is stretching a histogram.  The idea is this: many images stretch from pretty-dark colors to pretty-light colors, but they don’t take advantage of the full luminance spectrum by stretching all the way from pure black to pure light.  (For example, a “washed-out” image typically fails to utilize the entire luminance spectrum.)  To help fix an image like this, it is necessary to adjust the image’s colors to better span all possible brightness values.

Stretching does this by finding the darkest and lightest values in an image, then performing an automatic conversion between that color range (max – min) and the ideal color range (pure white – pure black).

As an example, here is an image that doesn’t span the full brightness spectrum:

Notice how the top half of the histogram is empty?  The brightest pixels in this image are only a mid-level gray.

Here is the same image after running a stretch histogram algorithm:

Notice how the histogram now stretches all the way to pure white?  Admittedly, this picture is not the best example of how stretching can be useful – but it’s a good demonstration of what stretching does.

Stretching is a fast and simple function, but its useful is limited.  Take the following image, for example:

The colors in this tiger picture stretch all the way from pure black to pure white, but they seem to be more heavily concentrated toward the dark end of the luminance spectrum.  To really fix this picture, we need to redistribute its colors across the spectrum in a more equal way.

Enter equalization.

Equalizing a Histogram

Equalizing is a more complex and time-consuming function than stretching, but it is able to fix problems outside the reach of stretching alone.

Here is the tiger image post-equalization:

See how much more balanced the histogram has become?  As another example, here is the cloud picture from above after both stretching and equalizing:

Equalizing has brought out a bunch of details that weren’t apparent in the original image.

Rather than going through the gory details of how histogram equalizing works, I’m going to refer you to the excellent Wikipedia article on the subject:

http://en.wikipedia.org/wiki/Histogram_equalization

Also, I’d like to quote one very applicable comment from the above article (emphasis added by me):

The above describes histogram equalization on a greyscale image. However, it can also be used on color images by applying the same method separately to the Red, Green and Blue components of the RGB color values of the image. Still, it should be noted that applying the same method on the Red, Green, and Blue components of an RGB image may yield dramatic changes in the image’s color balance since the relative distributions of the color channels change as a result of applying the algorithm. However, if the image is first converted to another color space, Lab color space, or HSL/HSV color space in particular, then the algorithm can be applied to the luminance or value channel without resulting in changes to the hue and saturation of the image.

Because of this, I have supplied two equalizing algorithms in this project – one that equalizes any combination of color channels, and another that equalizes only luminance.  The luminance method provides the code for converting between RGB and HSL color spaces…and that code is very complex.  It’s probably worth your while to take that code on faith for now, and maybe at a future date I’ll discuss color space transformations in more detail.

Get the Code!

But enough chat!  Here’s the link for the code:

Download Advanced Histogram Code (91 kb)

I realized today that while I use image histograms in several of the projects on this site (particularly my Real-Time Image Levels demo), I don’t actually provide a stand-alone image histogram viewer.

…Until now, that is.  :)

Image histograms are HUGELY useful in image processing.  In fact, the most basic image processing algorithm – adjusting brightness – is entirely an image histogram process, theoretically speaking.  Many other functions (including contrast, invert, levels, curves, and more) can be described in terms of an image histogram as well.

So what is an image histogram, and why is it useful?

What is a histogram?

Answers.com defines histograms as:

A bar graph of a frequency distribution in which the widths of the bars are proportional to the classes into which the variable has been divided and the heights of the bars are proportional to the class frequencies.

I realize this definition is not entirely useful, but it is important to note that histograms are not used only in image processing.  Histograms are simply a type of graph – nothing more, nothing less.

A simpler way to define histograms is this: a histogram is a bar graph that shows population by category.  Categories are listed, in order, along the x-axis (or horizontally).  The population (or, alternatively, number of occurrences) of each category is listed along the y-axis (or vertically).  In this graph from the 2000 U.S. census, travel time of working Americans is shown as a histogram:

Simple, eh?

So what is an Image Histogram?

As you can imagine, an image histogram is a type of histogram that tells us something about an image.  In most cases, the categories in an image histogram are brightness levels (from black to white), while the “population” of each category is the number of pixels with that brightness.

To demonstrate, let’s look at two different image histograms.

First, here is a histogram of a dark, cloudy image:

Notice how the image histogram is heavily weighted to the left?  Because this image is quite dark, the histogram shows much more pixels on the left side of the graph (the dark side) than it does on the right side of the graph (the light side).

Conversely, here is the histogram of a bright image:

While there are some dark regions in the center of the image (indicated by the spike on the far left of our histogram), the bulk of the image is lighter, and as a result the bulk of our histogram is shifted toward the right.

Now that you know what image histograms represent, try out the attached histogram code and see if you can predict rough histogram outlines before loading an image.  (Note that as with all VB6 picture-box-based code, the program will not load images larger than ~2mb.)

The forthcoming “Image Histograms Part 2″ project will showcase stretching a histogram and equalizing a histogram, so stay tuned!

Download Histogram Code (85 kb)

1) Simple “painting” code – basically, connecting a series of lines together as the user drags their mouse around.

2) An implementation of the hard-to-find (and poorly documented) API call for filling a contiguous region of an image. (Photoshop users should know this as the “paint bucket” tool.)

The API call used to perform the fill operation is ExtFloodFill, with a VB6 declaration and parameters like so:

Private Declare Function ExtFloodFill Lib "GDI32" (ByVal hdc As Long, ByVal X As Long, ByVal Y As Long, ByVal crColor As Long, ByVal wFillType As Long) As Long

To use the program, draw several lines using the left mouse button, then fill contiguous regions (with random colors) via the right button. Simple, eh?

Download Code (7 kb)

Because the first draft of this project has become so popular, I’ve written a new and MUCH faster version of the source code.  As before, no pre-built images or palettes are used, meaning that both coloring and flame generation are done using only math (and ingenuity!).

Updates to this version include the following:

• DIB sections are now used in place of Get/SetPixel.  This alone nearly tripled the frame rate on my old 1.6ghz laptop.
• Flame coloring is now done via look-up tables.  Previously this was calculated on the fly, which required way too many duplicate calculations.
• Random horizontal movement of individual flames is now calculated for every 4th pixel (instead of every single one).  Random number generation is costly, and visually this method looks almost identical (but is markedly faster).
• Scrollbars are now available so that you can color the flames however you’d like.  Red flames, blue flames, green flames, or any combination in-between – so knock yourself out.

On my aforementioned 1.6ghz laptop, the original version of this code ran (compiled) at 6-7 fps for a 512×256 image.  The new code runs between 27 and 28 fps – or a 400+% increase.

As usual, the sample code was written for VB6, but an .exe is included for those just wanting screenshots (or if you just want to see the effect in action).  Enjoy, and if you have any recommendations for Fire v.3, leave a comment!

Download Code (18 kb)

(NOTE: as of February 26th, 2009, version 2.0 of this code is available at http://www.tannerhelland.com/vb6/mathematical-fire-code-2/)

Whether working on an old-school RPG or a state-of-the-art FPS, every game programmer needs to be able to generate a fast, cool fire effect at some point in his/her career.  In this example, I’ve opted for a straightforward and easy-to-understand method for generating real-time flames.  No pre-built images or palettes are used, making the code quite small and easy to reuse.  Coloring and flame generation is done using only math and a little cleverness.  :)

As usual, the sample code was written for VB6, but an .exe is included for those just wanting screenshots (or if you just want to see the effect in action).  To simplify the code, I’ve used SetPixelV for drawing the fire.  This slows the demo down significantly, but DIB sections could easily be dropped into place if speed is a major factor for you.

Download Code (11 kb)

Transparency is simply a weighted average between the color values of two pixels.  As an example, consider the following two colors:

Pure red, or RGB(255, 0, 0)

Pure blue, or RGB(0, 0, 255)

At 50% transparency – or a pure blending between these two colors – we would simply add the individual color amounts together and divide by two.  This gives us a new color -

Purple, or RGB(127, 0, 127)

Not entirely surprising, eh?

The effect is certainly more impressive when applied pixel-by-pixel across an entire image.  The provided code does exactly that using VB6, and an .exe is included for those merely interested in the effect itself.

Download code (144kb)

Squall and Rinoa meet a large flower (insert Garden joke of your choice :)