# How to calculate a specific area inside a circle?

I want to calculate the area displayed in yellow in the following picture:

The red square has an area of `1`. For any given square, I'm looking for the simplest formula to compute the yellow area in this picture.

(Squares are actually pixels in an image processing software, and I need to compute the opacity of the given pixel based on the relative area of the circle compared to the area of the pixel, to create smooth rounded corners.)

Update: I need to be able to do that for any individual square in the image: also the orange and the green one, for example.

-

I think what you really want is just an algorithm for drawing an anti-aliased circle. I don't think Wu's algorithm actually computes exact areas, and I also don't think you need to. Remember, a pixel is not a little square. – Rahul Narain Nov 18 '11 at 5:33

## 2 Answers

Well, I guess I'll take a stab at this. This is definitely a calculus problem. To take the area between two curves, you want to take the integral of the greater function minus the lesser function. For the yellow area, the greater function is $y=1$. The lesser function will take some manipulation. The formula for the circle is:

$(x-4)^2+(y-4)^2=16$

$(y-4)^2=16-(x-4)^2$

$y-4=-\sqrt{16-(x-4)^2}$

$y=4-\sqrt{16-(x-4)^2}$

So our integral is $\int^3_2[1-(4-\sqrt{16-(x-4)^2}]dx$=$\int^3_2-3dx+\int^3_2\sqrt{16-(x-4)^2}dx$. The first integral is $-3x$ evaluated from 2 to 3, or in other words, $-3(3)-[-3(2)]=-9+6=-3$.

For the second half of that integral, we'll use the info from Andreas's comment. We'll perform a change of variable

$u=x-4,du=dx$

$\int^3_2\sqrt{16-(x-4)^2}dx=\int^{-1}_{-2}\sqrt{16-u^2}du=\frac12[u\sqrt{16-u^2}+16sin^{-1}\frac u4]^{-1}_{-2}=\frac12[(x-4)\sqrt{16-(x-4)^2}+16sin^{-1}\frac{x-4}4]^3_2$

That solves the yellow area. For the other 2, you'll want to know where the 2 functions cross.

$(x-4)^2+(1-4)^2=16$

$(x-4)^2=7$

$x=4-\sqrt7$

For the green area, the 2 functions are the same, but it's evaluated from $4-\sqrt7$ to 2. For the orange area, the greater function is $y=2$, but the lesser function changes. It should be easy to see, though, that the right half is a rectangle. The left half is integrated from 1 to $4-\sqrt7$. Also, the first half of the integral has changed from $\int-3dx$ to $\int-2dx=-2x$. So the total orange area is $2x-\frac12[(x-4)\sqrt{16-(x-4)^2}+16sin^{-1}\frac{x-4}4]$ evaluated from 1 to $4-\sqrt7$ plus $1[2-(4-\sqrt7)]$, or $\sqrt7-2$.

-

## Did you find this question interesting? Try our newsletter

take $\int_2^3\sqrt{4^2-x^2}dx$ (upper part of the circle) and subract 3, for the boxes below.
Is it possible to break that down to simple functions like `cos()` & `sin()` ? – Benjamin Nov 17 '11 at 13:43
by integrating from 1 to 2 you'll get $(green+orange)$ if you subtract 2. now you calculate yellow' from 2 to 4. next you rotate your cirlce by $90^\circ$ clockwise. $green + yellow' =\int_7^8 ...dx$. now you get $green = (green+yellow')-yellow'$ and then orange in the same manner. continue like this to the end. – draks ... Nov 17 '11 at 14:41
It's a bit strange looking at it with the y axis going down instead of up.  I think you have the formula slightly off though. The equation of the circle is $(x-4)^2+(y-4)^2=16$.  You could probably perform a change of variable to recenter the circle, but the limits of integration would be different, wouldn't they? – Mike Nov 17 '11 at 14:54
{"extraction_info": {"found_math": true, "script_math_tex": 0, "script_math_asciimath": 0, "math_annotations": 0, "math_alttext": 0, "mathml": 0, "mathjax_tag": 0, "mathjax_inline_tex": 29, "mathjax_display_tex": 0, "mathjax_asciimath": 0, "img_math": 0, "codecogs_latex": 0, "wp_latex": 0, "mimetex.cgi": 0, "/images/math/codecogs": 0, "mathtex.cgi": 0}, "config": {"markdown_headings": true, "markdown_code": true, "boilerplate_config": {"ratio_threshold": 0.18, "absolute_threshold": 10, "end_threshold": 15, "enable": true}, "remove_buttons": true, "remove_image_figures": true, "remove_link_clusters": true, "table_config": {"min_rows": 2, "min_cols": 3, "format": "github"}, "remove_chinese": true, "remove_edit_buttons": true, "extract_latex": true}, "english_confidence": 0.9373422265052795, "perplexity_flag": "head"}