代做COMP5110、代写Programming、代做Java设计、Java编程语言调试

日期：2019-11-27 08:58

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

<svg width="500" height="500"

xmlns="http://www.w3.org/2000/svg">

<defs>

...define your filters here...

</defs>

...SVG content here...

</svg>

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 <rect> Elements

? There are three SVG <rect> elements given in

the starting system:

<rect x="0" y="0" width="500" height="500"

filter="url(#sky)"/>

<rect x="0" y="300" width="500" height="200"

filter="url(#grass)"/>

<g id="tree"

filter="url(#random)"/>

<rect x="0" y="400" width="500" height="100"

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

<rect x="0" y="0" width="500" height="500"

filter="url(#sky)"/>

<rect x="0" y="300" width="500" height="200"

filter="url(#grass)"/>

<g id="tree"

filter="url(#random)"/>

<rect x="0" y="400" width="500" height="100"

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

<your ITSC account>_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