Lecture 9: Introduction to Spline Curves

Splines are used in graphics to represent smooth curves and

surfaces. They use a small set of control points (knots) and a
function that generates a curve through those points. This al-
lows the creation of complex smooth shapes without the need
for mainpulating many short line segments or polygons at the
cost of a little extra computation time when the objects of a
scene are being designed. We will start with a simple, but not
very useful spline. Taking the equation y = f (x), we can ex-
press f as a polynomial function, say:

y = a2 x2 + a1 x + a0 Figure 1: A non-parametric spline

If we now take any three points [x0 , y0 ], [x1 , y1 ] and [x2 , y2 ], we

can substitute then into the equation to get three simultaneous equations which we can solve for the unknowns
a2 , a1 and a0 . We now have the equation of a curve interpolating the three points. It is of course a parabola, or
parabolic spline. Notice that we don’t have any control over the curve. There is only one parabola that will fit
the data as shown in figure 1.

Parametric Splines
We can improve our choice by the simple expedient of using a parametric spline. Let us consider first a quadratic
polynomial spline written in vector notation as:

P = a2 µ 2 + a1 µ + a0 (1)

where a0 , a1 and a2 are constant vectors whose values determine the shape of the spline. For two dimensional
curves we now therefore have six unknowns (rather than the three previously). We can use these extra degrees
of freedom to control the shape of the curve.

(a) (b) (c)

(d)

Figure 2: Possibilities using parametric splines

We will use the convention that 0 ≤ µ ≤ 1 over the range of interest. Hence at µ = 0 the curve is at the
first point to be interpolated, and at µ = 1 it is at the last. Now consider interpolating the three points as before
(P0 = [x0 , y0 ], P1 = [x1 , y1 ] and P2 = [x2 , y2 ]). When µ = 0 the curve passes through the first point, say

Interactive Computer Graphics Lecture 9 1

P0 , and so, substituting µ = 0 into equation 1 we can write P0 = a0 . Similarly, when µ = 1 the point passes
through the last point, say P2 , and this gives us the equation:

P2 = a2 + a1 + a0 ,

substituting for a0 we get

P2 − P0 = a2 + a1 . (2)
We have now met all our conditions except that the curve shall pass through P1 . We can choose µ anywhere
in the range 0 < µ < 1, and get a third equation to solve for the curve parameters. In other words we can
now pick one of a family of curves interpolating the three points, by selecting the value of µ at P1 . Choosing
µ = 1/4 we get
P1 − P0 = a2 /16 + a1 /4. (3)
We can now solve equations 2 and 3 for the values of a1 and a2 and draw the curve as shown in Figure 2(d).
Further possible curves using the same three points and parametric equation are shown in Figures 2(a), 2(b) and
2(c).

SplinePatches
Although we have gained more freedom by using
the parametric form, we do not have any intuitive
way of using it. That is to say, we have no simple
way to choose µ values for each point to get the
type of interpolating spline we want. Moreover,
we still face the problem of having to use ever
higher degrees of polynomials for higher numbers
of points. To overcome these difficulties we intro- Figure 3: A simple way to join patches
duce a method based on spline patches that allows
simple intuitive spline construction. We define a
different curve between each pair of adjacent knots, as shown in Figure 3. This is most commonly done by
using a cubic spline for each patch, rather than the quadratic splines formulated above. The reason for choosing
a cubic form is so that we can join the patches smoothly together. The equation for a parmetric cubic spline
patch has four unknowns, a0 , a1 , a2 and a3 :

P = a3 µ3 + a2 µ2 + a1 µ + a0 (4)

We use the extra degrees of freedom provided by the cubic equation to set the gradient at either end of the patch,
and thus make it join seamlessly to its neighbours. Looking at Figure 3, we see that this can conveniently be
done by taking the difference of the coordinates on either side of the knot in question. This however is not the
only way of setting this gradient, as we will see later. If we differentiate the curve equation we get:

