Loops and Branches
Ch 21 and Ch18
And how you can use them
to draw cool pictures!
1
5 Programming Concepts…
1.
2.
3.
4.
5.
Variables and Arithmetic
Branches
Using Functions
Building your own Functions
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);
forward(20);
forward(20);
forward(20);
right(90);
right(90);
right(90);
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
true
Statements to
repeat:
i = i+1;
square(40);
right(72);
Finish, go to
next statement
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 1st <script> block, other code20in 2nd
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">
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); First Try
if (choice= = 1)
triangle(50);
if (choice= = 2)
Refresh (perhaps several times)
square(50);
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
true
choice==1
false
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);
First Try
turnTo(0);
for (i=0; i<7; i++)
{
choice=rand(1,2);
if (choice= =1)
triangle(50);
Refresh
if (choice= =2)
square(50);
jumpFwd(100);
}
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
© Copyright 2026 Paperzz