Embed Size (px)
Citation preview
1
Loops and BranchesCh 21 and Ch18
And how you can use them
to draw cool pictures!
2
5 Programming Concepts…
1. Variables and Arithmetic
2. Branches
3. Using Functions
4. Building your own Functions
5. Loops to repeat (Today)
…and Branches again (Today)
3
Review:1) Variables and Arithmetic
n = 4;
y = 2;
x = n + y;
y = n * 2;
document.write(“x=” + x + “, y=” + y);
4
3) Using Functions
Math Functions:x = Math.sqrt(81);y = Math.sqrt(x);document.write(“x=” + x + “, y=” + y);
Turtle Functions:forward(20);left(90);forward(20);right(135);backward(40);
Function calls
arguments
x=9, y=3
5
Absolute vs Relative Positioning
Relative Position:forward, backward, left, right • keeps track of where you are
and makes adjustments from your current position
Absolute motion:moveTo, turnTo • Lets you specify exactly where or what angle• Using Cartesian geometry…
a little refresher may help
6
4) Building your own functions
Lets you “abstract” a collection of moves
For example, these lines make a square:forward(20); right(90);
forward(20); right(90);
forward(20); right(90);
forward(20); right(90);
7
If you want to draw a lot of squares, put this at the top of your script…
function square(n)
{
forward(n); right(90);
forward(n); right(90);
forward(n); right(90);
forward(n); right(90);
}
8
Now you can ‘call’ your square function
square(20);
--------------------
left(30); square(20);
left(180); square(20);
moveTo(-300, -100);
left(30); square(20);
left(180); square(20);
9
Functions help manage complexity
You can do interesting patterns without a lot of repetition of code
They save time and effort
Functions can use other functions
10
Functions allow “vertical structure”
Top Down Programming: A city consists of several subdivisions
A subdivision consists of many blocks of houses
A block of houses is based on a single house
Most software is designed in this way
11
Function Quiz:
Write a function that draws a triangle of size n:
function triangle(n)
{
}
12
Function Quiz, Part II
Now write code that draws this: (start here)
13
5) Loops repeat blocks of codeInstead of this:square(20);right(72);square(20);right(72);square(20);right(72);square(20);right(72);square(20);right(72);
Try this:
for (i=1; i<=5; i=i+1)
{
square(20);right(72);
}
14
Syntax of a loop
for( i=1; i<=5; i=i+1 )
{
STATEMENTS TO REPEAT;
}
Add 1 to i after each
cycle through
Start counting at 1
Stop when you pass 5
15
Flow chart of a loop
i < = 5Statements to repeat:
square(40);right(72);
true
false
i = 1;
Finish, go to next statement
i = i+1;
16
World Famous Iteration (C, C++, Java)
for( i=0; i<5; i++ )
{
STATEMENTS TO REPEAT;
}
Add 1 to i after each
cycle through
Start counting at 0
Stop when you reach 5
17
Advanced: you can use the counter to represent real values like angles
for (ang=0; ang<=360; ang=ang+72)
{
turnTo(ang);
square(20);
}
18
Application: Drawing arcs and circles
for (i=0; i<180; i++){ forward(1); right(1);}
for (i=0; i<360; i++){ forward(1); right(1);}
19
Loop and Function Quiz:
We want to draw this:
Naturally we decide to
a) Abstract a circle function
b) Use a loop to repeat circles
20
Solve the previous problem
Your Circle Function Definition:
The Code that uses circle:
Remember, these go in 2 different places:
Function defn’s go in 1st <script> block, other code in 2nd
21
Application: Drawing a row of triangles
width(10); color("#00FF33");
jumpTo(-350, 0);
turnTo(0);
for (i=0; i<7; i++)
{
triangle(50);
jumpFwd(100);
}
Use the Hex Color Code Pallete
To choose colors
<body bgcolor="#FFCCFF">
22
Application: Drawing a lot of random sized squares in random locations
width(5);
color("#993399");
for (i=0; i<100; i++)
{randX=rand(-400,400);
randY=rand(-300,200);
jumpTo(randX, randY);
size=rand(10,100);
square(size);
}
Great idea for a
function
23
Abstraction Again! Programmers keep an eye out for useful tasks to turn into functions:
function jumpRandom( )
{var randX=rand(-400,400);
var randY=rand(-300,200);
jumpTo(randX, randY);
}
24
Previous Application Simplified using new function:
width(5);
color("#993399");
for (i=0; i<100; i++)
{jumpRandom( );
size=rand(10,100);
square(size);
} You can now easily use this in other places too
25
5) Branches give you variety
What if you want a square or triangle chosen at random?
choice=rand(1,2);
if (choice= = 1)
triangle(50);
if (choice= = 2)
square(50);
First Try
Refresh (perhaps several times)
26
if statement syntaxif (condition) statement ;
Condition – is a logical expression likescore == 100 x+y>10
Statement – is any executable statement like
forward(20); OR square(50);
27
If Statement Flowchart
choice==1
true
false triangle(50);
Next statement
28
Application: Row of random squares & triangles
What if you want a row of squares and triangles chosen at random?width(10); color("#00FF33");jumpTo(-350,180);turnTo(0);for (i=0; i<7; i++){ choice=rand(1,2); if (choice= =1) triangle(50); if (choice= =2)
square(50); jumpFwd(100);}
First Try
Refresh
29
Application: set line to a randomly selected colorfunction randColor(){ c=rand(1,4); if (c= =1) color("red"); if (c= =2) color("blue"); if (c= =3) color("yellow"); if (c= =4) color("green");}
width(10);for (i=0; i<9; i++){ randColor(); right(40); square(50);}
30
WARNING
Use { } if you want to do more than one thing:
if (choice= = 1)
{
triangle(50);
forward(100);
}
31
Capture your images in a “screen shot”
Press Alt and PrtScr at same time
Open Paint
Edit/Paste
You can chop out image using select tool Dotted line box
Then paste into Microsoft Word
Or save as a .jpg file (project 2)
32
Additional Functions defined in Lab 4.4(plus you can use all the regular turtle functions)
square(n) – draws square of size n
triangle(n) – draws triangle of size n
jumpTo(x,y) – jumps to coordinate x, y
jumpFwd(x) – jumps forward x units
jumpBwd(x) – jumps backwards x units
randColor( ) – change the color randomly
