14 Replies Latest reply on Jul 17, 2006 10:10 AM by Rothrock

# Is there an easy way to find the area of a shape?

I'm drawing a spyder chart using scores in an XML file. I use the drawing methods to connect a bunch of dots along some spokes. Once the shape is drawn, I'd like to find the area. I could use trig and get the area of each triangular wedge of the shape, but I'd like to steer clear of that if possible. Is there a simpler way to do this?

• ###### 1. Re: Is there an easy way to find the area of a shape?
You are so funny. "Is there a simpler way to do this?" Not likely. All you have to do is integrate over the space – not easier.

If your area is made up of triangles it is easy to figure the area of each triangle using Hero/Heron formula. http://en.wikipedia.org/wiki/Heron%27s_formula

Just make a nice little function that takes three points and figures the area. I don't know of any easier way to do it. Anybody else? kglad?
• ###### 2. Re: Is there an easy way to find the area of a shape?
If it were a movieClip you could use the Monte Carlo method:
Generate a number of random coordinates (x,y) inside your stage boundaries and hit-test them with the movieClip. The percentage of positive hits times the stage size is the approximate area.
The more coordinates you generate the better the approximation.
• ###### 3. Re: Is there an easy way to find the area of a shape?
How fun is that! I hadn't thought of it, but a great approach. It does seem to take quite a few attempts to get a close approximation.
• ###### 4. Re: Is there an easy way to find the area of a shape?
So I thought about it a bit. Instead of doing a monte carlo against the whole stage, just do it against the bounding box of the movieclip. That will require fewer iterations to get a good approximation. Here is what I came up with.
• ###### 5. Re: Is there an easy way to find the area of a shape?
hmmmm not quite working. I tested it with a square movieclip. So every random x,y should return a positive for the hitTest. But I'm getting falses for some that hit right on the edges of the clip.

It isn't a problem with the random, I don't think. I put the upper left corner of the square at 100,100. I then tested the hits:

trace(clip2.hitTest(100, 100, true));<--returns false
trace(clip2.hitTest(100, 101, true));<--returns false
trace(clip2.hitTest(101, 100, true));<--returns true
trace(clip2.hitTest(101, 101, true));<--returns true

To my mind they should all return true – or at the very least the first three should give the same results. Very strange that it seems to be the x that makes it return the wrong answer on the low side. And I think it is y on the other side.

Any ideas Wolf?
• ###### 6. Re: Is there an easy way to find the area of a shape?
The trig way shouldn't be too hard, and is probably the best here. However, reading about the Monte Carlo method, I guess you could also count the colored pixels to get the area. It would need Flash 8, but should be quite easy:
--
import flash.display.BitmapData;

var area:Number = 0;
var bmp:BitmapData = new BitmapData(mc._width,mc._height);
bmp.draw(mc);
for(var i=0;i<bmp.width;i++){
for(var j=0;j<bmp.height;j++){
if(bmp.getPixel(i,j) == 0xFF0000){
area++;
}
}
}
delete bmp;
trace("area = "+area);
--
It assumes the chart is in an MC called 'mc' and drawn in red color. I don't know how accurate this method is; it seems to be not 100% exact. I tried for a rectangle, it gave me 12535, but the calculated area was 12687.39, so it's more than 150 pixels difference (in this case 1.2 %). Maybe that's enough for you. Otherwise, as already mentioned, the trig way is the most exact way.

cheers,
blemmo
• ###### 7. Re: Is there an easy way to find the area of a shape?
Guys, this gets really interesting now. I've just opened this forum and am going to test this right away.

Rothrock, of course, the bounding box gives a much faster approximation. I'll check whether the problem is with the random numbers generated or the way the hit test function works.

blemmo, great idea. If it's monochrome, that must be the fastest way.
I don't know how well actionScript is optimized -- are the loops translated into machine language loops and is the getPixel function call translated into inline memory access? But anyway, even with a very large bitmap that must be a lot less to do for the processor than let's say 100 hit tests.

