# Drawing Lines between Rectangles - Vector Network/Geometry Math Algorithm

I need help coming up with an algorithm that draws lines between rectangles. Why? I'm a UX Designer working on a plugin for the design tool I use. The plugin should be able to connect two mockup screens with arrows in an efficient way.

Here's the prompt I'm giving myself for this problem:

Imagine two standard (not-rotated) rectangles on an infinite plane. On each rectangle, a side has been chosen. You must come up with an algorithm to describe a series of connected lines (a vector network) that connects the midpoints of each selected rectangle sides (starting and ending nodes).

The segments cannot intersect the rectangles' sides, the segments (vector edges) must be perfectly vertical or horizontal (meaning all turns are right angles), and it must produce the minimal number of segments.

I'm looking for something that will always describe the vertices (aka nodes) between the rectangles regardless of their position in the plane or the side chosen. For example, the output would look like: {3, 5} {10, 5} {10, 20} {32, 20}.

Does anyone have ideas or literature that might help me get started?

• your drawing seems to be a detailed solution of the problem you have. Where is the difficulty? Jan 1 '21 at 0:49
• Sorry, I should've been clearer. I'm looking for an algorithm that would describe the vector path between any two rectangles. Something like {3, 4} {11, 8} {20, 3}. Jan 1 '21 at 1:13