Lego-ize yourself

Pete Hellicar and Joel Gethin Lewis put me on to this iPhone app that creates a Lego portrait of you which is awesome. But I thought it’d be fun to do it in Flash in realtime.

I’d like to improve the palette map but I haven’t figured out how to get the BitmapData.paletteMap command to choose from a pre-determined list of colours – it seems highly confusing to me! So if anyone knows how to make it work, please let me know! Or maybe I should use Ralph’s great dithering code?

And also, wouldn’t it be cool if it could print out instructions on how to build the real version in Lego, along with a full order for the right bricks you need? 🙂

Try it out for yourself below :

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”/wp-content/uploads/manual/2010/LegoizerApp.swf” width=”608″ height=”480″ targetclass=”flashmovie”]

[UPDATE] see comments for how to use a predetermined colour list with paletteMap.

8 replies on “Lego-ize yourself”

paletteMap is a weird one. It took me a while to figure it out too 🙂

It’s been a while since I used it, but from looking at my old code I think I can remember how it works.

You provide 4 arrays to the paletteMap method, one for each R, G, B and A. The method then runs through each pixel in the image and breaks the colour values out into separate channels. It then uses the value in each channel to pull a new value from the array, using the value as an index. If you omit any of the arrays, it uses the original value.

So, if we provided:
R = [0x0000110000,0x0000220000,0x0000330000…]
G = [0x0000004400,0x0000005500,0x0000006600…]
B = [0x0000000077,0x0000000088,0x0000000099…]
and the current pixel value was 0xFF000102, our mapped value would be 0xFF115599, as it pulls the value at 0 in the red array, 1 in the green array and 2 in the blue array (and passes the alpha value through). Not sure if you need to use 32 bit colour values, so you might need to check that.


Cool, thanks Ozzer, I kinda guessed that’s how it worked and created a limited palette with:

	redArray = new Array(256); 
	greenArray = new Array(256);
	blueArray = new Array(256); 
	for(var i:uint = 0; i >6;
		v = v<<6;

		redArray[i] = v<<16;
	 	greenArray[i] = v<<8;
		blueArray[i] = v;

but I think there’s a way to pass a list of colours isn’t there? Perhaps it’s a byteArray?

If you want paletteMap to use a predefined set of colors you first have to prepare your bitmap so the lookuptable for the colors is in the blue channel and the red + green channel are all black. Then you prepare one array with your set of colors (maximum 256) and pass this array as the argument for the blue array in palette map for all the other arguments use null.

Ah, brilliant, thanks Mario! I knew you’d know how to do it. So this basically converts it to grey scale and maps on a palette dependent on brightness rather than finding the closest colour in the palette to each pixel. Any idea how to do that?

It is my son’s birthday soon and I think that your article has made my thoughts up regarding just what I’ll buy him.

Comments are closed.