P0 = 3a3 µ2 + 2a2 µ + a1 (5)

Now consider the two ends of a spline patch between Pi and Pi+1 , where µ = 0 or µ = 1. We can find
the positions and gradients at each end by substituting µ = 0 and µ = 1 into equations 4 and 5 which gives:
Pi = a0
P0i = a1
Pi+1 = a3 + a2 + a1 + a0
P0i+1 = 3a3 + 2a2 + a1
We can write this system of equations in matrix form:
    
1 0 0 0 a0 Pi
 0 1 0 0   a 1   P0 
i 
 1 1 1 1   a2  =  Pi+1  (6)
   

0 1 2 3 a3 P0i+1

Interactive Computer Graphics Lecture 9 2

and since the a values are unknown and the P and P0 known, we need to invert the matrix to solve for the
parameters of the spline patch.
    
a0 1 0 0 0 Pi
 a1   0 1 0 0   P0 
 =  i  (7)
 a2   −3 −2 3 −1   Pi+1 
a3 2 1 −2 1 P0i+1

Notice that we have vector quantities, so, this formulation represents eight equations for the 2D case, and twelve
for the 3D case. The matrix is the same for each dimension. For any given set of knots, this cubic patch method
gives a stable, practical solution.

Bezier Curves
One of the simplest ways of approximating a curve was made
popular by the French mathematician Pierre Bezier in the con-
text of car body design. It was based on a mathematical formu-
lation by another French mathematician Paul de Casteljau. A
typical Bezier curve is shown in Figure 4. Here four knots P0 ,
P1 , P2 , P3 are shown. The gradient at each end of the Bezier
curve is the same as the gradient of the line joining the first two
knots, thus: P00 = k(P1 −P0 ), where k is the number of knots
- 1. This is an important property as it allows us to join Bezier
patches together smoothly. Computation of the Bezier Curve
Figure 4: A typical Bezier Curve
may be done in two ways. The first uses a recursive algorithm
based on a method of Casteljau. The idea is illustrated by Fig-
ure 5. For a given value of µ, say 1/2 we first construct the points on the lines [P0,0 , P0,1 ] [P0,1 , P0,2 ] and
[P0,2 , P0,3 ] for the chosen value of µ. These are labelled as the first set of constructed points, P1,0 , P1,1 and
P1,2 . The new points are joined up and the same procedure is followed to construct the second set of points
P2,0 and P2,1 . The process is repeated to find the point P3,0 . This is a point on the Bezier curve. As µ varies
from 0 to 1 the locus of P3,0 traces out the Bezier Curve. Using a functional pseudocode which allows us such
liberties as scalar and vector multiplications and typed functions, this algorithm can be written very simply:
Point Casteljau (knots P[] ; int N, int r, float µ)
begin
if (r == 1)
then Casteljau = µ*P[N+1] + (1-µ)*P[N]
else Casteljau = µ*Casteljau(P,N+1,r-1,µ) + (1-µ)*Casteljau(P,N,r-1,µ)
end
and the curve can be drawn with:
for j=1 to L
begin
locus=Casteljau(Knotarray,0,N,j/L)
drawto(locus.x,locus.y)
end
Note that here, and for all subsequent treatment of splines we will use a set of N+1 knots, labelled 0 to N.

Blending
Another way to view a Bezier curve is to think of it as a blend of its knots. In the simplest case, if we apply the
Casteljau algorithm to the degenerate case of two knots we get the parametric line equation:

P = µP0,1 + (1 − µ)P0,0

Interactive Computer Graphics Lecture 9 3

We can think of this as linearly blending the two points to pro-
duce a third. The parameter µ may be thought of as measuring
the distance along the line. Like the curve constructed using
the Casteljau algorithm, most spline formulations consist of a
blend of the positions of the knots. For more than two points
the blend is expressed by the iterative formulation of the Bezier
Curve:
XN
P(µ) = Pi W (N, i, µ) Figure 5: Using Casteljau’s construction to
i=0
draw a Bezier curve
where W (N, i, µ) is called the Bernstein blending function:
 
