I'm experimenting with *constrained dragging* for https://alex-kreitzberg.github.io/Notes/TechnicalArt/Serifs/^{[1]} . I have previously made some constrained dragging experiments. Here, The first diagram treats the three control points as having cartesian coordinates. In the second diagram I treat the two side control points as *polar coordinates* that share a single radius but have their own angles. In the third diagram I treat the left and center points as cartesian and the right point as polar, using the radius from the left point.

In the second diagram, when you drag `L`

or `R`

, I calculate the vector of that point relative to `C`

, then convert that to polar coordinates to set the radius and angle. The downside is that when you drag `C`

, drags the other two with you. Not sure what to think about that.

In the third diagram, only `R`

is constrained, and it only sets the angle. It uses the radius calculated from `L`

.

Source: vue-constrained-drag.js