Multimedia DevelopmentAssignment 2Gibson LamGraphic Programming• This assignment covers two different partsof 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 inthese two parts so you can work on each ofthem separatelyCSIT5110 Assignment 2 Page 2The Assignment System• Here is an example display of the assignment:The Starting System• The starting system is available in thecourse website• The system has a similar structure as theone you have done for assignment 1• However, this time you will need to usemore JavaScript specific techniques whenyou work on the assignment• After downloading the system, you extract thefiles into an appropriate folder and start thesystem by opening index.html in a browser,preferably in ChromeFile Structureindex.htmljsStartingHTML fileJavaScript files,all your code willbe added hereCSIT5110 Assignment 2 Page 5You change thisJavaScript filefor part 2 of theassignmentYou change thisJavaScript filefor part 1 of theassignmentThe SVG Area• The SVG area is an embeddedSVG inside an HTML file• The size of the SVG is 500 by500 pixelsxmlns=http://www.w3.org/2000/svg>...define your filters here......SVG content here...CSIT5110 Assignment 2 Page 6The Control Area• The control area is the place where you canchange the settings of the textures orL-system parametersCSIT5110 Assignment 2 Page 7Part 1 – Making Perlin Noise Textures• For the first part of the assignment, you needto build a couple of Perlin noise textures thatare used in a few SVG elements• Here are the two textures that you need tomake:CSIT5110 Assignment 2 Page 8– The sky texture – The grass textureThe SVG Elements• There are three SVG elements given inthe starting system:filter=url(#sky)/>filter=url(#grass)/>filter=url(#random)/>filter=url(#grass)/>The group is not relevant forthis part of the assignment;it is for part 2: L-systemThe Rectangles’ Arrangement• By looking at the SVG code, you can seethat the rectangles are arranged in threelayers like this:CSIT5110 Assignment 2 Page 10The Grass Layers• The two grass layers are two rectanglesusing the same grass filter• Two layers of grass areused in the display for thesame texture because theL-system tree will be putin between the two layerslater, so that the bottom ofthe tree trunk will be hidden by one of thegrass layersCSIT5110 Assignment 2 Page 11The Sky Texture• The sky texture is a simple Perlin noisetexture that we have discussed in theprevious lectures• You will need at least three filter effects tocreate the sky texture:– feTurbulence– feComponentTransfer– feColorMatrixCSIT5110 Assignment 2 Page 12Filter Effects for Sky TextureCSIT5110 Assignment 2 Page 13feTurbulencefeComponentTransferfeColorMatrixNote that youmay use otherfilter effects anda different filtereffect orderThe Controls for the Sky Texture• You can control the sky texture using thefollowing parameters:CSIT5110 Assignment 2 Page 14Controlling the Sky Colour• You can change the sky colour to any other colourusing the colour control• Here are a couple of examples:• In the system, we assume the clouds are alwaysin white colourCSIT5110 Assignment 2 Page 15Changing the Amount of Clouds• You can change the amount of clouds byadjusting the ‘Cloud Amount’ parameter• The parameter is a number which maps tothe exponent of the gamma transfer• Here are a couple of examples:CSIT5110 Assignment 2 Page 16Setting the Cloud Frequency• The cloud frequency corresponds to the frequencyof the changing clouds, which is mapped to thefrequency of the Perlin noise data• Lower frequencies usually work better for clouds:• For the assignment, you can assume the numberof octaves for feTurbulence is always 3The Grass Texture• The grass texture is avariation of the sky texture,plus a rough edge at thetop of the grass area• To make the grass texture, youwill need a slightly different set of filter effects:– feTurbulence– feColorMatrix– feOffset– feDisplacementMapCSIT5110 Assignment 2 Page 18Filter Effects for Grass TextureCSIT5110 Assignment 2 Page 19feTurbulencefeColorMatrixfeOffsetfeDisplacementMapOffset may be neededif the displacementcannot be shownNote that youmay use otherfilter effects anda different filtereffect orderThe Controls for the Grass Texture• You can control the grass texture using thefollowing parameters:CSIT5110 Assignment 2 Page 20Changing the Grass Colours• The colour mapping of the grass texturehas two colours• You can change the two colours byadjusting the colour controls• For example, the mapping can be changedto, yellow to red:CSIT5110 Assignment 2 Page 21Setting the Grass Frequency• Similar to the cloud parameter, the grassfrequency is mapped to the frequency of thePerlin noise data• For grass, higher frequencies usually work better:• Since the Perlin noise data is used in both thegrass texture and the displacement, adjusting thefrequency will affect them bothPart 2 – An Extended L-System• The starting code gives you a basic L-system thatcan create some simple L-system curves• Part 2 of the assignment aims at extending theL-system to draw trees by:1. Adding a stack and the corresponding[ and] symbols to the L-system2. Including the use of colours for different symbols3. Adjusting the length and width of the lines basedon a depth parameter4. Randomizing the tree displayCSIT5110 Assignment 2 Page 23The Control Area for the L-System• Here is thecontrol areafor part 2:• We will lookat the tabsin the nextfew slidesCSIT5110 Assignment 2 Page 24The Basic Tab• The basic tab defines the starting string ofthe L-system and the number of iterationsto run for the systemCSIT5110 Assignment 2 Page 25The Rules Tab• In the rules tab, you can set as many as5 replacement rules for the L-systemCSIT5110 Assignment 2 Page 26The Visual Tab• The visual tab contains some visual parameters ofthe L-system, such as the length and width of thelines and the angle to turn each time• The length andwidth ratios arefor adjusting thetree branches• The randomfrequency andstrength arefor randomizingthe tree displayThe Colours Tab• You define the colours to be used for somesymbols in the L-system in the colours tabCSIT5110 Assignment 2 Page 28The Result Tab• The result tab has a text area which showsthe last L-system string generated by theL-system• It is veryuseful fordebuggingpurposeCSIT5110 Assignment 2 Page 29The L-System Output• Using the L-systemparameters shown inthe previous slides,the tree shown onthe right can begenerated by theextended L-system:CSIT5110 Assignment 2 Page 30The Given L-System• In the starting system,if you draw the L-systemusing the ‘Draw Tree’button, the parameterswill give you a Kochsnowflake:• If you like, you can adjust the parameters todraw different L-system curves• However, not all parameters, such as colours,are supported in the starting systemCSIT5110 Assignment 2 Page 31The Turtle Graphics System• The turtle.js file containsa JavaScript implementation ofthe turtle graphicssystem• The turtle graphicssystem is a simpledrawing system thatcan create interesting line graphics• The assignment uses this turtle graphicssystem to draw the L-system imagesCSIT5110 Assignment 2 Page 32Using the Turtle• The turtle graphics systemrelies on a ‘turtle’ to drawthings in a 2D drawing area• The turtle holds a pen so itleaves lines behind when itmoves in the drawing area• To draw things using a program, you write aseries of commands to move the turtle around• These turtle graphics commands are mainly formoving the turtle as well as changing theproperties of the penPosition and Heading• The turtle has a positionand heading• The position is the current x and y positionof the turtle in the drawing area and theheading is the direction the turtle is lookingat, 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 onits position and heading; or move it to anabsolute position in the drawing areaCSIT5110 Assignment 2 Page 34Drawing an L-System String• For example, given the following L-system string:• You can ask the turtle todraw the string by askingthe turtle to move forwardwhen you see the symbol‘F’ and turn right when yousee the symbol ‘+’• The turtle will produce asquare from the L-systemstringThe Turtle Graphics Commands 1/2• In these two slides, we list the supported turtlegraphics 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 backwardby a certain distanceChange the headingof the turtleTurn left or rightThe Turtle Graphics Commands 2/2• Here are the commands for setting the penproperties:• 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 orput down the pen so lines are drawnChange the colour(=line colour) of the penChange the width(=line thickness) of the penGet the current position, as an arrayof [x, y] and the heading of the turtleReset and clear the turtle areaAn Example Turtle Graphics Program• This programdraws a squarein an SVGgroup 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 thetop-left cornerof the squareChange theline to a redand thick lineAsk the turtle tomove aroundthe squareThe Drawing Area in the Assignment• You have seen the SVG content from the part1 discussion• The turtle will draw inside the ‘tree’ groupfilter=url(#sky)/>filter=url(#grass)/>filter=url(#random)/>filter=ur代做COMP5110、代写Programming、代做Javl(#grass)/>This is the group wherethe turtle will draw onThe Given L-System Code• You will need to read thoroughly the givenL-system code before working on theextensions• The code is inside the file lsystem.js• The code starts from the drawTree()function, which runs when you click on the‘Draw Tree’ buttonCSIT5110 Assignment 2 Page 40The drawTree() Function• The drawTree() function mainly does threethings:1. Reading the L-system parameters from theHTML components(Not all of them are used in the starting system)2. Running the runLSystem() function to generatethe L-system string3. Running the drawLSystem() function to drawthe L-system image from the stringCSIT5110 Assignment 2 Page 41Your Tasks• From the lsystem.js file, you will need tocomplete the following tasks:Task 1 – Using a StackTask 2 – Changing Symbol ColoursTask 3 – Adding DepthTask 4 – Randomising the TreeCSIT5110 Assignment 2 Page 42Task 1 – Using a Stack• To use a stack, first, you create a stackstructure before you draw the L-system– In JavaScript, a stack can be implementedby a simple array, as shown on the next slide• Then, when you see the[ and] symbols,you use the stack to remember and restorethe position and heading of the turtlerespectivelyCSIT5110 Assignment 2 Page 43Using 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 44Using an Array as a Stack 2/2• Here is theoutput of thepreviousexample:Putting Information onto the Stack• The stack stores both theturtle position and headingas a single item• You need to find a way topush both values as asingle item onto the stack• You can do that by puttingthem into an array beforepushingCSIT5110 Assignment 2 Page 46The stack[pos, heading]PushAfter Finishing Task 1• After you finish this task, you should be ableto 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 bysimply assigning different colours todifferent symbols• The colours arespecified in thecolours tab:– ‘F’ is red and‘A’ is green inthe exampleThe Colours in the Code• The colour mapping has been stored in thecolors object in the code, which has beeninitialised like this:• A JavaScript object can also be used asan associative array• The colors object in the code has beenused like thatCSIT5110 Assignment 2 Page 49var colors = {};Using Objects as Assoc. Arrays 1/2• Here is an example that builds an associativearray and then works with the content of thearray:CSIT5110 Assignment 2 Page 50var color = {};color[red] = 255;color[green] = 128;color[blue] = 128;To next pageUsing Objects as Assoc. Arrays 2/2if (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/arrayFrom previous pageAfter Finishing Task 2• After you finish thistask, you should be ableto show a coloured tree• Here is an example:The Default Colour• If a symbol has not been mapped to anycolour, the default colour will be blackCSIT5110 Assignment 2 Page 53Task 3 – Adding Depth• This task is to add a ‘depth’ parameter to thesystem• 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 valueof both ‘A’ is 2• The depth values are used for adjusting thelength and width of the symbols laterF1[+A2][-A2]CSIT5110 Assignment 2 Page 54Adjusting the Depth Value• A symbol may have an associated depth valuesuch as F1 and A2 in the previous example• If such a symbol is replaced, its depth valuewill also be put inside the replacement stringat appropriate places• The depth value to be put in the replacementstring is adjusted by adding on top a givenincrement specified in the replacement rule• An example is shown on the next slideCSIT5110 Assignment 2 Page 55A Replacement Rule with Depth• For example, in the assignment, a replacementrule can be written like this:• This is equivalent to the following rule in aparametric L-system:• If the incoming symbol has a depthd, the valueofd will be increased for the two symbolsF andA in the replacement ruleF → F0A1BF(d) → F(d + 0)+A(d + 1)BCSIT5110 Assignment 2 Page 56A Replacement Example• Let’s apply the replacement rule from theprevious slide to this L-system string:• The resulting L-system string will become:F1[+A2][-A2]F1A2B[+A2][-A2]CSIT5110 Assignment 2 Page 57This replacement is coming from the replacementrule, where: F(1) → F(1+0)A(1+1)BAnother Example• If the L-system string is again F1[+A2][-A2]and the replacement rule is:the resulting L-system string will become:A → A4F0F1[+A6F2][-A6F2]1. A2 is replaced by A4F02. Its depth value 2 has been put and added inthe location of 4 and 0 in the replacement, tobecome 2 + 4 = 6 and 2 + 0 = 2 respectivelyA 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 thenumber of generation of branches in a treeCSIT5110 Assignment 2 Page 59F0[+F1[+A2][-A2]][-F1[+A2][-A2]]Generation of Branches• The tree shown below is drawn from theL-system string:• The generationnumber is alsoshown next toeach branchCSIT5110 Assignment 2 Page 60F0[+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 anumber from an L-system string• You can use the function to read the number ata given location• If there is no number at the given location, thenumber returned will become NaN, which is aJavaScript value meaningNot a Number• The NaN value can be detected by isNaN()CSIT5110 Assignment 2 Page 61getNumberFromString(string, index)Using the Function• For example, if the given string is “A10B5C6”and the index is 1, the function will return thefollowing JavaScript object:• Or, if the given string is “F[+A][-A]”and theindex is 7, the function will return thefollowing JavaScript object:CSIT5110 Assignment 2 Page 62{ number: 10, next: 3 }{ number: NaN, next: 7 }Using the Depth Values• The depth values can beused to adjust the lengthand width of the branches• The idea is that the youngera branch is (i.e. having abigger depth), the thinner and shorter it is• Using the length and width ratios, thereduction of length and width can be appliedto each branch based on its depth valueCSIT5110 Assignment 2 Page 63Adjusting the Length and Width• For example, if the length is 10 initially andthe 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 ofFn will be:• The same can be applied to the width valueCSIT5110 Assignment 2 Page 64initial length × (length ratio)nAfter FinishingTask 3• After finishing all tasks,you can create a treewhich 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 veryrigid and always have straight branches• Real trees seldomhave such branchesas you can see fromthe rightCSIT5110 Assignment 2 Part 1 Page 66Randomising the Tree Display• You can make use of simple filter effectsto randomise the tree display• You will likely only need two filter effects inorder to do that:– feTurbulence– feDisplacementMapCSIT5110 Assignment 2 Page 67Filter Effects for Tree DisplayCSIT5110 Assignment 2 Page 68feTurbulencefeDisplacementMapNote that youmay use otherfilter effects anda different filtereffect orderThe Controls for the Tree Display• You can control the tree display using thefollowing parameters in the Visual tab ofthe L-system control area:CSIT5110 Assignment 2 Page 69Changing the Random Frequency• You can change the frequency of tree displayusing the ‘Random Frequency’ parameter• The parameter is a number which maps tothe frequency of the Perlin noise data• Here are a couple of examples:• You can assume the octave number is 1Setting the Random Strength• The strength is the amount of movement for thetree and it is mapped to the scale of thedisplacement map• Here are two examples:• Obviously, both parameters work better when theyare relative small numbersCombining 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 thestack symbols are used in the L-system string 10%– Using L-system colour 10%• Correct colours are used based on thecolour mapping 5%• The default colour is black 5%CSIT5110 Assignment 2 Page 74Marking Scheme 3/3– Using the depth parameter 25%• Depth values are put at appropriate places usingreplacement 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 75Submission• The deadline of the assignment is:8pm, Saturday, 30 Nov 2019• To submit your assignment:– You need to put everything (HTML file andJavaScript files) into a zip file called_a2.zip– For example, if your ITSC account is johnc, you willput your files into johnc_a2.zip– You can then submit the zip file through canvasCSIT5110 Assignment 2 Page 76转自：http://www.daixie0.com/contents/9/4373.html
