Given a cubic Bézier curve with control points \(b_0\), \(b_1\), \(b_2\) and $b_3$ the Seiler points \(s_1\) and \(s_2\) can be computed in the following way: \(s_1 = 3 b_1 - b_0 - b_3,\) and \(s_2 = 3 b_2 - b_3 - b_0.\) Then a curve evaluation \(C(t)\) boils down to:

Geometrically this can be interpreted in the following way:

\(b_{03}\) is a point on \(b_0b_3\) and \(s_{12}\) is point on \(s_1s_2\). Then the final evaluated point is another linear combination between those points. From this it seems that evaluating with Seiler points is akin to evaluating a bilinear surface. With this it seems possible to efficiently evaluate a Bezier curve in shaders. We can use the quadrilateral \(b_0b_1s_2s_1\) as your bilinear surface. Then given your pixel position \(p\) invert it to obtain bilinear coordinates \(u\) and \(v\). With this we can easily check if we are evaluating a point on the curve because only on the curve it holds that:

\(t = u\) and \((1-t)t = v.\)

Then we can substitute and check if

\((1-u)u = v\).

However, chances are not very likely for that to happen for any given pixel so we need to add some \(\epsilon\) to this comparison. We can make it so:

then we can check whether \(d < \epsilon\) to determine if we are close enough to the curve. The effect of this is shown in the following ShaderToy:

Unfortunately, this does not give the result that one wants. The thickness is not uniform along the curve and for inflected curves it seems to dissapear altogether. This seems to be because we are evaluating based on the \(uv\) coordinates of the Seiler quad. Still, it seems to be useful in drawing the area under (or above) the curve as checking whether \(v-(1-u)u < 0\) will give this quite nicely.

here \(k\) is the degree and \(i\) the index so that the i-th basis function is multiplied with the $i$-th control point.

When considering B-splines or even non-uniform rational B-splines (NURBS) this becomes a little harder to do. Using these in GeoGebra requires evaluating the B-spline through De Boor’s algorithm:

As anyone who has used any of the newer (browser-based) Geogebra versions knows, inputting formulas is an excruciatingly painful ordeal. Moreover, with higher degree splines come increasing levels of recursion, and therefore unbearable slowness in GeoGebra. For this I usually resorted to not use the recursion based formulation of the basis functions but their closed form expressions. Again, for higher degrees this becomes a very error prone and tedious process.

For this purpose I made this simple Python script that can be used expand and write out the B-spline basis functions given a degree \(k\), a knot vector \(\mathbf{t} = [t_0, \ldots, t_{2(k + 1)}]\), the index \(i\) (with respect to the knot vector) and a knot span \(j\) (meaning \([t_j, t_{j+1}]\)):

from sympy import symbols, simplify
import numpy as np

T = symbols('t')

def N(i, k, knots, span):
   if(k == 0):
      if(i == span):   
         return 1
      else:
         return 0
   
   a = 0
   D_1 = knots[i + k] - knots[i]
   if(D_1 != 0):
      a = (T - knots[i]) / D_1

   b = 0
   D_2 = knots[i + k + 1] - knots[i+1]
   if(D_2 != 0):
      b = (knots[i + k + 1] - T) / D_2

   return a * N(i, k - 1, knots, span) + b * N(i + 1, k - 1, knots, span)

Then outputting the uniform cubic B-spline basis functions on the interval \([0, 1]\) is as easy as:

knots = np.array([-3, -2, -1, 0, 1, 2, 3, 4])
span = 3
print(simplify(N(0, 3, knots, span)))
print(simplify(N(1, 3, knots, span)))
print(simplify(N(2, 3, knots, span)))
print(simplify(N(3, 3, knots, span)))

Which returns:

-(t - 1)**3/6
t**3/2 - t**2 + 2/3
-t**3/2 + t**2/2 + t/2 + 1/6
t**3/6

Every point on the subdivided triangle can be indexed using two integers \(x\) and \(y\). \((0, 0)\) will give you the bottom-left point, \((r-1, 0)\) and \((0, r-1)\) will give you the bottom right point and top point, respectively.

Say that we are given some barycentric coordinates \(\lambda = [u, v, w]\). We can find out exactly which sub-triangle \([(x_0, y_0), (x_1, y_1), (x_2, y_2)]\) we are currently in. First we find out which cell of the grid we are in by using \(i = \lfloor r * v \rfloor\) and \(j = \lfloor r * w \rfloor\). Then we can determine in each cell wether we are in the upper triangle by checking whether \((v \mod 1/r + w \mod 1/r) > 1/r\).

Then depending on the if we are in the upper the triangle or the lower we can find the coordinates of the triangle points. If we are in the upper triangle then the triangle is \([(i + 1, j), (i + 1, j + 1) (i, j + 1)]\) or in the lower \([(i, j), (i + 1, j) (i, j + 1)]\). We can even calculate local barycentric coordinates in those triangles by taking \(\lambda_l = \text{fract}(r * \lambda)\) in the upper triangle we need to take \(1 - \lambda_l\) to have the coordinates in the right order.

Consider now that the positions (or other attributes) of the subdivided triangle points are stored in a single one dimensional array. The positions are stored in such a way that the points are inserted starting from the left bottom row of the triangle and moving to the right. If a row ends we go up a row and start again going left to right until the very top of the triangle.

For ease of acces it would be great if we can directly go from a coordinate \((x, y)\) to some index into the array. It seems easy right? Just some arithmetic with the \(x\), \(y\) and \(r\) parameters. Here is what I came up with some time ago:

Yes, this is correct and, no, I do not remember exactly how I determined this.

After many years I thought I should revisit this a bit and find out if I can find something smarter and more concise than this.

Can we do better?

Clearly the index is going to be \(x\) plus the sum of number of points in the rows up untill row \(y\). So what is the sum of the previous rows at \(y\)? it is \(\sum^{y - 1}_{i=0} (r - i)\). Now computing this sum for every coordinate does not improve upon the monstrosity of before. So let’s write it out the sum for different values of \(y\) and try to find a closed form expression:

Clearly, there is some pattern there! We can substitute the factor before the \(r\) by \(y\), but what about the minus term? It seems familiar because we have seen it before. It is exactly the triangle numbers we used to determine the number of points in a subdivided triangle. Thus the expression can be simplified to

and the index function then becomes simply:

Here you can see it in action on shadertoy:

in this example the above procedures are used to interpolate colours defined at the points of triangle subdivision. In this way you can have a texture defined on a triangle without specifying texture coordinates.