N i
W (N, I, µ) = µ (1 − µ)N −i
i
 
N N!
=
i (N − i)!i!
As before we are using a parameter µ to determine the distance along the curve, and it can be easily verified
that when µ is 0 or 1 the spline interpolates the end points, P(0) = P0 and P(1) = PN , and that when
0 < µ < 1 then P(µ) is a blend of all the knots Pi .
The iterative equation for the Bezier curve can be computed slightly more efficiently in terms of space
than the recursive form, though for most applications this is not likely to be significant, since it is rare to use
Bezier curves for more than a few points. The iterative solution, though less elegant, generalises to surface
construction more easily, and so tends to be used in preference.

Characteristics of Bezier Curves

As previously mentioned, Bezier curves have their end gradient
clamped to the slope of the end line segments, and, beyond the
ends they blend the positions of all the points. Since Bezier
Curves are a blend of all their control points there is little local
control over a part of the curve. Figure 6 shows how a large
number of control points tends to be ineffectual with Bezier
curves. Moving the intermediate points has little effect, and it
is not possible to create a curve which wiggles with any degree
of complexity. This problem can be offset to some degree by Figure 6: The lack of local detail in Bezier
pieceing together a number of sections, as we did for the cubic curves
patches.

Relation between Bezier Curves and Cubic Patches

We noted previously that the order of the Bezier curve is one less than the number of knots, so for four knots
we have a cubic spline. This will be verified by expanding the iterative form of the Bezier curve:
3
X
P(µ) = Pi W (3, i, µ)
i=0

P(µ) = P0 (1 − µ)3 + 3P1 µ(1 − µ)2 + 3P2 µ2 (1 − µ) + P3 µ3

If we multiply out the brackets are collect the terms we get:

P(µ) = a3 µ3 + a2 µ2 + a1 µ + a0
where a3 = P3 − 3P2 + 3P1 − P0
a2 = 3P2 − 6P1 + 3P0
a1 = 3P1 − 3P0
a0 = P0

Interactive Computer Graphics Lecture 9 4

 So, we see that the four point Bezier curve is just a cubic spline patch between P0 and P3 , with two shape
control points, P1 and P2 , which are manipulated by the designer.
We can also show that the Casteljau construction results in the creation of a cubic spline patch. To do this
we expand the the recursion backwards:
P3,0 = µP2,1 + (1 − µ)P2,0
= µ[µP1,2 + (1 − µ)P1,1 ] + (1 − µ)[µP1,1 + (1 − µ)P1,0 ]
= µ2 P1,2 + 2µ(1 − µ)P1,1 + (1 − µ)2 P1,0
= µ2 [µP0,3 + (1 − µ)P0,2 ] + 2µ(1 − µ)[µP0,2 + (1 − µ)P0,1 ]
+(1 − µ)2 [µP0,1 + (1 − µ)P0,0 ]
if we drop the first subscript, which indicated the construction level of the Casteljau algorithm we get:
P(µ) = µ2 [µP3 + (1 − µ)P2 ] + 2µ(1 − µ)[µP2 + (1 − µ)P1 ]
+(1 − µ)2 [µP1 + (1 − µ)P0 ]
= µ P3 + 3µ2 (1 − µ)P3 + 3µ(1 − µ)2 P1 + (1 − µ)3 P0
3

which is the same as the blending formulation.

So we can think of a four point Bezier curve as a cubic spline patch with shape control. The curve goes
through points P0 and P3 and by picking up points P1 and P2 with a mouse and moving them we can control
the shape as desired.

The Gradients at the spline ends

To determine the gradient at any point of a parametric spline curve we differentiate it with respect to the
parameter. Thus if:

P(µ) = P0 (1 − µ)3 + 3P1 µ(1 − µ)2 + 3P2 µ2 (1 − µ) + P3 µ3

