<p>The shape you’re trying to draw is called a <a href="https://en.wikipedia.org/wiki/Catenary" rel="nofollow">catenary</a>: it’s the shape that a cable/cord of constant density takes when supported at each end. You’ll have to do some research to find a parametric equation for its shape—<a href="http://mathworld.wolfram.com/Catenary.html" rel="nofollow">this page</a> has a start, though it doesn’t let you substitute in the endpoints so you’ll need some additional work there.</p>

<p>Once you have an equation that gives you a point along the curve as a function <code>f(t) = (x,y)</code>, where <code>t</code> is in the range [0,1], you can draw it the same way you would any other parametric curve: step along the function from 0 to 1 in small increments, drawing individual line segments from the value of <code>f</code> at the previous increment.</p>

<p>For nicer-looking cables, you can follow that process with a wide line in a dark color followed by a narrow line in a lighter one to give the appearance of shading, draw a shadow with the same curve offset vertically in partially-transparent black, etc.</p>

<p>As to the patch ports themselves… you can make grids pretty easily by using an image for a single port and drawing it at regular intervals across the space you want to cover. To figure out which port a given screen position corresponds to (e.g. if the user clicks on a particular one), get that position, divide it by the size of the interval you drew the ports at, and take the ceiling of that value. In other words, if you’re drawing a port every 20 pixels and the user clicks on (42, 27), dividing each coordinate value by 20 gives you (2.1, 1.35), which ceils to (3, 2)—i.e. the third column and second row.</p>

CC BY-SA 3.0
2016-06-10T19:52:16.557Z
2016-06-10T19:57:34.127Z
2016-06-10T19:57:34.127Z
Noah Witherspoon
<p>I am trying to devise a GUI system that functions as a virtual patchbay, as seen in something like Logic Studio's environment editor, or seen in virtual synthesizers that use virtual patchcables.</p>

<p>I'm not much of a coder, so I've been experimenting with LiveCode.</p>

<p>The challenge seems to be part code, part graphical. I can't even fathom how a system like that works. What bitmaps should I produce (if any) and how should they be manipulated in code? </p>

<p>Any assistance would be greatly appreciated.</p>

CC BY-SA 3.0
2016-06-09T15:20:50.717Z
Please include a reference image with your question. Googling 'logic studio environment editor' for images gives me nothing useful.
Rotem
CC BY-SA 3.0
2016-06-10T02:13:57.483Z
https://macprovid.vo.llnwd.net/o43/hub/media/1074/8250/Arp_Env_Pic.png
achacha
CC BY-SA 3.0
2016-06-10T02:16:06.510Z
http://media.soundonsound.com/sos/jan03/images/staudiomedia712.l.gif
achacha
CC BY-SA 3.0
2016-06-10T02:16:39.340Z
http://www.pcrecording.com/extlinkexp.jpg
achacha
CC BY-SA 3.0
2016-06-10T02:16:58.610Z
http://musicplayers.com/reviews/recording/2015/images/Eventide_patchbay.jpg
achacha
CC BY-SA 3.0
2016-06-10T02:17:44.490Z
http://i40.tinypic.com/2dhwqp1.jpg
achacha
<line-drawing><physics><simulation><edge-detection><realistic>
How would I create a virtual cabling system?
achacha
# How would I create a virtual cabling system?

(Asked by: username_0 on 2016-06-09)

I am trying to devise a GUI system that functions as a virtual patchbay, as seen in something like Logic Studio's environment editor, or seen in virtual synthesizers that use virtual patchcables.

I'm not much of a coder, so I've been experimenting with LiveCode.

The challenge seems to be part code, part graphical. I can't even fathom how a system like that works. What bitmaps should I produce (if any) and how should they be manipulated in code?

Any assistance would be greatly appreciated.

**Tags:** line-drawing, physics, simulation, edge-detection, realistic

> **Comments:**
> **username_1**: Please include a reference image with your question. Googling 'logic studio environment editor' for images gives me nothing useful.  
> **username_0**: https://macprovid.vo.llnwd.net/o43/hub/media/1074/8250/Arp_Env_Pic.png  
> **username_0**: http://media.soundonsound.com/sos/jan03/images/staudiomedia712.l.gif  
> **username_0**: http://www.pcrecording.com/extlinkexp.jpg  
> **username_0**: http://musicplayers.com/reviews/recording/2015/images/Eventide_patchbay.jpg  
> **username_0**: http://i40.tinypic.com/2dhwqp1.jpg  

---

## 1 answers

### Answer by username_2 on 2016-06-10. Score: 4 | Accepted answer

The shape you’re trying to draw is called a [catenary](https://en.wikipedia.org/wiki/Catenary): it’s the shape that a cable/cord of constant density takes when supported at each end. You’ll have to do some research to find a parametric equation for its shape—[this page](http://mathworld.wolfram.com/Catenary.html) has a start, though it doesn’t let you substitute in the endpoints so you’ll need some additional work there.

Once you have an equation that gives you a point along the curve as a function `f(t) = (x,y)`, where `t` is in the range [0,1], you can draw it the same way you would any other parametric curve: step along the function from 0 to 1 in small increments, drawing individual line segments from the value of `f` at the previous increment.

For nicer-looking cables, you can follow that process with a wide line in a dark color followed by a narrow line in a lighter one to give the appearance of shading, draw a shadow with the same curve offset vertically in partially-transparent black, etc.

As to the patch ports themselves… you can make grids pretty easily by using an image for a single port and drawing it at regular intervals across the space you want to cover. To figure out which port a given screen position corresponds to (e.g. if the user clicks on a particular one), get that position, divide it by the size of the interval you drew the ports at, and take the ceiling of that value. In other words, if you’re drawing a port every 20 pixels and the user clicks on (42, 27), dividing each coordinate value by 20 gives you (2.1, 1.35), which ceils to (3, 2)—i.e. the third column and second row.


---

