Multimedia Development
Assignment 2
Gibson Lam
Graphic Programming
• This assignment covers two different parts
of graphic programming:
– Part 1:
Making textures using Perlin noise data
– Part 2:
Growing a tree using an extended L-system
• Different techniques have been used in
these two parts so you can work on each of
them separately
CSIT5110 Assignment 2 Page 2
The Assignment System
• Here is an example display of the assignment:
The Starting System
• The starting system is available in the
course website
• The system has a similar structure as the
one you have done for assignment 1
• However, this time you will need to use
more JavaScript specific techniques when
you work on the assignment
• After downloading the system, you extract the
files into an appropriate folder and start the
system by opening index.html in a browser,
preferably in Chrome
File Structure
index.html
js
Starting
HTML file
JavaScript files,
all your code will
be added here
CSIT5110 Assignment 2 Page 5
You change this
JavaScript file
for part 2 of the
assignment
You change this
JavaScript file
for part 1 of the
assignment
The SVG Area
• The SVG area is an embedded
SVG inside an HTML file
• The size of the SVG is 500 by
500 pixels
xmlns="http://www.w3.org/2000/svg">
...define your filters here...
...SVG content here...
CSIT5110 Assignment 2 Page 6
The Control Area
• The control area is the place where you can
change the settings of the textures or
L-system parameters
CSIT5110 Assignment 2 Page 7
Part 1 – Making Perlin Noise Textures
• For the first part of the assignment, you need
to build a couple of Perlin noise textures that
are used in a few SVG elements
• Here are the two textures that you need to
make:
CSIT5110 Assignment 2 Page 8
– The sky texture – The grass texture
The SVG Elements
• There are three SVG elements given in
the starting system:
filter="url(#sky)"/>
filter="url(#grass)"/>
filter="url(#random)"/>
filter="url(#grass)"/>
The group is not relevant for
this part of the assignment;
it is for part 2: L-system
The Rectangles’ Arrangement
• By looking at the SVG code, you can see
that the rectangles are arranged in three
layers like this:
CSIT5110 Assignment 2 Page 10
The Grass Layers
• The two grass layers are two rectangles
using the same grass filter
• Two layers of grass are
used in the display for the
same texture because the
L-system tree will be put
in between the two layers
later, so that the bottom of
the tree trunk will be hidden by one of the
grass layers
CSIT5110 Assignment 2 Page 11
The Sky Texture
• The sky texture is a simple Perlin noise
texture that we have discussed in the
previous lectures
• You will need at least three filter effects to
create the sky texture:
– feTurbulence
– feComponentTransfer
– feColorMatrix
CSIT5110 Assignment 2 Page 12
Filter Effects for Sky Texture
CSIT5110 Assignment 2 Page 13
feTurbulence
feComponentTransfer
feColorMatrix
Note that you
may use other
filter effects and
a different filter
effect order
The Controls for the Sky Texture
• You can control the sky texture using the
following parameters:
CSIT5110 Assignment 2 Page 14
Controlling the Sky Colour
• You can change the sky colour to any other colour
using the colour control
• Here are a couple of examples:
• In the system, we assume the clouds are always
in white colour
CSIT5110 Assignment 2 Page 15
Changing the Amount of Clouds
• You can change the amount of clouds by
adjusting the ‘Cloud Amount’ parameter
• The parameter is a number which maps to
the exponent of the gamma transfer
• Here are a couple of examples:
CSIT5110 Assignment 2 Page 16
Setting the Cloud Frequency
• The cloud frequency corresponds to the frequency
of the changing clouds, which is mapped to the
frequency of the Perlin noise data
• Lower frequencies usually work better for clouds:
• For the assignment, you can assume the number
of octaves for feTurbulence is always 3
The Grass Texture
• The grass texture is a
variation of the sky texture,
plus a rough edge at the
top of the grass area
• To make the grass texture, you
will need a slightly different set of filter effects:
– feTurbulence
– feColorMatrix
– feOffset
– feDisplacementMap
CSIT5110 Assignment 2 Page 18
Filter Effects for Grass Texture
CSIT5110 Assignment 2 Page 19
feTurbulence
feColorMatrix
feOffset
feDisplacementMap
Offset may be needed
if the displacement
cannot be shown
Note that you
may use other
filter effects and
a different filter
effect order
The Controls for the Grass Texture
• You can control the grass texture using the
following parameters:
CSIT5110 Assignment 2 Page 20
Changing the Grass Colours
• The colour mapping of the grass texture
has two colours
• You can change the two colours by
adjusting the colour controls
• For example, the mapping can be changed
to, yellow to red:
CSIT5110 Assignment 2 Page 21
Setting the Grass Frequency
• Similar to the cloud parameter, the grass
frequency is mapped to the frequency of the
Perlin noise data
• For grass, higher frequencies usually work better:
• Since the Perlin noise data is used in both the
grass texture and the displacement, adjusting the
frequency will affect them both
Part 2 – An Extended L-System
• The starting code gives you a basic L-system that
can create some simple L-system curves
• Part 2 of the assignment aims at extending the
L-system to draw trees by:
1. Adding a stack and the corresponding
[ and
] symbols to the L-system
2. Including the use of colours for different symbol
s
3. Adjusting the length and width of the lines based
on a depth parameter
4. Randomizing the tree display
CSIT5110 Assignment 2 Page 23
The Control Area for the L-System
• Here is the
control area
for part 2:
• We will look
at the tabs
in the next
few slides
CSIT5110 Assignment 2 Page 24
The Basic Tab
• The basic tab defines the starting string of
the L-system and the number of iterations
to run for the system
CSIT5110 Assignment 2 Page 25
The Rules Tab
• In the rules tab, you can set as many as
5 replacement rules for the L-system
CSIT5110 Assignment 2 Page 26
The Visual Tab
• The visual tab contains some visual parameters of
the L-system, such as the length and width of the
lines and the angle to turn each time
• The length and
width ratios are
for adjusting the
tree branches
• The random
frequency and
strength are
for randomizing
the tree display
The Colours Tab
• You define the colours to be used for some
symbols in the L-system in the colours tab
CSIT5110 Assignment 2 Page 28
The Result Tab
• The result tab has a text area which shows
the last L-system string generated by the
L-system
• It is very
useful for
debugging
purpose
CSIT5110 Assignment 2 Page 29
The L-System Output
• Using the L-system
parameters shown in
the previous slides,
the tree shown on
the right can be
generated by the
extended L-system:
CSIT5110 Assignment 2 Page 30
The Given L-System
• In the starting system,
if you draw the L-system
using the ‘Draw Tree’
button, the parameters
will give you a Koch
snowflake:
• If you like, you can adjust the parameters to
draw different L-system curves
• However, not all parameters, such as colours,
are supported in the starting system
CSIT5110 Assignment 2 Page 31
The Turtle Graphics System
• The turtle.js file contains
a JavaScript implementation of
the turtle graphics
system
• The turtle graphics
system is a simple
drawing system that
can create interesting line graphics
• The assignment uses this turtle graphics
system to draw the L-system images
CSIT5110 Assignment 2 Page 32
Using the Turtle
• The turtle graphics system
relies on a ‘turtle’ to draw
things in a 2D drawing area
• The turtle holds a pen so it
leaves lines behind when it
moves in the drawing area
• To draw things using a program, you write a
series of commands to move the turtle around
• These turtle graphics commands are mainly for
moving the turtle as well as changing the
properties of the pen
Position and Heading
• The turtle has a position
and heading
• The position is the current x and y position
of the turtle in the drawing area and the
heading is the direction the turtle is looking
at, which is an angle from 0 to 360 degree
– A angle of 0 means looking to the right
• You can ask the turtle to move based on
its position and heading; or move it to an
absolute position in the drawing area
CSIT5110 Assignment 2 Page 34
Drawing an L-System String
• For example, given the following L-system string:
• You can ask the turtle to
draw the string by asking
the turtle to move forward
when you see the symbol
‘F’ and turn right when you
see the symbol ‘+’
• The turtle will produce a
square from the L-system
string
The Turtle Graphics Commands 1/2
• In these two slides, we list the supported turtle
graphics commands in the system
• Here are the commands for moving:
• turtle.goto(x,y)
• turtle.home()
• turtle.forward(length
)
• turtle.backward(length
)
• turtle.setHeading(heading
)
• turtle.left(angle
)
• turtle.right(angle)
Go to an absolute position,
where home means (0, 0)
Move forward or backward
by a certain distance
Change the heading
of the turtle
Turn left or right
The Turtle Graphics Commands 2/2
• Here are the commands for setting the pen
properties:
• turtle.color(color
)
• turtle.width(width
)
• turtle.up()
• turtle.down()
• Here are some other useful commands:
• turtle.pos()
• turtle.heading()
• turtle.reset()
Lift up the pen so no line is drawn or
put down the pen so lines are drawn
Change the colour
(=line colour) of the pen
Change the width
(=line thickness) of the pen
Get the current position, as an array
of [x, y] and the heading of the turtle
Reset and clear the turtle area
An Example Turtle Graphics Program
• This program
draws a square
in an SVG
group called
‘drawing_area’
var turtle = new Turtle($("#drawing_area"));
turtle.up();
turtle.goto(50, 50);
turtle.down();
turtle.color("red");
turtle.width(5);
turtle.forward(300);
turtle.right(90);
turtle.forward(300);
turtle.right(90);
turtle.forward(300);
turtle.right(90);
turtle.forward(300);
Move to the
top-left corner
of the square
Change the
line to a red
and thick line
Ask the turtle to
move around
the square
The Drawing Area in the Assignment
• You have seen the SVG content from the part
1 discussion
• The turtle will draw inside the ‘tree’ group
filter="url(#sky)"/>
filter="url(#grass)"/>
filter="url(#random)"/>
filter="url(#grass)"/>
This is the group where
the turtle will draw on
The Given L-System Code
• You will need to read thoroughly the given
L-system code before working on the
extensions
• The code is inside the file lsystem.js
• The code starts from the drawTree()
function, which runs when you click on the
‘Draw Tree’ button
CSIT5110 Assignment 2 Page 40
The drawTree() Function
• The drawTree() function mainly does three
things:
1. Reading the L-system parameters from the
HTML components
(Not all of them are used in the starting system)
2. Running the runLSystem() function to generate
the L-system string
3. Running the drawLSystem() function to draw
the L-system image from the string
CSIT5110 Assignment 2 Page 41
Your Tasks
• From the lsystem.js file, you will need to
complete the following tasks:
Task 1 – Using a Stack
Task 2 – Changing Symbol Colours
Task 3 – Adding Depth
Task 4 – Randomising the Tree
CSIT5110 Assignment 2 Page 42
Task 1 – Using a Stack
• To use a stack, first, you create a stack
structure before you draw the L-system
– In JavaScript, a stack can be implemented
by a simple array, as shown on the next slide
• Then, when you see the
[ and
] symbols,
you use the stack to remember and restore
the position and heading of the turtle
respectively
CSIT5110 Assignment 2 Page 43
Using an Array as a Stack 1/2
• Here is some JavaScript that uses an array as a stack:
var stack = [];
stack.push(10);
stack.push(15);
alert("After pushing two items, the stack becomes: " + stack);
var item = stack.pop();
alert(item + " is popped from the stack.");
stack.push(20);
alert("After pushing another item, the stack becomes: "
+ stack);
CSIT5110 Assignment 2 Page 44
Using an Array as a Stack 2/2
• Here is the
output of the
previous
example:
Putting Information onto the Stack
• The stack stores both the
turtle position and heading
as a single item
• You need to find a way to
push both values as a
single item onto the stack
• You can do that by putting
them into an array before
pushing
CSIT5110 Assignment 2 Page 46
The stack
[pos, heading]
Push
After Finishing Task 1
• After you finish this task, you should be able
to show a tree, for example, like this:
Task 2 – Changing Symbol Colours
• After task 1, the tree is completely black
• You will add some colours to the tree by
simply assigning different colours to
different symbols
• The colours are
specified in the
colours tab:
– ‘F’ is red and
‘A’ is green in
the example
The Colours in the Code
• The colour mapping has been stored in the
colors object in the code, which has been
initialised like this:
• A JavaScript object can also be used as
an associative array
• The colors object in the code has been
used like that
CSIT5110 Assignment 2 Page 49
var colors = {};
Using Objects as Assoc. Arrays 1/2
• Here is an example that builds an associative
array and then works with the content of the
array:
CSIT5110 Assignment 2 Page 50
var color = {};
color["red"] = 255;
color["green"] = 128;
color["blue"] = 128;
To next page
Using Objects as Assoc. Arrays 2/2
if ("alpha" in color) {
alert("The colour is in RGBA mode.");
alert("The colour is: [" +
color["red"] + ", " + color["green"] + ", " +
color["blue"] + ", " + color["alpha"] + "].");
}
else {
alert("The colour is in RGB mode.");
alert("The colour is: [" + color["red"] + ", " +
color["green"] + ", " + color["blue"] + "].");
} Only this part is run because
“alpha” is not in the object/array
From previous page
After Finishing Task 2
• After you finish this
task, you should be able
to show a coloured tree
• Here is an example:
The Default Colour
• If a symbol has not been mapped to any
colour, the default colour will be black
CSIT5110 Assignment 2 Page 53
Task 3 – Adding Depth
• This task is to add a ‘depth’ parameter to the
system
• The parameter is written next to a symbol
– For example, in the following L-system string:
the depth value of ‘
F’ is 1 and the depth value
of both ‘
A’ is 2
• The depth values are used for adjusting the
length and width of the symbols later
F1[+A2][-A2]
CSIT5110 Assignment 2 Page 54
Adjusting the Depth Value
• A symbol may have an associated depth value
such as F1 and A2 in the previous example
• If such a symbol is replaced, its depth value
will also be put inside the replacement string
at appropriate places
• The depth value to be put in the replacement
string is adjusted by adding on top a given
increment specified in the replacement rule
• An example is shown on the next slide
CSIT5110 Assignment 2 Page 55
A Replacement Rule with Depth
• For example, in the assignment, a replacement
rule can be written like this:
• This is equivalent to the following rule in a
parametric L-system:
• If the incoming symbol has a depth
d, the value
of
d will be increased for the two symbols
F and
A in the replacement rule
F → F0A1B
F(
d) → F(
d + 0)+A(
d + 1)B
CSIT5110 Assignment 2 Page 56
A Replacement Example
• Let’s apply the replacement rule from the
previous slide to this L-system string:
• The resulting L-system string will become:
F1[+A2][-A2]
F1A2B[+A2][-A2]
CSIT5110 Assignment 2 Page 57
This replacement is coming from the replacement
rule, where: F(
1) → F(1+0)A(1+1)B
Another Example
• If the L-system string is again F1[+A2][-A2]
and the replacement rule is:
the resulting L-system string will become:
A → A4F0
F1[+A6F2][-A6F2]
1. A2 is replaced by A4F0
2. Its depth value 2 has been put and added in
the location of 4 and 0 in the replacement, to
become 2 + 4 = 6 and 2 + 0 = 2 respectively
A Complete Example
• If the L-system has the following inputs:
– Starting string: F0[+A1][-A1]
– Rule: A → F0[+A1][-A1]
– Number of iterations: 1
• The resulting L-system string will be:
• The depth value can be used to indicate the
number of generation of branches in a tree
CSIT5110 Assignment 2 Page 59
F0[+F1[+A2][-A2]][-F1[+A2][-A2]]
Generation of Branches
• The tree shown below is drawn from the
L-system string:
• The generation
number is also
shown next to
each branch
CSIT5110 Assignment 2 Page 60
F0[+F1[+A2][-A2]][-F1[+A2][-A2]]
Extracting the Depth in the Code
• In the starting system, a function:
has been given to you so that you can extract a
number from an L-system string
• You can use the function to read the number at
a given location
• If there is no number at the given location, the
number returned will become NaN, which is a
JavaScript value meaning
Not a Number
• The NaN value can be detected by isNaN()
CSIT5110 Assignment 2 Page 61
getNumberFromString(string, index)
Using the Function
• For example, if the given string is “A10B5C6”
and the index is 1, the function will return the
following JavaScript object:
• Or, if the given string is “F[+A][-A]”and the
index is 7, the function will return the
following JavaScript object:
CSIT5110 Assignment 2 Page 62
{ number: 10, next: 3 }
{ number: NaN, next: 7 }
Using the Depth Values
• The depth values can be
used to adjust the length
and width of the branches
• The idea is that the younger
a branch is (i.e. having a
bigger depth), the thinner and shorter it is
• Using the length and width ratios, the
reduction of length and width can be applied
to each branch based on its depth value
CSIT5110 Assignment 2 Page 63
Adjusting the Length and Width
• For example, if the length is 10 initially and
the length ratio is 0.8, then
– the length of F0 will be 10
– the length of F1 will be 10 * 0.8
– the length of F2 will be 10 * (0.8)
2
– and so on
• In general, the length of
F
n will be:
• The same can be applied to the width value
CSIT5110 Assignment 2 Page 64
initial length × (length ratio
)
n
After Finishing
Task 3
• After finishing all tasks,
you can create a tree
which looks like this:
Task 4 – Randomising the Tree
• The final task is to randomise the tree display
• So far, the trees the system made are very
rigid and always have straight branches
• Real trees seldom
have such branches
as you can see from
the right
CSIT5110 Assignment 2 Part 1 Page 66
Randomising the Tree Display
• You can make use of simple filter effects
to randomise the tree display
• You will likely only need two filter effects in
order to do that:
– feTurbulence
– feDisplacementMap
CSIT5110 Assignment 2 Page 67
Filter Effects for Tree Display
CSIT5110 Assignment 2 Page 68
feTurbulence
feDisplacementMap
Note that you
may use other
filter effects and
a different filter
effect order
The Controls for the Tree Display
• You can control the tree display using the
following parameters in the Visual tab of
the L-system control area:
CSIT5110 Assignment 2 Page 69
Changing the Random Frequency
• You can change the frequency of tree display
using the ‘Random Frequency’ parameter
• The parameter is a number which maps to
the frequency of the Perlin noise data
• Here are a couple of examples:
• You can assume the octave number is 1
Setting the Random Strength
• The strength is the amount of movement for the
tree and it is mapped to the scale of the
displacement map
• Here are two examples:
• Obviously, both parameters work better when they
are relative small numbers
Combining Part 1 and Part 2
• Using both the results of part 1 and part 2,
the tree image can become:
Marking Scheme 1/3
• Total marks is 100
– The sky texture 20%
• A correct sky texture can be generated 5%
• The sky colour can be changed correctly 5%
• The cloud amount can be changed correctly 5%
• The cloud frequency can be changed correctly 5%
– The grass texture 20%
• A correct grass texture can be generated 5%
• The two layers of grass texture are properly done 5
%
• The grass colours can be changed correctly 5%
• The grass frequency can be changed correctly 5%
Marking Scheme 2/3
– Using L-system stack 10%
• L-system images are drawn correctly when the
stack symbols are used in the L-system string 10%
– Using L-system colour 10%
• Correct colours are used based on the
colour mapping 5%
• The default colour is black 5%
CSIT5110 Assignment 2 Page 74
Marking Scheme 3/3
– Using the depth parameter 25%
• Depth values are put at appropriate places using
replacement rules containing depth increments 10%
• Depth values are correctly increased in the result 5%
• Length is adjusted correctly using the depth values 5%
• Width is adjusted correctly using the depth values 5%
– Randomising the tree 15%
• The tree display can be ‘randomized’ 5%
• The random frequency can be adjusted correctly 5%
• The random strength can be adjusted correctly 5%
CSIT5110 Assignment 2 Page 75
Submission
• The deadline of the assignment is:
8pm, Saturday, 30 Nov 2019
• To submit your assignment:
– You need to put everything (HTML file and
JavaScript files) into a zip file called
_a2.zip
– For example, if your ITSC account is johnc, you will
put your files into johnc_a2.zip
– You can then submit the zip file through canvas
CSIT5110 Assignment 2 Page 76