we differentiate to get:

P0 (µ) = −3P0 (1 − µ)2 + 3P1 (1 − µ)2 − 6P1 µ(1 − µ) + 6P2 µ(1 − µ) − 3P2 µ2 + 3P3 µ2

grouping the terms

P0 (µ) = (3P1 − 3P0 )(1 − µ)2 + (6P2 − 6P1 )µ(1 − µ) + (3P3 − 3P2 )µ2

So at the start, where µ = 0, the gradient is 3P1 − 3P0 and at the end, where µ = 1, the gradient is 3P3 − 3P2 .
This confirms that the curve is tangential to P1 − P0 at the start and P3 − P2 at the end.

Interactive Computer Graphics Lecture 9 5

Lecture 10: Introduction to Surface Construction
Non-ParametricSurfaces
We now turn to the question of how to represent surfaces, and how to draw them. As was the case with
constructing spline curves, one possibility is to adopt the simple solution of non-parametric Cartesian equations.
A quadratic surface would have an equation of the form:
  
a b c d x
 b e f g  y 
[x y z 1]   c f h i  z  = 0
 

d g i 1 1
which multiplies out to:
ax2 + ey 2 + hz 2 + 2bxy + 2cxz + 2f yz + 2dx + 2gy + 2iz + 1 = 0
and the nine scalar unknowns (a, b, ..i) can be found by specifying nine points Pi = [xi , yi , zi ] through which
the surface must pass. This creates a system of nine linear equations to solve. Notice that because of the
inherent symmetry of the formulation there are only nine unknowns, not sixteen. The constant term can always
be taken as 1 without loss of generality. This method however suffers the same limitations as the analogous
method for curves. It is difficult to control the surface shape since there is only one quadratic surface that will
fit the points.

Parametric Surfaces
It is a simple generalisation to go to parametric surfaces. In the case of spline curves, the locus of a point was a
function of one parameter. However a point on a surface patch is a function of two parameters, which we write
as P(µ, ν). We could define a parametric surface using a matrix formulation:
  
a b c µ
P(µ, ν) = [µ, ν, 1]  b d e   ν  = 0
c e f 1
Multiplying out we get:
P(µ, ν) = aµ2 + 2bµν + 2cµ + dν 2 + 2eν + f (1)
The values of the constant vectors (a,b, . . f) determine the shape of the surface. The surface has edges given
by the four curves for which one of the parameters is either 0 or 1. These are the quadratics:
P(0, ν) = dν 2 + 2eν + f
P(1, ν) = a + 2(b + e)ν + 2c + dν 2 + f
P(µ, 0) = aµ2 + 2cµ + f
P(µ, 1) = aµ2 + 2(b + c)µ + d + 2e + f
The unknown values in the matrix (a, b, c etc) are
all vectors whose values can be computed by sub-
stituting in six points to be interpolated for given
values of µ and ν. Just as we did for the spline
curves, we need to specify the values of µ and
ν where the knots are located. For example, one
possibility is:
µ ν
P0 0 0
P1 0 1
P2 1 0
P3 1 1
P4 1/2 0 Figure 1: A simple Quadratic Surface
P5 1/2 1

Interactive Computer Graphics Lecture 10 1

These values will create a surface that is similar to figure 1. Substituting them into equation 1 we obtain a set
of linear equations to find the values of the constants (a,b,c,d,e,f) that define the patch.
P0 = f
P1 = d + 2e + f
P2 = a + 2c + f
P3 = a + 2b + 2c + d + 2e + f
P4 = a/4 + c + f
P5 = a/4 + b + c + d + 2e + f
This is more flexible than the non-parametric formulation, but it still does not provide us with a very useful
spline since there are no intuitive ways of using it to create a particular shape. Higher orders can be designed by
including µ2 and ν 2 in the formulation. However little is gained by doing this. Like the equations we developed
for the curves, this simple parametric form is only really applicable for solving specific interpolation problems.
It is not suitable for use as a general method of surface construction.

