Your browser does not support the HTML5 canvas tag.

Controls

Drag the yellow point P or any colored vertex to explore.

Decomposition:

$$\mathbf{P} = \lambda_1\,\mathbf{P}_1 + \lambda_2\,\mathbf{P}_2 + \lambda_3\,\mathbf{P}_3$$

Barycentric coordinates:

λ₁ = 0.3333
λ₂ = 0.3333
λ₃ = 0.3334
λ₁ + λ₂ + λ₃ = 1.0000

P is inside the triangle

Each colored region is the sub-triangle opposite the vertex of the same color. Its area as a fraction of the total triangle area equals the corresponding barycentric coordinate.

Computation of Barycentric Coordinates

Barycentric coordinates express any point $\mathbf{P}$ in the plane as a weighted combination of the three vertices of a reference triangle. They are a fundamental tool in computer graphics and physical simulation: they enable smooth interpolation of vertex attributes (colors, normals, texture coordinates), efficient point-in-triangle tests, and serve as the shape functions of linear finite elements.

Definition

Given a triangle with vertices $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$, the barycentric coordinates $(\lambda_1, \lambda_2, \lambda_3)$ of a point $\mathbf{P}$ are the unique real numbers satisfying $$\mathbf{P} = \lambda_1\,\mathbf{P}_1 + \lambda_2\,\mathbf{P}_2 + \lambda_3\,\mathbf{P}_3$$ subject to the normalization constraint $$\lambda_1 + \lambda_2 + \lambda_3 = 1.$$ The constraint makes the representation unique. At vertex $\mathbf{P}_i$ the coordinate $\lambda_i = 1$ while the other two are zero. At the centroid $\frac{1}{3}(\mathbf{P}_1+\mathbf{P}_2+\mathbf{P}_3)$ all three coordinates equal $\frac{1}{3}$.

Derivation via a Linear System

To compute $\lambda_2$ and $\lambda_3$ we substitute the constraint $\lambda_1 = 1 - \lambda_2 - \lambda_3$ into the definition: $$\mathbf{P} = \mathbf{P}_1 + \lambda_2\,(\mathbf{P}_2 - \mathbf{P}_1) + \lambda_3\,(\mathbf{P}_3 - \mathbf{P}_1).$$ Rearranging gives the $2 \times 2$ linear system $$\underbrace{\begin{pmatrix} \mathbf{P}_2 - \mathbf{P}_1 & \mathbf{P}_3 - \mathbf{P}_1 \end{pmatrix}}_{\displaystyle\mathbf{M}} \begin{pmatrix}\lambda_2\\\lambda_3\end{pmatrix} = \mathbf{P} - \mathbf{P}_1,$$ where $\mathbf{M}$ is the $2\times 2$ matrix whose columns are the edge vectors emanating from $\mathbf{P}_1$. The matrix $\mathbf{M}$ is invertible as long as the triangle is non-degenerate (i.e. has positive area). Solving the system yields $$\begin{pmatrix}\lambda_2\\\lambda_3\end{pmatrix} = \mathbf{M}^{-1}(\mathbf{P} - \mathbf{P}_1), \qquad \lambda_1 = 1 - \lambda_2 - \lambda_3.$$

Area Interpretation

There is an elegant geometric interpretation: each barycentric coordinate equals the ratio of the signed area of the sub-triangle opposite the corresponding vertex to the signed area of the whole triangle, $$\lambda_1 = \frac{A(\mathbf{P},\,\mathbf{P}_2,\,\mathbf{P}_3)}{A(\mathbf{P}_1,\,\mathbf{P}_2,\,\mathbf{P}_3)}, \qquad \lambda_2 = \frac{A(\mathbf{P}_1,\,\mathbf{P},\,\mathbf{P}_3)}{A(\mathbf{P}_1,\,\mathbf{P}_2,\,\mathbf{P}_3)}, \qquad \lambda_3 = \frac{A(\mathbf{P}_1,\,\mathbf{P}_2,\,\mathbf{P})}{A(\mathbf{P}_1,\,\mathbf{P}_2,\,\mathbf{P}_3)}.$$ The red, green, and blue regions in the interactive demo are exactly these sub-triangles: the red region (opposite the red vertex $\mathbf{P}_1$) has area proportional to $\lambda_1$, the green region to $\lambda_2$, and the blue region to $\lambda_3$. Because the three sub-triangles partition the whole triangle, their areas always sum to the total, confirming $\lambda_1+\lambda_2+\lambda_3=1$.

The signed area of a triangle $(\mathbf{A}, \mathbf{B}, \mathbf{C})$ in 2D is given by the cross product magnitude $$A(\mathbf{A}, \mathbf{B}, \mathbf{C}) = \frac{1}{2}\det\!\begin{pmatrix}\mathbf{B}-\mathbf{A} & \mathbf{C}-\mathbf{A}\end{pmatrix} = \frac{1}{2}\bigl[(B_x - A_x)(C_y - A_y) - (C_x - A_x)(B_y - A_y)\bigr].$$ Using signed areas means that when $\mathbf{P}$ moves outside the triangle, the winding of one or more sub-triangles reverses, automatically making the corresponding $\lambda_i$ negative. This is consistent with the linear system approach, which also yields negative values outside the triangle.

Inside/Outside Test

A key property is that a point lies inside the triangle if and only if all three barycentric coordinates are non-negative: $$\mathbf{P} \text{ is inside the triangle} \iff \lambda_1 \ge 0,\quad \lambda_2 \ge 0,\quad \lambda_3 \ge 0.$$ A coordinate equals zero precisely when $\mathbf{P}$ lies on the opposite edge. Drag the yellow point $\mathbf{P}$ outside the triangle in the demo above to observe one or more coordinates turn negative. This gives a very efficient point-in-triangle test used in ray-triangle intersection, rasterization, and collision detection.

Attribute Interpolation

Any scalar or vector quantity $q$ assigned to the triangle vertices (e.g. color, normal, texture coordinate, temperature) can be smoothly interpolated at any point $\mathbf{P}$ using $$q(\mathbf{P}) = \lambda_1\,q_1 + \lambda_2\,q_2 + \lambda_3\,q_3.$$ This interpolation is linear and exact at the vertices: $q(\mathbf{P}_i) = q_i$. In the demo, vertex $\mathbf{P}_1$ is colored red, $\mathbf{P}_2$ green, and $\mathbf{P}_3$ blue; the shading inside the triangle is precisely this weighted blend of the three colors. In linear finite element methods (FEM), the barycentric coordinates act directly as the element shape functions: displacements, pressures, or temperatures within each triangle are interpolated exactly this way.