Coordinates of the corners of a rectangle bridging two circles

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:

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)

• perpendicular = (travelDirection.y, -travelDirection.x) * radius Is that a vector object with (x,y)? Commented Jan 2, 2017 at 22:30
• Yes indeed. Every variable in this pseudocode is a 2-dimensional vector, except for radius which is a scalar. Commented Jan 2, 2017 at 22:32