Bi-cubic surface patches

The patch method is available, and represents a
good general method, but it is more complex than
for spline curves. it is quite common to adopt a
formulation where the points are distributed on a
regular grid, one example is the case of a terrain
map. The data in this instance can be writen in
a non-parametric formulation in which a function
defines the height at each grid point:

y = f (x, z)

A typical patch is shown in figure 2. At every grid Figure 2: A “Terrain” Surface Patch
point there are two gradients which we can write
∂y
as ∂x and ∂y
∂z . Thus, if we are going to fit a patch to the four points, we need twelve parameters in the equation
of the patch, so that we can match the positions and both gradients at the four corners. Furthermore, we need
to ensure continuity along the boundaries of the patches. Rather than try to develop one equation which will do
this for us, we normally use bi-cubic interpolation. It will be seen from figure 2 that we can easily design spline
curves for the four edges. These curves will be continuous with the neighbouring patches. Thus we adopt a
solution where we use these curves at the edges of the patch, and we interpolate them in the middle of the patch.

Parametric Surface patches - the Coon’s Patch

Following the methods we applied to the
spline curves we adopt a parametric formu-
lation for the surface patches which gives
more flexibility in design. The parametric
formulation can be used for simple terrain
maps described above where the Cartesian
and parametric axes are the same. in gern-
eral though, the points which are to be in-
terpolated need not be on a regular grid in
the z −x plane though we still need them to
form a rectangular array. A typical patch in Figure 3: A Parametric Surface Patch
parametric space is shown in figure 3. We
can specify the four curves that bound a patch, using the method of cubic patches described in the lecture on
spline curves. In particular, we can derive the gradients from the central differences of the adjoining points
such that the surface will fit a rectangular grid of points smoothly.
Notice that the contours are orthogonal in the parameter space, and we have two parameters. That is to say,
contours joining Pi,j to Pi,j+1 and Pi+1,j to Pi+1,j+1 , are both functions of the ν parameter as it varies from

Interactive Computer Graphics Lecture 10 2

0 to 1, with constant µ. Similarly the contours joining Pi,j to Pi+1,j and Pi,j+1 to Pi+1,j+1 are both functions
of µ in the range 0 to 1 with constant ν. We can describe the edge contours joining the knots simply by treating
one of the parameters as fixed at 1 or 0. Thus we denote the four contours that bound the patch as follows:
P(0, ν) joining Pi,j to Pi,j+1
P(1, ν) joining Pi+1,j to Pi+1,j+1
P(µ, 0) joining Pi,j to Pi+1,j
P(µ, 1) joining Pi,j+1 to Pi+1,j+1
We need now to define the locus of P(µ, ν) within the patch, in such a way that at the edges it follows the
contours, and in the middle it is a reasonable blend of them. This is done by linear interpolation, the equation
being:

P(µ, ν) = P(µ, 0)(1 − ν) + P(µ, 1)ν + P(0, ν)(1 − µ) + P(1, ν)µ − P(0, 0)(1 − µ)(1 − ν)
−P(0, 0)(1 − µ)ν − P(0, 0)µ(1 − ν) − P(1, 1)µν (2)

This is a tricky equation to understand, but you can verify that you get the four edge contours by substituting
µ=0, µ=1, ν=0 and ν=1. The first four terms are simply a linear interpolation of both the bounding curves.
However it is clear that we cannot just add them together, as this would no longer go through the four points
that define the patch. The last four negative terms correct the curve at the corner points without introducing any
discontinuity. This formulation is called the Coon’s Patch, and is probably the easiest to use surface construction
method.

Rendering Surface Patches

