Rendering an image to an isometric grid

I woke up this morning and was a little inspired by Keith Peter’s post over at bit-101 showing some pretty cool isometric visualization. I decided to do my own take.

This is obviously not showing any funky patterns like Keith’s but rather sampling a 100×100 bitmap and using it’s pixel data to render the colours of the tops of each block.

I created a class called ‘IsoBlock’ which each block is an instance of. It contains a method called ‘draw’ which accepts a height and a colour.

The blocks are instantiated from frame 1 of the timeline from within a nested for loop. Here the blocks are positioned and their draw method called.

I only spent about 45 minutes on this and it isn’t optimized in anyway (and the pic is rendered back-to-front). Nonetheless I think it’s a pretty interesting way to render an image.

This entry was posted in Adobe Flash, Experiments and tagged , , , , . Bookmark the permalink.

One Response to Rendering an image to an isometric grid

  1. Laurent says:

    Sweet. Would be even cooler if you adapt the height of the block to the color of the pixel.
    I have not seen the class, but another idea is to allow the top block width and height then you can pixelate your image :)

    just another 45 minutes ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">