9

enter image description here

The image on the left is what a typical unit circle looks like. The one on the right is from the documentation. I haven't seen a more in depth explanation for why it was flipped anywhere online. Why is this so?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Yogurt
  • 2,913
  • 2
  • 32
  • 63
  • 1
    I've always wondered the same thing. I've wondered if it has anything to do with the coordinate system they use, because at least in `UIKit`, a regular cartesian coordinate system is not used. – Pierce Jan 13 '17 at 22:50
  • 1
    Probably, since 0, 0 is the top left of the screen, but that's still a pretty unsatisfying answer. I'm sure some smart guy out there knows. – Yogurt Jan 13 '17 at 22:54
  • @Rob - For those of us who love some good math, you should post that as an alternative explanation. Great job! – Pierce Jan 14 '17 at 16:40
  • What always gets me is not the direction in which the angles increase but the fact that 0 is at the right rather than the top. What I usually want to do is something like this: http://stackoverflow.com/a/32857428/341994 – matt Jan 17 '17 at 23:00
  • @matt - I agree that as app developers, we find ourselves wishing that 0 was at the top, but there well accepted conventions for converting between Cartesian coordinates and [polar coordinates](https://en.m.wikipedia.org/wiki/Polar_coordinate_system). It’s bad enough that the OS (for understandable reasons) flipped the y axis, but rotating the definition of 0° would just be adding insult to injury. – Rob Aug 31 '17 at 20:09
  • 2
    @Rob what I object to is not the convention but the fact that I always forget. – matt Sep 02 '17 at 01:16

2 Answers2

8

A drawing of a circle is often represented by x = center.x + r * cos(φ) and y = center.y + r * sin(φ) as φ progresses from 0 to 2π. With a standard Cartesian coordinate system, with the origin in the lower-left corner, this results in a circle drawn, starting at 3 o'clock and proceeding counterclockwise. See diagram to the left, below.

But the iOS coordinate system has the the y-axis flipped from the standard Cartesian coordinate system, with the origin in the upper-left corner and y increasing as you move down the screen. See right diagram below:

enter image description here

(This is adapted from Coordinate Systems in the Quartz 2D Programming Guide. The original diagram in the Apple documentation is merely illustrating how the coordinate systems are flipped, but I've changed the arrow to more accurately represent how this affects the drawing of an arc from 0 to π/2.)

The result is that, when using the iOS coordinate system, it will start at 3 o'clock but then proceed clockwise.

Rob
  • 415,655
  • 72
  • 787
  • 1,044
  • You say a normal coordinate system starts at 3 but turns counter clockwise, but the image says other wise. What do the arrows represent in the image. I read the section from Apple's page and it didn't say. – Yogurt Jan 17 '17 at 20:10
  • I wanted to add this image but wasn't sure if it made sense to put into your post. http://imgur.com/a/Q9uoY – Yogurt Jan 17 '17 at 21:12
  • @Biclops - The arrows in the example in Apple's documentation (which is what I included in my original answer) wasn't trying to represent the drawing of a particular arc, but merely was illustrating how any drawing is flipped horizontally in the iOS coordinate system. The arrow had no meaning in Apple's example, but was just a random drawing. But, I can see how Apple's diagram was confusing in this context, so I've adapted it like in your example, to show the direction of drawing an arc from 0 to π/2 would be rendered in the two coordinate systems. Thanks. – Rob Jan 17 '17 at 22:51
  • Cool, I hope this helps everyone else out there. – Yogurt Jan 17 '17 at 23:23
6

Because iOS draws everything upside-down.

In OS X (and just about every math book, and also by default in Core Graphics which came from OS X), the origin is in the lower-left corner and the Y-axis increases as you move up. In that coordinate system, the angles lay out the way you think they should. In UIKit's upside-down coordinate system, everything is flipped.

What's interesting is that the direction of the angles bothered you, but the bizarre Y-axis did not. (*) This inverted intuition among programmers is likely the reason that Apple flipped the coordinate system when they wrote iOS, but you can still see the artifacts here and there. (In fairness to Apple, layout code that mimics a page, like text views and scroll views, is much easier to compute when Y increases downward. Since those are very common design elements, it's not so crazy that UIKit flips the axes. It also goes to show that these things are very arbitrary in math and computers.)

(*) Yes, you noted where the origin was located, and that this was a likely part of the answer, but allow me some hyperbole to make the next point :D

Rob Napier
  • 286,113
  • 34
  • 456
  • 610
  • 3
    Thanks for this answer. Sometimes working with the iOS coordinate space I feel like I'm in an upside-down world. Literally and figuratively... – Pierce Jan 14 '17 at 16:41