A simple way to draw a patch of this kind is called
polygonisation. The method is illustrated in figure
4. Using equation 2 we can calculate a value of
P(µ, ν) for any given ν and ν. If they are in in the
range [0..1] the value is a point on the patch. Thus
we can calculate a regular grid of points over the
patch and join them into triangles. These are then
treated as polygons and fed to a polygon rendrer.
Providing we make the grid fine enough we can
get an exact representation down to pixel resolu- Figure 4: Triangulating a Surface Patch
tion. For faster results we can use coarser poly-
gons, and apply Gouraud or Phong shading to smooth out the discontinuities.
Rendering the patch using the method of ray tracing is also possible, but it is made difficult by the high
order of the patch equation. As we will see in the lecture on ray tracing we need to solve for the intersection of
a ray with the patch. The ray in can be written as a stright line P(γ) = S + γd then we can equate P(γ) with
P(µ, ν)) and then attempt to solve for the three parameters, γ, µ and ν. However, the equation of the patch
is fourth order (it has terms of µ3 ν and µν 3 ) and so only an iterative solution is possible. There will also be
several valid intersections between the ray and the patch, and it is necessary to find the nearest. This can be
done by numerical methods, but is computationally very expensive. If the surface is smooth, and relatively well
behaved, then a practical solution is to do a coarse polygonistion, using triangles, and intersect the ray with
each triangle to find the closest intersection. This area of the patch can then be polygonised further, and the
process repeated until sufficient accuracy is reached. Thus the calculation is simply the intersection of the ray
and the triangle.
An older way of drawing surfaces is to represent them by contours. This is called lofting (a term originating
from the aircraft industry). To draw a contour we need only fix one of the parameters, and draw the curve as the
other ranges over the interval 0 to 1. To produce any meaningful representation of a complex surface however,
it is necessary to eliminate the hidden lines, and this is done by a method called the floating horizon. Basically
we sort the contours into the order of the distance from us, which in the normal configuration is in order of z.
Then, we set up a record, for each pixel in the x direction of the largest y (height) found so far: ie the horizon.
Before each part of a contour is drawn it is checked against this horizon. If it is above it, it is drawn, and the
horizon is updated, if not it is ignored.

Interactive Computer Graphics Lecture 10 3

Example of Using a Coon’s Patch
We will conclude with an example of the construction of a
Coons patch. Part of a terrain map defined (for simplicity) on
a regular x,y grid is shown in figure 5. We will construct a
parametric Coon’s spline patch on the four centre points. The
corners are defined directly in figure 5 so we can write:
P(0, 0) = (9, 4, 12)
P(0, 1) = (9, 5, 11)
P(1, 0) = (10, 4, 13)
P(1, 1) = (10, 5, 14)
We need to define the gradients at the corners of the patch. Figure 5: An example of the Coons Patch
We can use the central difference approximation using the two
points adjacent to the corners. For gradients in the µ or x di-
rection:
∂P(0, 0)/∂µ = ((10, 4, 13) − (8, 4, 10))/2 = (1, 0, 1.5)
∂P(1, 0)/∂µ = ((11, 4, 10) − (9, 4, 12))/2 = (1, 0, −1)
∂P(0, 1)/∂µ = ((10, 5, 14) − (8, 5, 9))/2 = (1, 0, 2.5)
∂P(1, 1)/∂µ = ((11, 5, 11) − (9, 5, 11))/2 = (1, 0, 0)
and for the gradients in the ν or y direction:
∂P(0, 0)/∂ν = ((9, 5, 11) − (9, 3, 14))/2 = (0, 1, −1.5)
∂P(1, 0)/∂ν = ((10, 5, 14) − (10, 3, 15))/2 = (0, 1, −0.5)
∂P(0, 1)/∂ν = ((9, 6, 10) − (9, 4, 12))/2 = (0, 1, −1)
∂P(1, 1)/∂ν = ((10, 6, 10) − (10, 4, 13))/2 = (0, 1, −1.5)
To find the bounding contours we use the cubic spline patch equation. Thus:

P(µ, 0) = a3 µ3 + a2 µ2 + a1 µ + a0

