Blog RSS Feed Subscribe

Jordi Boggiano

Jordi Boggiano Passionate web developer, specialized in web performance and php. Partner at Nelmio, information junkie and speaker.

Categories

Heat maps drawing in Flash

Someone was looking for help to draw Heat Maps in Flash this afternoon on #flash and as I found the matter interesting I gave it a shot.

I managed to do it by drawing grey circles with 1-5% opacity to a BitmapData object, which works a lot faster than working with Arrays to sum up all the values. 

After that first pass the class scans the whole BitmapData to find the peak value and then uses that peak to scale all values and enhance the contrast of the image. At the same time, the pixels are colored depending on their value, which creates the "heat" look. 

However, with a high resolution and thousands of heat spots, the process is taking a while to complete so I thought I would use this occasion to try and implement a render loop that computes chunks of data on every frame instead of running all at once and freezing the player. And here is the result, although the heat map doesn't match the underlying map.

 

There should be some Flash content here but it seems you don't have it or have it disabled. Fix this, Install Flash Player !

 

You can get the sources, including the demo .fla to see how it works.

On a side note, during my initial tests I did a small error with bitwise operators which lead to this fractal-art-like generator, quite useless but sometimes it produces interesting -one might say nice- results. Click it to redraw it !

 

There should be some Flash content here but it seems you don't have it or have it disabled. Fix this, Install Flash Player !  

December 16, 2007 // ActionScript

Post a comment

Subscribe to this RSS Feed Comments

2008-02-15 19:21:06

taisen

merci!
travail interessant tant par la forme que  par ses utilisations éventuelles.

2008-08-07 21:05:23

trygve1

This is great work.  I was trying to understand your code and I noticed your main work function contains different for loops (//process 400 heat spots per pass, //process 30000 pixels per pass, //process 15000 pixels per pass, etc).  Can you please explain why/how you determined these specific values? 

Thanks for your help!

2008-08-08 13:12:54

Seldaek

To be perfectly honest, and as far as I can remember, those were picked based on how smooth the render felt. But it could/should be improved to look at how much time it took to render the last frame and then adjust those numbers if it took too long or not enough.

As it is, it works fine on my computer/cpu, but I reckon that on some older computer the render animation would be less fluid.. However it doesn't change anything to the final look of the image, it's just about what amount to compute during one frame. So it's up to you to know whether that really matters or not..

2008-08-09 01:19:52

jatorre

Very nice! I took you class and overlayed it with Google Maps for Flash. You can read about it here:

I am using to create Heat Maps based on avaialble biodiversity data taken from the Global Biodiversity Information Facility.

Your class produces the heat map solely based on the proximity of cell, but in my case each point also has a "count" information. So I am right now considering how I could mix the two things, so if there is a single point alone somewhere but has a big count number then draw it in red. Still not sure how to balance this.

This class has opened my eyes for lot of ideas so thank you very much!

2008-08-09 01:21:01

jatorre

The link to the blog post does not seem to work, here is the URL:

 http://biodivertido.blogspot.com/2008/08/gbif-data-heat-maps-heat-maps-over.html

2008-08-09 07:33:15

Seldaek

Well no problem, thanks for the feedback it's nice to see someone actually using, especially since I don't.

2008-09-09 02:40:25

Roberto

Great class! However, I am not able to open the .fla demo with Flash8.

2008-09-09 09:06:26

Seldaek

Roberto: This is ActionScript 3 code, so it only works with Flash9+

2010-06-16 17:48:07

de/numerics

For a service not requiring Flash or any programming whatsoever, check out our service:

diffent.com/heatmap

You can drive it from JavaScript or PHP if you know how to program, but it is not necessary.