The Adobe Swatch Exchange (ASE) is a useful file format for importing colour schemes into applications in the Creative Suite (Photoshop, Illustrator etc).

I’ve been optimising the BitmapData colour palette algorithm (coming shortly in another post) and for the demo thought that it would be nice to give you the option to save the extracted color palette (a feature that people have been requesting in the comments). I added an option for saving a TXT file containing the hexadecimal and RGB colour values, but thought it would be nice to offer the choice of downloading the palette in ASE format so you can quickly incorporate the colour scheme in your artwork or designs, one of the nice features of Kuler.

So the first step was to open up and existing ASE file (created by Photoshop) in a hex editor (I use 0xED which is an excellent and free editor for OS X). Looking at the bytes of the file showed that it was evidently a quite simple format and wouldn’t be difficult to reverse engineer. I also found the ASE file format specification and a PHP implementation over at Colour Lovers, both of which were quite helpful.

This AS3 code will take an Array of colours (adding Vectors to the <pre> tag seems to cause problems, though my local source code does use a Vector of uints) and encode the ByteArray of an ASE file, ready to save using FileReference of FileStream in AIR…

const FILE_SIGNATURE : String = "ASEF";

function encode ( pixels : Array ):ByteArray
{
	var swatch : ByteArray = new ByteArray();
	var ase : ByteArray = new ByteArray();
	var hex:String;
	var pix:uint;

	ase.writeUTFBytes (FILE_SIGNATURE);// header
	ase.writeInt (0x10000);// version
	ase.writeInt (pixels.length * 2);// blocks

	for (var i : int = 0; i < pixels.length; ++i)
	{
		pix = pixels[i];
		swatch.length = 0;

		// start of group

		ase.writeShort (0xC001);
		ase.writeInt (0);
		ase.writeShort (1);

		// swatch name

		hex = pix.toString(16);
		while (hex.length < 6) hex = "0" + hex;

		swatch.writeShort ((hex = "#" + hex).length + 1);
		for (var n : int = 0; n < hex.length; ++n) swatch.writeShort (hex.charCodeAt(n));
		swatch.writeShort (0);

		// colours

		swatch.writeUTFBytes ("RGB ");
		swatch.writeFloat ((pix >> 16 & 0xFF) / 255);
		swatch.writeFloat ((pix >> 8 & 0xFF) / 255);
		swatch.writeFloat ((pix & 0xFF) / 255);
		swatch.writeShort (2);

		// write swatch

		ase.writeInt (swatch.length);
		ase.writeBytes (swatch);
	}

	return ase;
}

I’ll put the full code in my repository along with the improved ColourUtils Class which prompted the ASEEncoder, though for now you can just copy and paste this snippet and play with the demo above to save the top colour schemes from Colour Lovers as ASE files, which you can then import into Adobe Creative Suite applications.

Here is an example of how to encode a palette and then save it to the file system:

var colours : Array = [0xFF0000, 0x00FF00, 0x0000FF];
var aseFile : ByteArray = encode( colours );
var fileRef : FileReference = new FileReference();
fileRef.save( aseFile, "swatch.ase" );

The AS3 ASEEncoder currently only encodes swatches as RGB, though saving CMYK should only be a matter of converting the colour space and then changing the swatch declaration.

Going in the other direction, it would be nice to provide a method to decode existing ASE files into a Vector of uints, something which I’ll look at once the new ColourUtils is online.

Related posts:

1. BitmapData Average Colours
2. BitmapData Colour Palette
3. Smack My Glitch Up

Sometimes it’s good to break things…

During a recent project I needed to find a way of simulating digital interference on an image / video stream. At first, it seemed the best approach might be to use the graphics API or Bitmap effects, but why imitate when you can have the real thing.

The principle is incredibly simple. Corrupt / alter a byte (or several bytes) in the ByteArray of a JPEG and then load this back into a DisplayObject using Loader.loadBytes(). Because of the way in which JPEGs work, the image will still display but the corrupt bytes will mangle the output to varying degrees, depending on how many bytes have been corrupted. The result is an interesting glitch pattern, a bit like those which were accidentally created when my webcam drivers lost the plot.

It is also possible to corrupt other image formats (png, gif etc) in the same way, by first passing the image ByteArray through a JPEGEncoder.

I’ve implemented this technique in the Glitchmap class, which you can download and play with at the bottom of this post. I hope that it will provide a few moments of fun, if not a practical use (I’m thinking image gallery transitions or music visualisations).

