-Click and drag points to see barycentric coordinates update in real time.
-Use the check boxes to view steps in the various methods for calculating barycentric coordinates.
I'll avoid boring you with describing Barycentrics with words, Wikipedia can do that for you!
Rather -- above you can play with barycentric coordinates.
Click and hold on the floating point, and move it around.
The numbers you see changing are the barycentric coordinates!
Play around with the floating point for a moment -- notice anything?
There's some... well... "rules" or "properties" associated with proper barycentric coordinates.
What do you notice about barycentric coordinates when the point is inside triangle?
What do you notice when the point is outside the triangle?
If all the coordinates are positive, then the point is within the triangle!
This can be used as a test in code, to determine if a point is within the triangle.
Which is useful when shooting rays at triangles.
For example, it lets us know if a ray's intersection point is within the triangle.
Did you notice anything else about the coordinates?
If you add up all 3 barycentric coordinates, they sum to 1!
Neat, I guess.
Oh yeah, if you put the point on a corner -- it has barycentric coordinate of nearly 1 for one of the three barycentric coordinates.
And nearly zero for the other corners.
My code for this demo reference is available
here on github.
There's a couple ways you can calculate barycentric coordinates.
I prefer intuitive understandings, otherwise I end up forgetting.
The intuitive methods shows you a way to think about each barycentric coordinate.
Imagine a line, going from a corner of the triangle to the side...
Actually -- nevermind -- don't imagine a thing; check all the boxes (slowly) in the section under "wireframe".
note: each box animates a step in the method; so leave them checked when moving to the next step.
Perhaps, only check a single box in the last section, so we only focus on a single triangle corner.
Anyways, notice the gray line that makes a right angle with a side of the triangle.
The barycentric coordinate for that corner, is determined by the yellow vector's shadow (its projection).
When the projection is halfway across the gray line, then barycentric for that coordinate is 0.5.
The barycentric coordinate for that corner will be between [0,1] when it is on the triangle.
Thus, a 0.5 barycentric coordinate is half of the within-triangle range.
So... when the shadow/projection is halfway, the barycentric coordinate is half of its maximum.
Make sense?
Well, -- to me -- this means we can just think of barycentric coordinates as projections/shadows of the point onto (gray) lines for each side of the triangle!
For code, check out BarycentricsDemo::calcBarycentrics_myMethod
So, while the intuitive method makes a lot of sense, it isn't the most efficient.
It does some superfluous operations to make the big picture nice, such as adding vectors to points, etc.
But that can be skipped, at the cost of intuitiveness.
I like the fact that this method still uses just basic vector math operations to arrive at proper barycentric coordinates.
As for understanding this method...
The animations show you how the vector is calculated, before I move the vector visualization to the origin (the origin is place all vectors really emanate from).
If you stare at the animations for long enough, it may seem to start making sense.
That -- or your brain is tricking you -- so you can just move on with your life. :)
code at BarycentricsDemo::calcBarycentrics_optimizedProjection
Did you know that taking the cross product of two vectors gives you the area of the parallelogram between those two vectors?
Well, technically the cross product gives you a vector, but the length of that vector is equal to the area.
The Area Method does some vector math trickery to compare ratios of areas, which end up corresponding to barycentric coordinates.
This method essentially generates two areas for each barycentric coordinate.
The first area is the area of the entire triangle (well, really the parallelogram, but just think of it as being the triangle for simplicity and intuition)
The second area is the area of a triangle made with the test point! (again, actually parallelogram)
Well, it turns out, if you divide the test-point-triangle-area by the total-triangle-area, you get a Barycentric!
Barymagic. The ratio of the area is the barycentric coordinate.
In my opinion, the intuition here is that a barycentric coordinate is related to how much of the total triangle area is covered by the area of the triangle made with the test point.
code at BarycentricsDemo::calcBarycentrics_AreaMethod
The last method is the least intuitive to me.
To me, it doesn't seem to have geometric explanation.
I found this from the book "Realtime Collision Detection."
You can create an equation for a point, which is point = A + barycentric_v*(B-A) + barycentric_w*(C-A)
You can rearrange that to be point = (1 -barycentric_v -barycentric_w)*A + barycentric_v*B + barycentric_w*C.
The book creates 2 equations from these, using the dot product, and then set up a system of equations to solve the barycentric coordinates.
The system of equations is solved by Cramer's rule.
Code at BarycentricsDemo::calcBarycentrics_LinearSystemMethod
This has been a very informal introduction to barycentric coordinates.
Now that you have been able to play with them, I encourage you to read a little bit about them from a more formal source.
That will give you exposure to how they are talked about in literature, and what the various forms of representation look like.
But I hope that you can fall back on to the intuition gained here, to help solidify them in your mind.