Fixed curvePoint and curveTangent ignoring curveTightness

[sparshg]

Resolves #5601

Changes:

curveTightness was being ignored in curvePoint and in curveTangent. Fixed by using catmull-rom basis matrix

Screenshots of the change:

Before

After

Code for example

function draw() {
 curveTightness(-1);
 curve(5, 26, 73, 24, 73, 61, 15, 65);

 x = curvePoint(5, 73, 73, 15, 0.4);
 y = curvePoint(26, 24, 61, 65, 0.4);
 tx = curveTangent(5, 73, 73, 15, 0.4);
 ty = curveTangent(26, 24, 61, 65, 0.4);

 a = atan2(ty, tx);
 line(-cos(a) * 20 + x, -sin(a) * 20 +y, cos(a) * 20 + x, sin(a) * 20 + y);
 circle(x, y, 5); 
}

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!

[owenmcateer]

Tested as working!
Great fix, I just ran into this bug myself.

[Qianqianye]

Thanks @sparshg. I am inviting the Core stewards to review this PR @limzykenneth, @davepagurek, @jeffawang.

[davepagurek]

Just double checked the math, looks good! Thanks for taking this on!

In case anyone in the future is looking back on this PR wanting to double check these values, a typical Catmull-Rom matrix looks like this:

$$\begin{bmatrix} 0 & 1 & 0 & 0 \\ -\tau & 0 & \tau & 0 \\ 2\tau & \tau - 3 & 3 - 2 \tau & -\tau \\ -\tau & 2 - \tau & \tau - 2 & \tau \end{bmatrix}$$

And p5's curveTightness (called $s$ in this PR) translates to the tension $\tau$ with this formula:

$$s = -2\tau + 1$$

(The idea, mentioned in the curveTightness docs, is to make $s = 0$ correspond to the common default $\tau = 0.5$, and $s = 1$ gives straight lines through the curve vertices.)