Activity Guide Loops and Random Numbers

Transcription

1 Unit 3 Lessn 7 Name(s) Perid Date Activity Guide Lps and Randm Numbers CS Cntent Lps are a relatively straightfrward idea in prgramming - yu want a certain chunk f cde t run repeatedly - but it takes a little practice t get gd at cntrlling lps and recgnizing hw and where in yur prgrams t use them. The fr lp in JavaScript (and many ther prgramming languages) is designed t be used fr bth simple and sphisticated prgramming tasks, thus it has a lt f syntax t it that will be explained in the future. In this lessn, the blck-based frm f the fr lp expsed t students is effectively a simple repeat lp - it nly lets them change a number that dictates hw many times the lp repeats. Randm numbers are als used mre (much mre) in this lessn as an effective way t experiment with lps. Creating sme randmly-generated utput with each iteratin f the lp is gd visual feedback that the lp is running the way yu expect. It als helps yu explre the ranges f pssible utputs, which tells yu mre abut what yur prgram can and cannt d. Challenge 1: Getting Started with Lps A lp is a blck f cde that is repeated r "lped thrugh" in a prgram. Yu will be creating a lp using the fr lp blck. We'll start by experimenting with a prgram similar t what yu saw in the vide. Drag ut a fr lp blck. Inside the lp: Add a call t mvefrward. Add a call turnleft. (HINT: try turning by 137 degrees t start. Yu can change after that.) Run the prgram t see the lp in actin. Experiment: Change the number f times the lp runs. Increase the run speed t see hw fast lps can execute. Hw many times can the lp run befre yu can n lnger tell the difference in the image?

2 Mve n nce yu feel like yu have a decent grasp f using a fr lp: setting the number f times t repeat, running the prgram, and setting the run speed. Challenge 2: Practice Using Lps Part 2 Let's lk at the secnd example frm the vide. Use a fr lp t call a functin that yu wrte. We've prvided the cde fr the drawsquare functin fr yu. Drag ut a fr lp. Inside the lp add a call t drawsquare, and a call t turnright. Run the prgram t see what's happening. Change the number f lp iteratins t draw a lt f squares. Try t create the figure shwn belw (r smething similar). HINT: the image belw has 72 squares in it. Challenge 3: Lping with Randm Values If yu add sme randmness t turtle behavir inside a lp, the prgram will run a little differently every time which can make fr sme cl effects. Yu're abut t see a prgram in which the turtle mves t a randm lcatin each iteratin f the lp, and draws a randmly-sized dt that als has a randm clr. We've als made the dt semi-transparent by setting the alpha value t 0.5 (50% transparency). 2

3 Figure ut hw many iteratins yu need t cnsistently fill the screen entirely with dts s nne f the backgrund is shwing. It will be a little different every time s yu'll need t experiment. Cmpare what yu fund with a neighbr t see hw clse yur results are. Then mve n. Challenge 4: Using Multiple Lps Sme repeated tasks can't easily be slved with a single lp. Instead, yu'll need t use ne lp after anther, each ne slving a part f the prblem. Nw that yu've filled the screen with clred dts, let's cver it up by adding a lp that fills the screen with semi-transparent white dts. Drag a secnd lp int yur prgram. Add cmmands t draw dts in randm lcatins that are white with pacity set t 0.5. Increase the iteratins s that the clred dts are ttally erased. Hw many des it take? Challenge 5: Tp-Dwn Design Lk at this cmplex versin f the "Under the Sea" scene yu drew in the previus lessn. Yu nw have all the skills yu need t recreate this digital scene. We will use Tp-Dwn Design t help manage the cmplexity f drawing this image. The starter cde yu will be prvided already has brken the prblem int multiple levels. Overview f Prgram Structure Yu are abut t see that we've prvided yu with a gd amunt f starting cde. Here's a brief tur: High-Level Functin Calls: These read almst like a stry f hw yu will draw the image. There's ne functin fr every majr cmpnent f the scene. High-Level Functin Definitins: These are currently empty. Yu will be adding cde t these functins. Each will cntain a lp that will draw many cpies f each cmpnent. Lw-Level Functins: These draw single elements f the scene. Mst have been written fr yu already, but we've left a few fr yu t cmplete as well. 3

