Lec Iteration and Branching
Loops and Branches
Ch 21 and Ch18
And how you can use them to draw cool pictures!
1
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)
2
Review:
1) Variables and Arithmetic n = 4; y = 2; x = n + y; y = n * 2; document.write(“x=” + x + “, y=” + y);
3
3) Using Functions
Function calls
Math Functions: x = Math.sqrt(81); y = Math.sqrt(x); document.write(“x=” + x + “, y=” + y); x=9, y=3
Turtle Functions: forward(20); left(90); forward(20); right(135); backward(40); arguments
4
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
5
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);
6
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);
}
7
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);
8
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
9
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
10
}
Function Quiz:
Write a function that draws a triangle of size n: function triangle(n)
{
11
Function Quiz, Part II
Now write code that draws this: (start here)
12
5) Loops repeat blocks of code
Instead 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);
13
Syntax of a loop
Start counting at 1
Add 1 to i after each cycle through for( i=1; i<=5; i=i+1 )
{
STATEMENTS TO REPEAT;
}
Stop when you pass 5
14
Flow chart of a loop
i = 1; i < = 5 false
Finish, go to next statement true
Statements to repeat: square(40); right(72); i = i+1;
15
World Famous Iteration (C, C++, Java)
Start counting at 0
Add 1 to i after each cycle through for( i=0; i<5; i++ )
{
STATEMENTS TO REPEAT;
}
Stop when you reach 5
16
Advanced : you can use the counter to represent real values like angles for (ang=0; ang<=360; ang=ang+72)
{ turnTo(ang); square(20);
}
17
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);
}
18
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
19
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 1 st <script> block, other code in 2 nd
20
Application : Drawing a row of triangles
Use the Hex Color Code Pallete width(10); color("#00FF33");
To choose colors jumpTo(-350, 0); turnTo(0); for (i=0; i<7; i++)
{ triangle(50); jumpFwd(100);
}
<body bgcolor="#FFCCFF">
21
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
22
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);
}
23
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
24
5) Branches give you variety
What if you want a square or triangle chosen at random?
choice=rand(1,2); if (choice= = 1)
First Try triangle(50); if (choice= = 2) square(50);
Refresh (perhaps several times)
25
if statement syntax
if ( condition ) statement ;
Condition
– is a logical expression like score == 100 x+y>10
Statement
– is any executable statement like forward(20); OR square(50);
26
If Statement Flowchart
choice==1 false true triangle(50);
Next statement
27
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); First Try for (i=0; i<7; i++)
{ choice=rand(1,2); if (choice= =1) triangle(50); if (choice= =2) square(50); jumpFwd(100);
Refresh
}
28
Application : set line to a randomly selected color function 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);
29
WARNING
{
Use { } if you want to do more than one thing: if (choice= = 1) triangle(50); forward(100);
}
30
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)
31
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
32
