Bookmark this on Hatena Bookmark
Hatena Bookmark - Super Easy Programming #2: Loops, Turtle-Style
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

Super Easy Programming 2: A System for Loops, Turtle-Style

Greetings. Alan here.

Did you draw the picture last time?

It should look like this:

Do you see what’s going on here?

Let’s review.

We moved 100 dots, turned 90 degrees, moved another 100 dots and turned 90 degrees, and repeated the procedure four times.

Code from Last Time:

function onLoad() {
	logo.init(); 

	penDown();
	move(100);
	turn(90);
	move(100);
	turn(90);
	move(100);
	turn(90);
	move(100);
	penUp();
}

This works okay, but isn’t it a bit troublesome to copy and paste the same code four times? When you want to repeat in a program, the easiest thing to do is to use a command called “for.” Let’s redo our square-drawing program using “for.”

function onLoad() {
logo.init();
penDown();
for(i=0;i<4;i++){
move(100);
turn(90);
}
penUp();
}

This should produce the exact same square as in the last program. Check for yourself.

As you can see above, “for” is a command for repeating the information contained within {} and 「」a set number of times. Here, you can see the number 4. This is the number of times the command will be repeated.

This command is called a “loop.” However, at this stage doesn’t copy and paste still seem faster? To see the benefits, try out the code below.

function onLoad() {
logo.init();
penDown();
for(i=0;i<360;i++){
move(1);
turn(1);
}
penUp();}

We’ve changed 4 to 360, and move and turn to 1 each. You have any idea what might happen?

Check out the results below:

You just drew a perfect circle!

“for” certainly is easier than copying and pasting 360 times, huh?

Let’s take a closer look at all those “i”s that appeared within “for.”

This “i” is a “variable.”

What’s a “variable,” you ask? Simply put, it’s a number of changes.

The contents change, little by little.

Let’s take another look at that “for” line.

for(i=0;i<360;i++){

If we take a peak inside “for”’s parentheses, what we find may be a bit intimidating.  However, remember that “;” signals the end of a sentence.
 It can also mean a pause or a break. In that case, this particular sentence is divided into “i=0,” “i<360,” and “i++.” The first “i=0” is command 
assigning “0” as the variable. Therefore, i is equal to 0. The “for” sentence decides whether or not to repeat the loop after executing the contents of {}, which in this case is move and turn. 
Here we use the formula “i<360.” 
As you may have guessed, it means that the loop will repeat “if i is smaller than 360.” So what about that last “i++?” This is a command to increase the contents of i by 1.

Let’s try increasing the contents of i by 2 each. Change “i++” to “i+=2,” save, and reload.

What happens?

We only have half a circle!

Adding 1 apiece created a full 360 degree rotation, whereas adding 2 apiece, the loop was only repeated 180 times and we ended up with only half a circle.

If you use this the right way you’ll get some interesting results.

Try using the following to create an octagon.

penDown();
for(i=0;i<360;i+=360/8){
move(360/8);
turn(360/8);
}
penUp();

You’re dividing 360 into 8, and repeating only that part of the rotation.

You’ve divided it to end after 8 turns, so you end up with an octagon.

Naturally, you can use this to create a triangle, or a hexagon, or any other shape you’d like.

However, the one most people don’t consider is a heptagon (7 sides).

You can’t divide 360 into 7.

It’s extremely difficult to draw a heptagon with a protractor. That’s where computers come in handy.

Here’s what we end up with.

Quite the weird shape, huh?

Not to be sidetracked, but I remember becoming an elementary school hero when I could draw a heptagon while my classmates were still struggling with pentagons and octagons. You never know when programming might come in handy!

Incidentally, there are times when this “i” is referred to as a “loop variable” or “incrementer.”

So, are loops a little more interesting now?

Let’s try out another trick.

As it turns out, you can use this loop variable “i” inside the loop.

Give the following a try.

for(i=0;i<360;i++){
move(10);
turn(i);
}

Any guesses as to how this will turn out?

You’re simply moving 10 dots and turning by “i” degrees. However, the “i” rises from 1 to 360, meaning that the curve also increases steeply.

What on Earth…?!

You can use a look to draw this strange spiral-looking shape. Just FYI!

You can also use the loop to make more loops.

for(j=0;j<4;j++){
for(i=0;i<360;i++){
move(10);
turn(i);
}
turn(90);
}

I added an additional “j” loop outside the original “i” loop and repeated the “spiral” four times. Any guesses as to what will happen?

Give it a try and see what appears! See you next time!