Lego-ize yourself

Lego-ise 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 :

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

No related posts.

Actionscript

Flash

permalink

8 Responses to Lego-ize yourself

Owen says:

January 18, 2010 at 11:57 am

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.

hth
Owen

Seb Lee-Delisle says:

January 18, 2010 at 12:18 pm

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 < 255; i++) {
		var v : int = 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?

Owen says:

January 18, 2010 at 1:36 pm

I remember having a look for something like that, but couldn’t find anything. For what I needed, I created a 2d bitmap gradient fill to use as a lookup table, but perhaps not so useful in this case?

Incidentally, there’s an interesting post about using paletteMap to do Doom style FPS here: http://board.flashkit.com/board/archive/index.php/t-741099.html

Mario Klingemann says:

January 18, 2010 at 4:20 pm

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.

Seb Lee-Delisle says:

January 18, 2010 at 11:07 pm

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?

Reply
Seb Lee-Delisle says:

January 18, 2010 at 11:08 pm

I was thinking you could make each colour a 3 dimensional vector and just find the nearest in space to the required colour. Not sure how fast it’d be though.

Reply