display | more...

As the only guy at work who knows Photoshop, I'm sometimes called on to design and build graphic bits for people. As a web developer, this is pretty handy because it is fun to put down the code and play. We had a need for a palette of iconography that would consist of symbols set against a part of a circle that would nestle into the corners of rectangular patches of the screen. Each patch has two of these icons. The easiest thing to do would be to make each icon a neat and clean ¼ of a circle. But once the idea lodged in my head that since there were two of these "circle segments" for each box -- each icon should be half a circle, the easy way out held no allure.

I still needed part of a circle to fit in a corner, but I wanted each one to occupy half the area of the circle described by the evident arc. No problem! I started sketching it and thinking about the unit circle:

       _________           _________           _________               _________
      /         \         /         \         /  _______\             /         \          
     /           \       /           \       /  |\       \           /   \       \
    |             |     |             |     |   | \       |         |     \       |
    |      +      |     |      +------+     |   |  +      |         |      +      |
    |             |     |      |      |     |   |   \     |         |       \     |
     \           /       \     |     /       \  |    \___/           \       \___/
      \_________/         \____|____/         \_|____|__/             \______|__/
        Circle              Quarter            Possible              What's the area
                            Circle             Circle                of the segment?
                            Segment            Segments

This lead me to trying to remember trigonometric functions, and I started realizing that I didn't know what I was doing. At the time of this writing, I am thirty-two and it has been sixteen years since I was last doing any geometry. But...I figure I'm a bright guy with a fat pipe, how hard could this be?

I guess I'm not so smart! I spent a couple hours trying stuff that didn't work; but I was getting closer. Eventually I started poking around on E2 and the web and found the formula for a unit circle, x2+y2=1 (which now seems obvious enough that I should have just derived it) and the area of a wedge where the angle is at the origin, areawedge = anglewedge / 2π * areacircle.

So I'm still looking for a wedge that equals half the area of the circle where the angle falls somewhere along the 45° line on the Cartesian plane. This means that the corner of the wedge will be at (-x,x). Once I drew rays out from that point to the right and bottom, it set me up to draw line segments from the origin (0,0) to the angle along the 45° line and to the two points where the rays intersected the circle. I now have the areas of a wedge and two equal triangles to calculate. This ends up being pretty easy to actually implement.

            XXXXXXX
          XX       XX
         X           X
        X             X
       X               X       T = triangle : (0,0), (-x,x), and either
      X                 X          (sqrt(1-x^2),x) or (-x,sqrt(1-x^2))
      X                 X
     X      +-----------=+-->  W = wedge : (0,0), (sqrt(1-x^2),x), (-x,sqrt(1-x^2))
     X      |\   T  __-- X
     X      | \  _--     X
     X      |T O-        X     Angle of the wedge = Pi/2 + 2*arcsine(x)
     X      |  |         X
     X      | /          X                    Pi
     X      | |          X                   --- + 2 * arcsine(x)
      X     | /    W    X      Wedge          2
      X     |/          X      Area  = Pi * --------------------  = Pi/4 + arcsine{x}
       X    ||         X                          2 * Pi
        X   ||        X
         X  |/       X         Twin
          XXY      XX          Triangle = x * (x + sqrt(1-x^2))
            +XXXXXX            Area
            |                           = x^2 + x*sqrt(1-x^2)) 
            |
            V
                               Total area = Pi/4 + arcsine(x) + x^2 + x*sqrt(1-x^2))

This gets us back to my icon that is supposed to have an area equal to half the area of the circle from which it is carved. Using units of radii, I know that the area of my circle is π so in trying to find how far up the 45° line the corner should rest, I say: ½π = ¼π + arcsine(x) + x2 + x*sqrt(1-x2). Or:

Pi/4 = arcsine(x) + x2 + x(sqrt(1-x2)

At this point, I decided that Pi/4 equals .785 and used MS Excel to generate a table comparing possible x values at 1/1000ths to areas "under the angle." The part of this table surrounding the area value for which I was looking is:

  0.340	  0.782261546
  0.341	  0.784823035
  0.342	  0.787385798
  0.343	  0.789949834

I decided that since I don't really have screen resolution to support such precision, assuming that x = .34 was really sufficient. (I suppose you could really shoot from the hip and just go with 1/3 of the radius.) I was able to generate the icons and move on with the creative process. Those of my coworkers who caught a whiff of what I was doing are convinced that I'm insane, but the whole process was personally rewarding, and now I have it "right."

Log in or register to write something here or to contact authors.