The small gottcha is that it isn’t desirable to mess with the JPEG headers, so when the clean ByteArray is passed to the Glitchmap class, it will determine the length of the header by reading through the bytes until it finds the SOS (start of scan) declaration (0xFFDA). The next two bytes represent the length of the SOS, so it skips forward by this amount – the resulting position in the ByteArray should be the end of the header, and so between this point and the EOI (end of image) the data corruption takes place. I’m not sure whether this is the best way of determining the JPEG header size; perhaps any CS graduates / students out there can help me out?

After I posted the webcam glitch images, Jon used them in his title sequences for the 48 hour film gala. If you find a similar creative use for this script or the glitch generator then please let us all know.

I think the next step is to experiment with merging the bytes of multiple glitched images in order to create transition effects. I may also build an AIR app and see what the best way of outputting video might be (using NativeProcess for screen capture perhaps?).

You can also download the Glitchmap Class and the Glitch Generator source code from the soulwire code repository.

Related posts:

1. Webcam Glitch Art
2. ASE (Adobe Swatch Exchange) Encoder
3. Recursive Polygon Subdivision

My previous post explained and provided a very simple method for extracting colours from a BitmapData image, by averaging the colours in specific areas. This can have several applications, for example it features in a large amount of prototypes for the update to my Motion Tracking engine. However, if you want to create an accurate and representative colour palette from an image it has several flaws, the most obvious being that by averaging colours, you are actually removing or diluting the striking but perhaps less frequent colours in the image – the very colours which often make an image’s colour palette so exiting!

So, if we’re to extract an exciting and more representative palette from an image, we need a more intelligent algorithm; one which takes into account what makes a colour palette interesting – the contrasts and juxtapositions of colours within the image.

After some experimentation I arrived at the following solution. I have posted the code bellow, but I think it’s important to understand how it works and why each step is taken, so without further ado, here be my approach to calculating the colour palette of a BitmapData image…

Reducing the colours

We’re going to be performing quite a few operations on the colours in our input image, so for the sake of performance it’s wise to reduce the colours in the image as much as possible without losing the overall look and feel of the palette.

Nicolas Barradeau has done some really cool things with this, and his Color Depth Change script is really worth checking out. We can actually enhance this technique slightly by omitting the two loops which cycle through every pixel in the image and use paletteMap. The result is good enough for our needs and substantially quicker. I’m also glad I could use the BitmapData paletteMap method, because up until now I hadn’t ever had a use for it :)

I’ve found that reducing the image’s colour palette to 64 colours works well performance wise and still looks great, but you might want to use anything up to 256.

I won’t go into how paletteMap works, and the docs aren’t very helpful on this matter so I suggest you check out Google if you want a bit more information. In short, we create a new index of colours for the image by creating three arrays, one for each channel (red, green and blue) and pass these values to the paletteMap method, which takes care of the rest at blisteringly fast speeds. What we are left with is a dithered version of our original image, allowing us to analyse it’s pixels in a much speedier manner.

public static function reduceColours( source:BitmapData, colours:int = 16 ):void
{
	var Ra:Array = new Array(256);
	var Ga:Array = new Array(256);
	var Ba:Array = new Array(256);

	var n:Number = 256 / ( colours / 3 );

	for (var i:int = 0; i < 256; i++)
	{
		Ba[i] = Math.floor(i / n) * n;
		Ga[i] = Ba[i] << 8;
		Ra[i] = Ga[i] << 8;
	}

	source.paletteMap( source, source.rect, new Point(), Ra, Ga, Ba );
}

Note: at this stage, if you’re working with a very large image, it’s advisable to draw the image to a smaller BitmapData using a scaled Matrix, as we will be looping over its pixels and so a 2000 x 2000 image is likely to make your CPU rather pissed off at you!

Indexing the colours

The next step is to build an index of the colours in the image. By index, I mean that we want a list of unique colours and a tally for each telling us how many times they occur in the image. We can do this by using an Object or a Dictionary, which uses the colour values as a key and a counter as the value.

public static function indexColours( source:BitmapData, sort:Boolean = true ):Array
{

	var n:Object = {};
	var a:Array = [];
	var p:int;

	for (var x:int = 0; x < source.width; x++)
	{
		for (var y:int = 0; y < source.height; y++)
		{
			p = source.getPixel(x, y);
			n[p] ? n[p]++ : n[p] = 1;
		}
	}

	for (var c:String in n)
	{
		a.push ( { colour:c, count:n[c] } );
	}

	function byCount( a:Object, b:Object ):int
	{
		if ( a.count > b.count ) return 1;
		if ( a.count < b.count ) return -1;
		return 0;
	}

	return a.sort( byCount, Array.DESCENDING );
}

