Creating Your Own Functions
advertisement
Building Your Own Turtle
Functions
For making really cool pictures!
1
5 Cool Things…
1.
2.
3.
4.
5.
Variables and Arithmetic
Branches for variety
Using Functions
Building your own Functions (Today)
Loops to repeat (Next class)
2
Review:
1) Variables and Arithmetic
var n = 4;
var y = 2;
var x = n + y;
y = n * 2;
document.write(“x=” + x + “, y=” + y);
3
2) Using Functions
Identify the Function
calls and the arguments
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);
4
Which command(s) uses “relative”
positioning, and which “absolute”
forward -- move turtle forward some number of
pixels
left – turn left some number of degrees
moveTo -- move to an x,y coordinate
turnTo – turn to a particular degree heading
home – send turtle back to center of screen,
facing up
5
Today—3) 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
Function Definition at the top of your script…
function square( )
{
forward(40); right(90);
forward(40); right(90);
forward(40); right(90);
forward(40); right(90);
}
This is a Function
Definition
7
Now you can ‘call’ your square
function
square();
-------------------left(30); square();
left(180); square();
moveTo(-300, -100);
left(30); square();
left(180); square();
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
What if you want different sizes of
squares?
n is called a parameter
function square( n )
{
forward(n); right(90);
forward(n); right(90);
forward(n); right(90);
forward(n); right(90);
}
It’s a variable that receives
the size of the square
(given as the argument in
the function call)
10
Now when you call the square function,
just say how big you want it to be
square(100);
square(50);
square(25);
11
You can generate random sized
squares…
var size, angle;
size=rand(50,100); square(size);
angle=rand(0,180); turnTo(angle);
size=rand(50,100); square(size);
rand(low, high)
gives random number between low and high
12
Every time you run the code from last
slide, it gives a different result
It’s interesting to observe the variations and similarities
13
Program
Structure
Function
Definitions
(in <head>)
Main
program
block
(in <body>)
14
Functions Give “Vertical Structure”
How to draw
this
complicated
mosaic of
120
triangles?
15
“Bottom Up” Problem Solving
Solve this sequence of ever more complex problems
using functions at each level.
triangle
pattern
line
mosaic
16
Solutions
function triangle(n)
{
forward(n); right(120);
forward(n); right(120);
forward(n); right(120);
}
function pattern(n)
{
turnTo(30);
triangle(n); right(90);
triangle(n); right(90);
triangle(n); right(90);
triangle(n); right(90);
turnTo(90);
}
17
That’s all!
function line(n)
{
pattern(n);
jumpFwd(n*1.7);
pattern(n);
jumpFwd(n*1.7);
pattern(n);
jumpFwd(n*1.7);
pattern(n);
jumpFwd(n*1.7);
pattern(n);
}
function mosaic(n)
{
jumpTo(-200,-100);
line(n);
jumpTo(-200+30*1.7, -100);
line(n);
jumpTo(-200+30*2*1.7, -100);
line(n);
jumpTo(-200+30*3*1.7, -100);
line(n);
jumpTo(-200+30*4*1.7, -100);
line(n);
jumpTo(-200+30*5*1.7, -100);
line(n);
}
18
Not Quite!
We need an initial function call to mosaic to
kick it off:
mosaic(30);
Notice we give a size of 30…fills in for ‘n’
in all the other functions.
So…using functions we can draw 120
triangles (or 360 forward commands) with
about 30 lines of JavaScript—powerful!
19
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)
20
That’s it! Have fun in lab
SUMMARY—
Functions let you create your own building blocks to use in
more complex programming problems
Functions abstract pieces of code—self documenting
Functions can call other functions
Functions are re-usable—save time and money in software
development
Next week…branches and loops
21
