Codekids Lesson 5

More While, If, and Rectangles

In the last lesson, you learned about variables and the while(){} statement.

But, maybe you didn't really get it. So here's another way to think about these. We're going to act out this 'computer program' in class:

int numberOfJumps = 10;

int numberOfTwirls = 2;

int twirlDirection = 1;

while(numberOfJumps > 0){

jump(numberOfJumps);

if (twirlDirection == 0){

twirlRight(numberOfTwirls);

twirlDirection = 1;

}else {

twirlLeft(numberOfTwirls);

twirlDirection = 0;

}

numberOfJumps = numberOfJumps - 2;

}

This program uses three variables to control your jumping and twirling:

numberOfJumps

tells you how many times to jump

numberOfTwirls

Tells you how many times to twirl

twirlDirection

Tells which direction to twirl. If twirlDirection is 0, you twirl right; if it is 1, you twirl left.

You keep doing the jumping and twirling again and again until the number of jumps is subtracted down to zero.

the If statement

The if statement is really useful. You will use if many times if you do a lot of programming. It has these parts:

if (variableName == someValue){

do stuff;

}

When processing hits the if, it looks to see if the variable you put there is equal to the value you put there. If it is, processing goes inside the if statement's curly braces and does whatever you put there. If not, processing skips past the if statement.

Here's an example:

if (you == happy){

clapYourHands(3);

}

You can also tell process what to do if the variable is NOT EQUAL to the value. You do this using the else statement:

if (variableName == someValue){

do stuff;

}else {

do something different;

}

Here's another example:

if (you == happy){

clapYourHands(3);

}else {

frownAndPout();

}

= vs ==

Remember what we learned last week? How do you say this:

=

GETS!!!!!!!!!!

Why? Because there's similar thing in processing:

==

This is pronounced 'IS EQUAL TO.'

Remember, = means GETS and "==" means IS EQUAL TO.

Rectangles

Use the rect command to make squares and rectangles. It works just like the ellipse command. The following example will make a 300 pixel wide and 100 pixel tall rectangle with its upper-left corner starting 10 pixels over and 10 pixels down from the top of the window.

rect(10,10,300,100);

You can use the rectMode command to make the rectangles start from their centre instead of their upper-left corner:

rectMode(CENTER);

Try these two different programs in processing to see the difference:

Starting from the rectantle's upper-left corner:

size(400, 400);
background(0);
stroke(255, 201, 3);
fill(250, 30, 100);
smooth();
rect(200,200,180,40);

Starting from the rectangle's centre:

size(400, 400);
background(0);
stroke(255, 201, 3);
fill(250, 30, 100);
smooth();
rectMode(CENTER);
rect(200,200,180,40);

Try it!

Copy this code into Processing then run it:

size(400, 400);
background(0);
stroke(255, 201, 3);
smooth();
rectMode(CENTER);

int shapeSize = 400;
int kindOfShape = 0;

while(shapeSize > 10){

if(kindOfShape == 0){

fill(60, 20, 185);
ellipse(200,200,shapeSize,shapeSize);
kindOfShape = 1;

}else{

fill(250, 20, 20);
rect(200,200,shapeSize,shapeSize);
kindOfShape = 0;

}

shapeSize = shapeSize - 40;

}

Once you've got it running, hack it!

If you create something cool, copy it out of Processing and email it to me!

Go back to the home page.