Can you please explain angle and weight calculations a bit?

[Stanko]

Hey there,
Thank you for the cool showcase of SVG warping!

I thought that idea of getting the initial weights, for each SVG point, and then using them to rebuild the position when control points are changed is really nifty. But I'll be honest - I don't really understand all of the math used.

It would be super helpful if you have time to explain these two code segments:

Calculating angle:

warp-svg/src/js/index.js

Lines 116 to 119 in adc3488

	const dn = 2 * r0i * r0j;
	const r = (r0i ** 2 + r0j ** 2 - rij ** 2) / dn;
	A[i] = isNaN(r) ? 0 : Math.acos(Math.max(-1, Math.min(r, 1)));

Calculating weight:

warp-svg/src/js/index.js

Lines 129 to 131 in adc3488

	const r = Math.sqrt((vj[0] - v0[0]) ** 2 + (vj[1] - v0[1]) ** 2);
	W[j] = (Math.tan(A[i] / 2) + Math.tan(A[j] / 2)) / r;

Cheers!

[PavelLaptev]

Hi @Stanko! Thank you for feedback :-)
Actually, I also want to be honest — have no idea, because I copy/paste the code from this discussion benjamminf/warpjs#11 (comment)

And the library I used — https://github.com/benjamminf/warpjs

[Stanko]

Hehe thanks! I see author used "barycentric coordinates" to achieve this, so I'll do some research on that.
Cheers!