We need to solve for the four constant vectors a3 , a2 , a1 and a0 , and we do this using the matrix formulation
introduced in the lecture on spline curves which yields:
a0 = P0 = (9, 4, 12)
a1 = P00 = (1, 0, 1.5)
a2 = −3P0 − 2P00 − 3P1 − P01 = −3 ∗ (9, 4, 12) − 2 ∗ (1, 0, 1.5) + 3 ∗ (10, 4, 13) − (1, 0, 1) = (0, 0, 1)
a3 = 2P0 + P00 − 2P1 + P01 = 2 ∗ (9, 4, 12) + (1, 0, 1.5) − 2 ∗ (10, 4, 13) + (1, 0, 1) = (0, 0, 0.5)
Similarly we can solve for the other bounding curves P(µ, 1), P(0, ν) and P(1, ν).
We now have equations for all the individual terms in the Coon’s patch:
P(µ, 0): a cubic polynomial in µ
P(µ, 1): a cubic polynomial in µ
P(0, ν): a cubic polynomial in ν
P(1, ν): a cubic polynomial in ν
P(0, 0), P(0, 1), P(1, 0) and P(1, 1): the corner points,
so given µ and ν we can evaluate each of these eight terms and so find the coordinate on the Coon’s patch using
equation 2.

Interactive Computer Graphics Lecture 10 4

Tutorial 5: Texture Mapping
This tutorial concerns texture mapping onto polygons. We will consider the case of a terminal in
which individual pixels can be set to any intensity in the range [0, Imax].

Suppose that the following function is used to transform texture coordinates (α, β ) into an
intensity value:

(α + β )
I= I max
2

I is therefore the intensity given to a pixel which corresponds to position (α, β ) in texture space.

A quadrilateral is projected onto the screen. The screen coordinates and texture coordinates of its
vertices are as follows:

Vertex Screen coordinates (x, y) Texture coordinates (α, β )

P1 (5,5) (0, 0)
P2 (15,30) (0, 1)
P3 (50,50) (1, 1)
P4 (40,10) (1, 0)

1. Let Pt be the point with screen coordinates (30, 30). Calculate the texture coordinates (α, β)
corresponding to Pt and find the intensity to be applied to Pt.

N.B. Use bi-linear interpolation to find the texture coordinates, i.e. solve for (α, β ) the equation:

p = αβ (c − b) + α a + β b

Where
p = Pt - P1 a = P4 - P1 b = P2 - P1 c = P3 - P4

DOC Interactive Computer Graphics Tutorial 5 page 1

Computing texture coordinates for every pixel by using bi-linear interpolation is very time
consuming, since the solution of a quadratic is required. By doing the calculations differentially,
much computation time can be saved.

For example, consider the line from P1 to P2: At P1 β = 0 and at P2 β = 1 and there are 26 pixels on
the line (the biggest change in the screen coordinates is along the y-component, from 5 to 30,
which gives 26 pixels including the end-points).

Moving along the line from P1 to P2, the differential change in β from one pixel to the next is
1 because 26 pixels (including end-points) have 25 spaces between them.
25

Thus, we can estimate the values of β at each pixel along the line simply by adding the differential
as we move from one pixel to its neighbour.

2. What are the differentials in α and β for the four lines bounding the quadrilateral?

3. Now consider the horizontal line through the point (30, 30). Using the differential method
above, find the values of α and β at the points where it intersects the sides of the quadrilateral, and
hence find the differentials in α and β along the line.

4. Use these differential values to compute α and β at the point (30, 30). Find also the
corresponding intensity to be given to the pixel. Compare your results with the values obtained in
part 1.

5. Can you suggest why the methods in parts 1 and 3 do not give exactly the same result?

Notice that with the differential method, calculating α and β for most of the pixels in the
quadrilateral requires only two additions, and hence is much faster.

DOC Interactive Computer Graphics Tutorial 5 page 2