I am implementing a game that involves slingshots and circular objects. I have gotten the basic "geometric" construction down for rendering the slingshot, but I am having trouble implementing this in my game (written in js, although any language explanations will be understood). Below is a diagram of the desired construction:

Slingshot Diagram

I know (cx, cy), which is the center of the circle I am "launching", the radius of that circle, and the position of the mouse at any given time (mx, my). The second circle around (mx, my) includes the same radius as the circle centered at (cx,cy). Lines ST and QP are parallel.

I must find the coordinates of points P, Q, S, and T. Any efficient approaches to this problem? (Would I use trigonometry, vector math, algebra?) Specific examples are appreciated. Thank you.


This is pretty straightforward:

travel = mousePosition - center

travelDirection = normalize(travel)
// ie. travel * 1 / sqrt(travel.x^2 + travel.y^2)

perpendicular = (travelDirection.y, -travelDirection.x) * radius

P = center + perpendicular
Q = center - perpendicular
S = mousePosition - perpendicular
T = mousePosition + perpendicular

(+ and - might need to be exchanged depending on the handedness of your coordinate system)

| improve this answer | |
  • \$\begingroup\$ perpendicular = (travelDirection.y, -travelDirection.x) * radius Is that a vector object with (x,y)? \$\endgroup\$ – Danyil Bee Jan 2 '17 at 22:30
  • \$\begingroup\$ Yes indeed. Every variable in this pseudocode is a 2-dimensional vector, except for radius which is a scalar. \$\endgroup\$ – DMGregory Jan 2 '17 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.