title: How can I set up Geometry Reader to track a moving point's coordinates relative to the shape it is inside of?
body: <p>I am a few weeks into SwiftUI and I am working on a hypotrochoid project. I have the basic premise coded, but I am trying to track the moving (red) point's coordinates relative to the larger, outer (white) circle it is located inside of.</p>
  <p>However, I cannot seem to get my coordinates correct. I am aware that Geometry Reader's origin is top leading, but is it possible to setup Geometry Reader so that the center of the larger, outer circle would be 0, 0? Thus, when the red point were to cross in the center of the outer circle then my coordinates would read 0, 0. As of now, my starting coordinates are x: 218, y: 413.50 and I cannot figure out how this is being determined.</p>
  <p>I'm sorry if this isn't explained clearly, but if you run the code then you should get an idea of what I'm trying to do.</p>
  <p>This is where I'm at:</p>
  <pre><code>import SwiftUI
  
  struct CreateHypotrochoid: View {
      @State var isAnimating        : Bool    = true
      @State private var coordinates: CGPoint = .zero
      
      var body: some View {
          ZStack {
              // MARK: - OUTER CIRCLE -
              Circle()
                  .stroke(style: .init(
                      lineWidth: 2.0,
                      lineCap: .round,
                      lineJoin: .round))
                  .foregroundColor(Color.white)
                  .frame(width: 200,
                         height: 200)
              
              ZStack {
                  // MARK: - INNER CIRCLE -
                  Circle()
                      .stroke(style: .init(
                          lineWidth: 2.0,
                          lineCap: .round,
                          lineJoin: .round))
                      .foregroundColor(Color.red)
                      .frame(width: 50,
                             height: 50)
                      .overlay(
                          // MARK: - INNER CIRCLE SPOKE -
                          Rectangle()
                              .stroke(style: .init(
                                  lineWidth: 1.0,
                                  lineCap: .round,
                                  lineJoin: .round))
                              .foregroundColor(Color.white)
                              .frame(width: 1.0,
                                     height: 25)
                              .offset(x: 0,
                                      y: -12.5)
                              .rotationEffect(
                                  Angle(degrees: isAnimating ? 360 : 0),
                                  anchor: .center)
                              .animation(
                                  Animation.linear(duration: 1)
                                      .repeatForever(autoreverses: false), value: isAnimating)
                      )
                  
                      .overlay(
                          // MARK: - DETERMINE SPOKE POINT -
                          GeometryReader { geometry in
                              Circle()
                                  .foregroundColor(Color.red)
                                  .frame(width: 6,
                                         height: 6)
                                  .rotationEffect(
                                      Angle(degrees: isAnimating ? 360.0 : 0),
                                      anchor: .center)
                                  .animation(
                                      Animation.linear(duration: 1)
                                          .repeatForever(autoreverses: false), value: isAnimating)
                              
                              
                                  .onChange(of: geometry.frame(in: .global)) { newValue in
                                      coordinates = newValue.origin
                                  }
                              
                                  .onAppear { 
                                      coordinates = geometry.frame(in: .global).origin
                                  }
                          }
                          
                              .background(Color.green)
                              .frame(width: 6,
                                     height: 6)
                              .offset(x: 0,
                                      y: -25)
                              .rotationEffect(
                                  Angle(degrees: isAnimating ? 360.0 : 0),
                                  anchor: .center)
                              .animation(
                                  Animation.linear(duration: 1)
                                      .repeatForever(autoreverses: false), value: isAnimating)
                      )
                  
                  // MARK: - INNER CIRCLE (CONTINUED) -
                      .offset(x: 0,
                              y: -75)
                      .rotationEffect(
                          Angle(degrees: isAnimating ? -360.0 : 0),
                          anchor: .center)
                      .animation(
                          Animation.linear(duration: 6)
                              .repeatForever(autoreverses: false), value: isAnimating)
              }
          }
          
          .padding(20)
          
          Button {
              isAnimating.toggle()
          } label: {
              Text(&quot;Start/Stop&quot;)
          }
          
          .padding()
          
          Text(&quot;x: \(coordinates.x)\ny: \(coordinates.y)&quot;)
              .font(.system(.body)).monospacedDigit()
      }
  }
  </code></pre>