1 building your own turtle functions for making really cool pictures!

1

Building Your Own Turtle Functions

For making really cool pictures!

2

5 Cool Things…

1. Variables and Arithmetic

2. Branches for variety

3. Using Functions

4. Building your own Functions (Today)

5. Loops to repeat (Next class)

3

Review:1) Variables and Arithmetic

var n = 4;

var y = 2;

var x = n + y;

y = n * 2;

document.write(“x=” + x + “, y=” + y);

4

2) 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);

Identify the Function calls and the arguments

5

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

6

Today—3) 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);



7

If you want to draw a lot of squares, put this Function Definition at the top of your script…

function square( )

{





}

This is a Function Definition

8

Now you can ‘call’ your square function

square();

--------------------

left(30); square();

left(180); square();

moveTo(-300, -100);

left(30); square();

left(180); square();

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

What if you want different sizes of squares?

function square( n )

{

forward(n); right(90);




}

n is called a parameter

It’s a variable that receives

the size of the square

(given as the argument in the function call)

11

Now when you call the square function, just say how big you want it to be

square(100);

square(50);

square(25);

12

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

13

Every time you run the code from last slide, it gives a different result

It’s interesting to observe the variations and similarities

14

ProgramStructure

Function Definitions

(in <head>)

Main program block

(in <body>)

15

Functions Give “Vertical Structure”How to draw

this complicated mosaic of 120 triangles?

16

“Bottom Up” Problem SolvingSolve this sequence of ever more complex problems using functions at each level.

triangle pattern line mosaic

17

Solutions

function triangle(n)

{




}

function pattern(n)

{

turnTo(30);

triangle(n); right(90);




turnTo(90);

}

18

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);}

19

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!

20

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)

21

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

1 building your own turtle functions for making really cool pictures!

Documents