Vue Constrained Drag

 from Red Blob Games
13 Jan 2023

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.

Three independent drag handles
Constrained drag, L and R relative to C
Angle constraint on R

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