As for the error, do you have full pixel coordinates, and do you have anti-aliasing off? I could imagine that the "missing" red pixels are just not fully red???
• ###### 8. Re: Is there an easy way to find the area of a shape?
Hm, don't know if you can avoid anti-aliasing for MCs. The error seems to be related to the stroke around a shape, the position of the shape inside the MC and the dimensions of the shape. These are the results for a 100x100 square:
- at 0,0 with a 1 pixel stroke:
area = 10200
calc = 10201
- at 0,0 without a stroke:
area = 10000
calc = 10000
- at 10,10 without a stroke:
area = 8100
calc = 10000
- at 0,0 without stroke and dimension of 100.5x100.5:
area = 10000
calc = 10100.25
(in this case, the sizes report as
sqr: width=100.5 height=100.5
bmp: width=100 height=100
guess a bitmap can't have half pixels)

It seems that the dimensions for the MC, where the square is positioned at 10,10, are 100x100 as well (not 110x110, as I would guess), so the bitmap is 100x100 as well, but it draws the MC beginning at its 0,0 point, so there should be 10 pix missing in width and height of the shape.

So when there is no stroke and the shape is positioned at 0,0 inside its MC, it seems to be quite accurate. That is, for a rectangle, don't know if it's the same for other shapes.
• ###### 9. Re: Is there an easy way to find the area of a shape?
because for-loops and hitTest() execute so quickly there's no reason to use a monte carlo method to compute the area of a stage object. in fact, using Math.random() and 1/4 of the for-loops is probably more time-consuming than calculating the area exactly:

• ###### 10. Re: Is there an easy way to find the area of a shape?
Actually the Monte Carlo method does not require real random numbers. It's good enough if they are "random enough" for the problem, i.e. not creating a systematic error. In the case of the spider diagram for instance, you could just test every 10th point systematically (basically a mix between Rothrock's and kglad's function). Good enough for most uses and of course even faster than checking every point.

By the way, using every 4th or 5th point with random numbers is indeed much too much. I would have said use 5%, max 10%.

kglad, do you happen to know how hitTest works internally?
Does it use some sort of bitmap lookup?
But your solution is the best, of course. Logical, simple and clean.

Rothrock, I've played round with your code, and the experience is equal to blemmo, the problem might stem from unclear rounding situation with stroke and fill. This might change with Flash 9 which finally has an integer data type.

A circle of diameter 200 (real area: (200/2)^2 * pi = 31415.9 ... gives
with no stroke:
using 10% "regular-random": 31320
using 5% random Monte Carlo: 31080-31780 (10 attempts)

with a hairline stroke or with a 1 point stroke, but still in the same 200x200 bounding box, so (theoretically) it should all be the same area:
using 10% "regular-random": 31790
using 5% random Monte Carlo: 31500-32500 (10 attempts)

with a 3 point stroke:
using 10% "regular-random": 32600
using 5% random Monte Carlo: 32046-32587 (10 attempts)

So, harrda, pick your favourite :-)
• ###### 11. Re: Is there an easy way to find the area of a shape?
D'oh! Of course. I had kinda started down that line, but then just didn't think it all the way through.

Still a bit confused by the hitTest results I'm seeing.
• ###### 12. Re: Is there an easy way to find the area of a shape?
Wow. I mean, really, these are some great answers. I was looking for something just slightly more complicated than "use the mc.getArea() method", but since that doesn't seem to exist yet, thanks very much for all the suggestions.

I'm choosing kglad's method because I need an exact measure for comparing the areas of different spyder charts.

thanks again all
• ###### 13. Re: Is there an easy way to find the area of a shape?
you're welcome.

you should be aware that the answer given by all these hitTest() methods may not agree with a mathmatical formula because of the way flash handles shapes. the answers should be close, but not really exact.
• ###### 14. Re: Is there an easy way to find the area of a shape?
If they are triangles and you know the points, definitely use Hero's formula. Compare the answers from the following code.