We are left with an Object containing all the colours in the image, grouped by their colour value and with a reference to how frequently they appear. We can then use a for in loop to create an array from the Objects properties.

Finally, we need to sort the resulting Array, essentially by popularity, so that the colours which appear most frequently within the image are at the start of the Array. We can do this using the Array’s sort method, and passing a custom function which compares each colour’s count or frequency to that of the other colours. Now we can discard the count value, and what we are left with is a correctly ordered array of unsigned integers representing our entire spectrum of colours.

Finding unique, contrasting colours

At this point, we could simply take the first values from the array and call this our palette, after all if we wanted, say, a 16 colour palette then we know that the first 16 colours in our Array are the most frequently occurring colours in our source image. The problem with this is that, as with most things in life, just because something is popular doesn’t necessarily make it good! Take a landscape photograph for example; there may be a beautiful collection of flowers with striking colours in the foreground, and a burning orange and pink sunset descending over the horizon, yet the first group of colours in our Array will likely be a host of different shades of green from the hills and fields – not exactly what we were hoping for!

So we need an algorithm which can discern between colours and tell us which of our colours have a sufficient variance, therefore producing a palette which fairly represents the broader spectrum of colours in our image.

The best solution that I found was to add up the square of the red, green and blue components of two colours and compare their results. If they are sufficiently different (as determined by a variable tolerance) then we have a match.

public static function similar( colour1:uint, colour2:uint, tolerance:Number = 0.01 ):Boolean
{
	var RGB1:Object = Hex24ToRGB( colour1 );
	var RGB2:Object = Hex24ToRGB( colour2 );

	tolerance = tolerance * ( 255 * 255 * 3 ) << 0;

	var distance:Number = 0;

	distance += Math.pow( RGB1.red - RGB2.red, 2 );
	distance += Math.pow( RGB1.green - RGB2.green, 2 );
	distance += Math.pow( RGB1.blue - RGB2.blue, 2 );

	return distance <= tolerance;
}

To apply this idea, we need to create an empty Array which will eventually become our results. We then begin to loop through our colours, taking the first and comparing it to subsequent colours until we find one which is sufficiently different. We then push this colour into our results Array, and then continue searching, this time comparing each colour in our initial Array to each colour in our growing Array of unique colours. Once we have reached our predefined quota of colours, or the end of the Array, we have our beautiful colour palette!

public static function different( colour:uint, colours:Array, tolerance:Number = 0.01 ):Boolean
{
	for (var i:int = 0; i < colours.length; i++)
	{
		if ( similar( colour, colours[i], tolerance ) )
		{
			return false;
		}
	}
	return true;
}

public static function uniqueColours( colours:Array, maximum:int, tolerance:Number = 0.01 ):Array
{
	var unique:Array = [];

	for (var i:int = 0; i < colours.length && unique.length < maximum; i++)
	{
		if ( different( colours[i], unique, tolerance ) )
		{
			unique.push( colours[i] );
		}
	}

	return unique;
}

Putting it all together

I’ve packaged the above technique, as well as the averageColour and averageColours methods from my last post into a ColourUtils class. Most of the methods detailed above, despite being necessary steps in finding an image’s colour palette, are useful in their own right and so I have separated them out into a documented collection of static methods.

You can download the ColourUtils class and also some examples of how to use it:

Possible Enhancements

I have a few ideas for possible enhancements to the algorithm, and would like to hear yours if you have any. Currently, these are my intentions for the next revision:

• Integration of the Müller formula so that a single colour from a group of similar colours is chosen not by its frequency but by its suitability for the extracted palette – i.e. a colour with greater tonal variation is preferred by the algorithm much the same way as it would be by the eye.
• Palette colour sorting by hue, saturation or brightness.
• A faster way of discarding unwanted colours, preferably before looping through the colour index, resulting in much better performance.

Related posts:

1. BitmapData Average Colours
2. ASE (Adobe Swatch Exchange) Encoder
3. AS3 Webcam Motion Tracking

If you want a very simple way of extracting a colour palette from an image, one technique would be to average the colour values within specific areas. Averaging colour values is almost identical to averaging numbers, except with the added initial step of finding the red, green and blue components of the colour. To do this we can use bitwise operators, in this case bitwise shift, to perform fast operations on each bit inside the unsigned integer returned by getPixel or getPixel32. If you want to know more about bitwise operators, Moock has written a detailed and, as ever, very clear article on where, when and why to use bitewise operations. You can read it here.

So once you’re familiar with how to shift the bits of an integer, you can easily get the RGB values from a 24 bit hexadecimal by moving the bits to the right by a certain amount using the bitwise right shift operator (>>).

