COMP5110
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
lib
JavaScript
libraries
The SVG Area
• The SVG area is an embedded
SVG inside an HTML file
• The size of the SVG is 500 by
500 pixels


...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 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
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 symbols
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
F+F+F+F
F
FF
F
Start
++
+
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
0
11
22
22
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 Fn 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, 5 Dec 2020
• 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
Penalty for Late Submission
• If you submit your assignment after the deadline
it causes us a lot of time and trouble, so please
don’t do that. Our policy for lateness is:
-10 marks if you submit up to 1 hour late
(even if you are 0.01 second late!)
-5 marks for each further hour late, up to 12 hours
i.e. if you submit 90 minutes late the penalty will be
-15 marks
Zero marks if you submit more than 12 hours late
CSIT5110 Assignment 2 Page 77

欢迎咨询51作业君