At the end of this module you are expected to:

1. Demonstrate how to evaluate game concepts

2. Demonstrate an understanding of various tools that are used in game development

3. Demonstrate an understanding of the game development process

4. Demonstrate an understanding of 3D computer environments

5. Demonstrate an understanding of game development tools

6. Demonstrate an understanding of how to analyze the different uses of textures

7. Demonstrate an understanding of level design, creation tools, and editors

WEEK 2:
Procedural Generation: 2D Perlin Noise
Perlin Noise in 2D: In the previous lecture we introduced the concept of Perlin noise, a structured random
function, in a one-dimensional setting. In this lecture we show how to generalize this concept to a two-
dimensional setting. Such two-dimensional noise functions can be used for generating pseudo-random terrains
and two-dimensional pseudo-random textures.
The general approach is the same as in the one-dimensional case:
• Generate a finite sample of random values
 1

1 1
2·
2
noise(2t
0

1
· noise(4t)
4
1
4
0
1
0

Fig. 50: Dampened noise functions and the Perlin noise function (with persistence p = 1/2).

• Generate a noise function that interpolates smoothly between these values

• Sum together various octaves of this function by scaling it down by factors of 1/2, and then applying a
dampening persistence value to each successive octave, so that high frequency variations
are diminished
Let’s investigate the finer points. First, let us begin by assuming that we have an n× n grid of unit squares (see
Fig. 51(a)), for a relatively small number n (e.g., n might range from 2 to 10). For each
vertex [i, j] of this grid, where ≤0 i, j ≤n, let us generate a random scalar value z[i,j]. (Note that these values are
actually not very important. In Perlin’s implementation of the noise function, these value
areall set to 0, andit still produces a remarkably richlooking noisefunction.) As in the 1-dimensional
case, it is convenient to have the values wrap around, which we can achieve by setting z[i,n] = z[i,0]
and z[n,j] = z[0,j] for all i and j.
Given any point (x, y), where 0 ≤ x, y < n, the corner points of the square containing this point are (x0, y0), (x1,
y0), (x1, y1), (x0, y1) where:
x0 = |x∫ and x1 = (x0 + 1) mod n y0
= |y∫ and y1 = (y0 + 1) mod n
(see Fig. 51(a)).
We could simply apply smoothing to the random values at the grid points, but this would produce a result that
clearly had a rectangular blocky look (since every square would suffer the same variation). Instead, Perlin came
up with a way to have every vertex behave differently, by creating a random gradient at each vertex of the grid.
 Initial grid Smoothing/Interpolation
n Ra
ndom gradient vectors
(x0,y1) n
(x1, y1)
(x0, y0)
(x, y)
1
(x1, y0)
1

0 0
0 1 n n
0 1
(a) (b) (c)

Fig. 51: Generating 2-dimensional Perlin noise.

Noise from Random Gradients: Before explaining the concept of gradients, let’s recall some basics from
differential calculus. Given a continuous function f (x) of a single variable x, we know that the derivative of the
function df /dx yields the tangent slope at the point (x, f (x)) on the function. If we instead consider a function
f (x, y) of two variables, we can visualize the function values (x, y, f (x, y)) as defining the height of a point on a
two-dimensional terrain. If f is smooth, then each point of the terrain can be associated with tangent plane. The
“slope” of the tangent plane passing through such a point is defined by the partial derivatives of the function,
namely ∂f/∂x and ∂f/∂y. The vector (∂f/∂x, ∂f/∂y) is a vector in the (x, y)-plane that points in the
direction of steepest ascent for the function f . This vector
changes from point to point, depending on f . It is called the gradient of f , and is often denoted ∇f .
Perlin’sapproachto producinganoisy 2-dimensionalterrain involvescomputingarandom 2-dimensional gradient
vector at each vertex of the grid with the eventual aim that the smoothed noise function have this gradient value.
Since these vectors are random, the resulting noisy terrain will appear to behave very differently from one
vertex of the grid to the next. At one vertex the terrain may be sloping up to the northeast, and at a
neighboring vertex it may be slopping to south-southwest. The random variations in slope result in a very
complex terrain. But how do we define a smooth function that has this behavior? In the one dimensional case we
used cosing interpolation. Let’s consider how to generalize this to a two-dimensional setting.
Consider a single square of the grid, with corners (x0, y0), (x1, y0), (x1, y1), (x0, y1). Let g[0,0], g[1,0],
g[1,1], and g[0,1] denote the corresponding randomly generated 2-dimensional gradient vectors (see Fig.
51(c)). Now, for each point (x, y) in the interior of this grid square, we need to blend the effects
of the gradients at the corners. To do this, for each corner we will compute a vector from the corner to the point
(x, y). In particular, define

v[0,0] = (x, y) − (x0, y0) and v[0,1] = (x, y) − (x0, y1)

v[1,0] = (x, y) − (x1, y0) and v[1,1] = (x, y) − (x1, y1)
(see Fig. 51(c)).
Next, for each corner point of the square, we generate an associated vertical displacement, which indicates the
height of the point (x, y) due to the effect of the gradient at this corner point. How
should this displacement be defined? Let’s fix a corner, say (x, 0, y0). Intuitively, if v[0,0] is directed in the
same direction as the gradient vector, then the vertical displacement will increase (since we are going uphill). If
it is in the opposite direction, the displacement will decrease (since we are going
downhill). If the two vectors are orthogonal, then the vector v[0,0] is directed neither up- or downhill,
 and so the displacement is zero. Among the vector operations we have studied, the dot product produces exactly
this sort of behavior. (When two vectors are aligned, the dot-product is maximized, when they are anti-aligned
it is minimized, and it is zero when they are orthogonal. It also scales linearly with the length, so that a point
that is twice as far away along a given direction has twice the displacement.) With this in mind, let us define
the following scalar displacement values:
δ[0,0] = (v[0,0] · g[0,0]) and δ[0,1] = (v[0,1] · g[0,1])
δ[1,0] = (v[1,0] · g[1,0]) and δ[1,1] = (v[1,1] · g[1,1]).

Fading: The problem with these scalar displacement values is that they are affected by all the corners of the square,
and in fact, as we get farther from the associated corner point the displacement gets larger. We want the gradient
effect to apply close to the vertex, and then have it drop off quickly as we get closer to another vertex. That is,
we want the gradient effect of this vertex to fade as we get farther from the vertex. To do this, Perlin defines the
following fade function. This is a function of t that will start at 0 when t = 0 (no fading) and will approach 1
when t = 1 (full fading). Perlin originally
settled on a cubic function to do this, ϕ(t) = 3t2 −2t3. (Notice that this has the desired properties, and further
its derivative is zero at t = 0 and t = 1, so it will smoothly interpolate with neighboring squares.) Later, Perlin
observed that this function has nonzero second derivatives at 0 and 1, and so he settled on the following
improved fade function:

ψ(t) = 6t5 − 15t4 + 10t3

(see Fig. 52). Observe again that ψ(0) = 0 and ψ(1) = 1, and the first and second derivatives are both zero at
these endpoints.

1
The fade function

ψ(t) = 6t5− 15t4 + 10t3

0
0 1
Fig. 52: The fade function.

Because we want the effects to fade as a function of both x and y, we define the joint fade function to be the
product of the fade functions along x and y:
Ψ(x, y) = ψ(x)ψ(y).
The final noise value at the point (x, y), arises by taking the weighted average of gradient displacements, where
each displacement is weighted according to the fade function.
We need to apply the joint fade function differently for each vertex. For example, consider the fading
for the displacement δ[1,0] of the lower right corner vertex. We want the influence of this vertex to increase as x
approaches 1, which will be achieved by using a weight of ψ(x). Similarly, we want the influence of this vertex
to increase as y approaches 0, which will be achieved by using a weight of ψ(1 −y). Therefore, to achieve
both of these effects, we will use the joint weight function Ψ(x, 1− y).
By applying this reasoning to the other corner vertices, we obtain the following 2-dimensional noise
function.

noise(x, y) = Ψ(1 − x, 1 − y)δ[0,0] + Ψ(x, 1 − y)δ[1,0] + Ψ(1 − x, y)δ[0,1] + Ψ(x, y)δ[1,1].

Adding Back the Random Heights: We have left one little bit out of our noise function. Remember that we
started off by assigning random scalar values to each of the of the grid. We never made use of these (and indeed,
Perlin’s formulation of the noise function does not either). In order to achieve this extra degree of randomness,
we can add these back into the vertical displacements. Suppose, for example that we are considering the grid
square whose lower left corner has the indices [i, j]. When defining the vertical displacements, let us add in the
associated random scalar values associated with each of the vertices:
δ[0,0] = z[i,j] + (v[0,0] · g[0,0]) and δ[0,1] = z[i,j+1] + (v[0,1] · g[0,1])
δ[1,0] = z[i+1,j] + (v[1,0] · g[1,0]) and δ[1,1] = z[i+1,j+1] + (v[1,1] · g[1,1]).
The rest of the noise computation is exactly the same as described above.
Octaves and Persistence: After all of that work, we still have only a single smooth noise function, but not one
that demonstrates the sort of fractal-like properties we desire. To add this, we need to perform the same scaling
that we used for the 1-dimensional case. In this case, the process is entirely analogous. As before, let p be a
value between 0 and 1, which will determine how quickly things dampen down. Also, as before, at each level
of the process, we will double the frequency. This leads to the following final definition of the 2-dimensional
Perlin noise:

Σk
perlin(x, y) = pi · noise(2i · x, 2i · y).
i=0
(As before, recall that the value 2i can be replaced by some parameter Ai, where A > 1.) This applies to
each square individually. We need to perform the usual “modding” to generalize this to any square of the
grid. (An example of the final result is shown in Fig. 53(a) and a terrain resulting from applying this is shown
in Fig. 53(b). Note that the terrain does not look as realistic as the terragen from Fig. 51(a). There are
other processes, such as erosion and geological forces that need to be modeled to achieve highly realistic
terrains.)

noise(t)

perlin(t) = the sum of th ese

 (a) (b)

Fig. 53: (a) Two-dimensional Perlin noise and (b) a terrain generated by Perlin noise.

Source Code: While the mathematical concepts that we have discussed are quite involved, it is remarkable that
Perlin noise has a very simple implementation. The entire implementation can be obtained from Perlin’s web
page, and is shown nearly in its entirety in the code block below.

Procedural Generation: L-Systems

L-Systems: In this lecture we will consider the issue of how to generate “tree-like” objects, which are characterized
by a process of growth and branching. The standard approach is through a structure
 Perlin’s Implementation of Perlin Noise
public final class ImprovedN oise {
static public double noise( double x, double y, double z) {
int X = ( int) Math . floor(x) & 255 , // FIND UN IT CU BE
THAT Y = ( int) M ath . floor(y) & 255 , // CONT AINS POINT .
Z = (int) M ath . floor(z) & 255;
x -= Math . floor(x); // FIND REL AT IVE X ,Y , Z
y -= Math . floor(y); // OF POINT IN CUBE . z
-= Math . floor(z);
double u = fade( x), // COMPUTE FADE CURVES
v = fade(y), // FOR E ACH OF X ,Y ,Z .
w = fade( z);
int A = p[X ]+Y , AA = p[A ]+Z , AB = p[A +1]+ Z ,// HASH C OO R D INA TE S
OF B = p[X +1]+ Y , BA = p[B ]+Z , BB = p[B +1]+ Z ;// T HE 8 CUBE CO RNE
RS ,
// AND ADD BLENDED RESULTS FROM 8 CORNERS OF CUBE
return lerp (w , lerp (v, lerp (u, grad (p[ AA ], x , y , z ),
grad( p[ BA ], x-1 , y , z )),
lerp(u, grad( p[ AB ], x , y-1 , z ),
grad( p[BB ], x-1 , y-1, z ))),
lerp (v, lerp (u, grad (p[ AA +1], x ,y , z-1 ),
grad (p[ BA +1], x -1 , y , z-1 )),
lerp (u , grad (p[ AB +1], x , y -1 , z-1 ),
grad (p[ BB +1], x -1 , y -1 , z-1 ))));
}
static double fade( double t) { return t* t* t*( t*( t*6 - 15) + 10); } static double lerp( double t, double a,
double b)
{ return a + t*( b - a); }
static double grad( int hash , double x, double y, double z) {
int h = hash & 15; // CONVERT LO 4 BITS OF HASH CODE double
u = h <8 ? x : y, // INT O 12 GRAD IE NT D IR E CT ION S
.
v = h <4 ? y : h == 12||h ==14 ? x : z;
return (( h &1) == 0 ? u : -u) + (( h &2) == 0 ? v : -v);
}
static final int p [] = new int [512], perm utation [] = {
151 ,160 ,137 ,91 ,90 ,15 , // ... remaining 506 entries omitted
};
static { for ( int i=0; i < 256 ; i++) p [256+ i] =
p[i] = permutation [i]; }
}
called an L-system. L-systems, short for Lindenmayer-systems, were first proposed by a biologist Aristid
Lindenmayer in 1968, as a mechanism for defining plant development.

Fig. 54: Examples of simple plant models generated by L-systems.

If you have taken a course in formal language theory, the concept of an L-system is very similar to the concept
of a context-free grammar. We start with an alphabet, which is a finite set of characters, called symbols or
variables. There is one special symbol, called the start symbol (or axiom in L-system terminology). In L-
systems, symbols are categorized in two types. First, variables are symbols that can be replaced with other
symbols. Second, constants are symbols that are fixed and cannot be replaced. Finally, there is a finite set of
production rules. Each production replaces a single variable with a string (or zero or more) symbols (which
may be variables or constants). Such a rule is expressed in the following form:
(variable) → (string).
To get a better grasp on this, let us consider a simple example, developed by Lindenmayer himself to describe
the growth of algae.
variables : {A, B}
constants : ∅ (none)
start : A
rules : A → AB; B→A
An L-system works as follows. Starting with the start symbol, we repeatedly replace each variable with a
compatible rule. In this case, each occurrence of A is mapped to AB and each occurrence of B is mapped to A.
This is repeated for some number of levels. (Note that this is major difference between L-systems and context-
free grammars. In context-free grammars, any one rule is applied. In L-systems, all the applicable rules are
applied in parallel. The above grammar produces the following sequence of strings (for the first 7 levels of
application):
n=0:A
n = 1 : AB
n = 2 : ABA
n = 3 : ABAAB
n = 4 : ABAABABA
n = 5 : ABAABABAABAAB
n = 6 : ABAABABAABAABABAABABA
n = 7 : ABAABABAABAABABAABABAABAABABAABAAB
 As an aside, if you count the number of symbols in each of the strings, you’ll observe the sequence
(1, 2, 3, 5, 8, 13, 21, .). . . Is this sequence familiar? This is the famous Fibonacci sequence, which has been
observed to arise in the growth patterns of many organisms.
Using L-Systems to Generate Shapes: So what does this have to do with shape generation? The idea is to let
each symbol represent some sort of drawing command (e.g., draw a line segment, turn at a specified angle, etc.)
This is sometimes referred to as turtle geometry (I guess this is because each command is thought of as being
relayed to a turtle who carries out the drawing process).
Consider the following L-system:

variables : {0, 1}
constants : {[ , ]}
start : 0
rules : 1 → 11; 0→1[0]0
If we carry out the first few stages of the expansion, we have

n=0:0
n=1:1[0]0
n = 2 : 11 [ 1 [ 0 ] 0 ] 1 [ 0 ] 0
n = 3 : 1111 [ 11 [ 1 [ 0 ] 0 ] 1 [ 0 ] 0 ] 11 [ 1 [ 0 ] 0 ] 1 [ 0 ] 0

There is nothing particularly pictorial about this, but now let’s assign some drawing instructions. Let us
assume that we associate a push-down stack with the drawing process. Define
• “0”: Draw a unit length line segment with a leaf on the end and increase
• “1”: Draw a unit length line segment
• “[”: push the current position/scale and angle on the stack turn CCW 45 ◦, and scale by 1/2
• “]”: pop the current position/scale and angle off the stack, turn CW 45 ◦, and scale by 1/2 (An
L-system that uses [ and ] is sometimes referred to as an L-system with brackets.)
Now, if we use the above directions as the basis for generating a turtle-geometry drawing, we obtain the
drawing shown in Fig. 55.
Of course, this is far from being a realistic tree, but it is not hard to enhance this basic system with more
parameters and some randomness in order to generate something that looks quite like a tree.
Randomization and Stochastic L-Systems: As described, L-systems generate objects that are too reg- ular
to model natural objects. However, it is an easy matter to add randomization to the process.
The first way of introducing randomness is to randomize the graphical/geometric operations. For ex- ample,
rather than mapping terminal symbols into fixed actions (e.g., draw a unit-length line segment), we could add
some variation (e.g., draw a line segment whose length is a random value between 0.9 and 1.1). Examples
include variations in drawing lengths, variations in branching angles, and variations in thickness and/or texture
( see Fig. 54.)
While the above modifications alter the geometric properties of the generated objects, the underlying structure
is still the same. We can modify L-systems to generate random structures by associating each production
rule with a probability, and apply the rules randomly according to these probabilities. For example consider the
following two rules:

a −→[0.4] a[ b]
a −→[0.6] b[ a] b
 0 1[0]0 11[1[0]0]1[0]0
1111[11[1[0]0]1[0]0]11[1[0]0]1[0]0

0 0 0
0 0 0 1 0
0 0 1
0 0 1 0 1 0
1 1
1
1
1
1
0 1
1
1
n=0 n=1 n=2 n=3
Fig. 55: A simple tree-like structure generated by an L-system. (Note that the figure is not drawn exactly to scale.)
With each branching, the scale factor decreases by 1/2.

The interpretation is that the first rule is to by applied 40% of the time and the second rule 60% of the time.

References and Supplementary Materials

Books and Journals

1. AI Game Engine Programming by Brian Schwab

Online Supplementary Reading Materials
1. http://graphics.cs.cmu.edu/courses/16-465-s15/
2. https://www.bokus.com/bok/9781584505723/ai-game-engine-programming-2nd-edition-bookcd-
package/

Online Instructional Videos

1. https://www.youtube.com/watch?v=knNx4iNdduQ
2. https://www.youtube.com/watch?v=ss3AnSxJ2X8&list=PLEETnX-uPtBXP_B2yupUKlflXBznWIlL5