For example, getting the red, green and blue values from a 24 bit integer would look like:

var colour:uint = 0x33CC99;

var R:Number = colour >> 16 & 0xFF;
var G:Number = colour >> 8  & 0xFF;
var B:Number = colour & 0xFF;

And finding the alpha, red, green and blue values of a 32 bit integer:

var colour:uint = 0xFF33CC99;

var A:Number = colour >> 24 & 0xFF;
var R:Number = colour >> 16 & 0xFF;
var G:Number = colour >> 8 & 0xFF;
var B:Number = colour & 0xFF;

So we know that by shifting the bits to the right, we can effectively break an unsigned integer representing a colour into its specific components, but what about changing these components back into an RGB or ARGB value? Well, it’s simply a matter of shifting the bits in the other direction, using the bitwise left shift operator, which looks like this << (two less than operators next to each other).

So using this bitwise shift left operator, you can take your RGB or ARGB values and cram the little buggers back into a usable format, with a little help from bitwise OR:

// RGB
var colourRBG:uint = (R << 16 | G << 8 | B);

// ARGB
var colourARBG:uint = (A << 24 | R << 16 | G << 8 | B);

Right, so we know how to take an unsigned integer, for example one that’s been returned from getPixel or getPixel32 and break it down into its RGB or ARGB components – and then for the sake of universal harmony, put it back together again and release it back into its 24 or 32bit world with all its binary friends.

So now, finding the average colour within a set of colours is simply a question of averaging the red, green and blue values of all the colours, and then turning these averages into a new colour.

The method bellow does just this, by looping through the pixels in a BitmapData object, adding up all of the red, green and blue values, dividing them by the total number of pixels and then creating a new colour from the results.

public static function averageColour( source:BitmapData ):uint
{
	var red:Number = 0;
	var green:Number = 0;
	var blue:Number = 0;

	var count:Number = 0;
	var pixel:Number;

	for (var x:int = 0; x < source.width; x++)
	{
		for (var y:int = 0; y < source.height; y++)
		{
			pixel = source.getPixel(x, y);

			red += pixel >> 16 & 0xFF;
			green += pixel >> 8 & 0xFF;
			blue += pixel & 0xFF;

			count++
		}
	}

	red /= count;
	green /= count;
	blue /= count;

	return red << 16 | green << 8 | blue;
}

So taking this a step further; say we want an array of 64 colours from an image, we can break the input image down into 64 chunks and find the averages of each. The easiest way of doing this is to build a grid, copy the pixels in each cell and use the averageColour function to return the average colour value of that cell.

public static function averageColours( source:BitmapData, colours:int ):Array
{
	var averages:Array = new Array();
	var columns:int = Math.round( Math.sqrt( colours ) );

	var row:int = 0;
	var col:int = 0;

	var x:int = 0;
	var y:int = 0;

	var w:int = Math.round( source.width / columns );
	var h:int = Math.round( source.height / columns );

	for (var i:int = 0; i < colours; i++)
	{
		var rect:Rectangle = new Rectangle( x, y, w, h );

		var box:BitmapData = new BitmapData( w, h, false );
		box.copyPixels( source, rect, new Point() );

		averages.push( averageColour( box ) );
		box.dispose();

		col = i % columns;

		x = w * col;
		y = h * row;

		if ( col == columns - 1 ) row++;
	}

	return averages;
}

In terms of building an accurate colour palette from an image, this isn’t a great method, mainly because averaging the colours doesn’t give you a fair representation of the range of colours in the image. The palette returned can often be somewhat muddy; however it is still a technique that I’ve found a use for on a surprisingly regular basis and so thought it worth sharing. Becoming familiar with bitwise operators is also a useful exercise and so, if they aren’t already part of your life, I suggest you begin to woo them with your nerdy charm.

Related posts:

1. BitmapData Colour Palette
2. ASE (Adobe Swatch Exchange) Encoder
3. AS3 Webcam Motion Tracking

What happens when you let vista install drivers for you? Shit happens. But in this case, good shit.

I was playing around with flash and using the Camera class to save stills via the CS3 AIR extension. Unfortunately, my webcam drivers had not been installed correctly, but the results were some really interesting glitches.

You can see the full set and high res versions on Flickr

It got me thinking about the ByteArray and socket classes in AS3, with some experimentation, maybe there will be a way to screw up BitmapData in a similar way? Bring back the 90’s and the cool glitch art that seemed to be coming out more often then. It’s amazing what eye candy can be produced by malfunctions.

Related posts:

1. Smack My Glitch Up