4 D This Review the structure f the cde in this level. Run the cde t familiarize yurself with what it currently draws. When yu are ready t d s, mve n! Challenge 6: Add Bubbles The first high-level functin yu will write is drawallbubbles. Yu may have nticed that the bubbles in the image lk very similar t the dts example we've already drawn in this lessn. Nw we'll use that skill t add t ur image. Read the drawbubble functin t knw hw it wrks and what parameters it accepts. Mdify the cde f drawallbubbles : Add a lp inside the functin Place the cmmands already inside the functin in yur lp. This way yur cde will mve the turtle randmly and call drawbubble many times. Set the number f iteratins in yur lp s that the screen is filled with bubbles. Try starting with 200 and then adjust t whatever number yu like. Challenge 7: Add Fish The next high-level functin yu will write is drawallfish. A versin f drawfish with parameters has been prvided fr yu t use. 4

5 Read the drawfish functin t knw hw it wrks and what parameters it accepts. Add a lp t drawallfish. Place the cmmands already inside the functin in yur lp. This way yur cde will mve the turtle randmly arund the tp 360 pixels f the image and draw 15 fish f randm size between 5 and 20 using drawfish. Once yu have yur lp wrking try calling drawfish with randm values fr its red, green, and blue parameters t get differently clred fish. Challenge 8: Add Sea Stars We're nw ready t add sea stars t ur image by writing drawallseastars. Recall that we've already written lps t draw much mre cmplex stars. Read the drawseastar functin t knw hw it wrks and what parameters it accepts. Update drawseastar t use a fr lp rather than repetitive cmmands. Add a lp t drawallseastars. Place the cmmands already inside the functin in yur lp. This way yur cde will mve the turtle randmly arund the bttm pixels (y values between 360 and 450) f the image. Draw 5 sea stars f randm size between 10 and 30 using drawseastar. Challenge 9: Cntrling Lps with Parameters This time yu will mdify ne f the lwer-level functins - drawseagrass. Ntice that the current versin f drawseagrass actually uses a lp. We want t mdify this functin s that we cntrl the number f times it lps with a parameter. Lk at the drawseagrass functin t see hw it currently wrks. 5

6 Add a parameter that will be used t indicate hw many waves the seagrass makes. Mdify the fr lp s that it uses that parameter as the number f times t repeat. Finally, mdify drawallseagrass t call this new tw-param versin f drawseagrass supplying a reasnable randm value fr the secnd parameter as well. Challenge 10: Add Sea Grass Our new versin f drawseagrass nw draws a single piece f seagrass with a randm height. Nw let's use a lp in drawallseagrass t fill the sea flr with it. Add a fr lp t drawallseagrass that draws abut 50 pieces f sea grass using yur updated drawseagrass functin. 6

7 Challenge 11: Add Sunbeams Finally, we'll add sme visual flurish by writing drawallsunbeams. Nte: yu'll have t use the turnt cmmand t make the turtle face the same directin prir t drawing each sun beam. Read the drawsunbeam functin t knw hw it wrks and what parameters it accepts. Add a lp t drawallsunbeams t draw abut 100 sunbeams. Inside yur lp: Place the cmmands already inside the functin in yur lp. This way yur cde will mve the turtle t a randm x lcatin at the tp f the image (y is 0), turnt a randm angle between 165 and 175 degrees, and call drawsunbeam. Hierarchy f functins drawbackgrund drawallseagrass drawallseastars drawallfish drawallbubbles drawallsunbeams drawseagrass drawseastar drawfish drawbubble drawsunbeam 7

8 Reflectin: Multiple Chice: A prgrammer wants t write a prgram in which the turtle draws 8 squares in a rw while mving frward. The final result shuld lk like the turtle drawing shwn. But smething is wrng! The incrrect cde is shwn t the right. The prgrammer has attempted t write a functin t draw a single square. Then he wrte anther functin that attempts t call that functin 8 times. Mentally trace thrugh the cde and determine which line f cde shuld be remved t make the prgram d what it's suppsed t. A: 1 B: 5 C:6 D:7 E: 14 Free Respnse: When breaking a prblem dwn, yu ften encunter elements that yu want t use repeatedly in yur cde. Smetimes it's apprpriate t write a new functin; at ther times it's apprpriate t write a lp. There is n hard-and-fast rule as t which is better, but what d yu think? What kinds f circumstances wuld lead yu t writing a functin versus using a lp? 8