Codekids Lesson 4

Variables & Hacking

In the last lesson, you learned how to make circles using the ellipse() command.

Your Seventh Program

Start up Processing and copy this code into the program:

size(400, 400);
background(0);
stroke(255, 201, 3);
smooth();
fill(60, 20, 185);

int circleSize = 400;

while(circleSize > 50){

ellipse(200,200,circleSize,circleSize);
circleSize = circleSize - 20;

}

seventh program

You should see something like the bullseye pattern above.

This sketch uses two new and very powerful things:

  1. a VARIABLE
  2. a WHILE LOOP

The Variable

The variable is called circleSize. It is like special envelope that can hold any number you want to put into it. We start by putting the number 400 into it:

int circleSize = 400;

Here is how to say this command. Repeat after me: "the int variable circleSize gets 400" Yup, that's right, the equals sign is pronounced "GETS" in computer-speak. That's because == is used for "equals."

The word "int" is short for INTEGER, which is a fancy computer word for "regular counting number."

The While loop

The while loop is the part that says this:

while(circleSize > 50){

ellipse(200,200,circleSize,circleSize);
circleSize = circleSize - 20;

}

What does it mean? Here's a translation for you:

As long as (the number in the variable circleSize is greater than 50) {

draw a circle in the middle of the window that is circleSize pixes wide and circleSize pixels tall;

subtract 20 from the circleSize

} Keep doing this until you subtract circleSize down below 50

 

It starts with while followed by (circleSize > 50). Then, everything inside the curly braces, { } is the stuff inside the while loop.

 

We're going to act this out in class so you can start to understand how it works.

Hack your Program

Now that you've got your seventh program running, do these things:

  1. change the background, stroke, and fill colours
  2. change circleSize from 400 to 200 or 500 or some other number
  3. change while(circleSize > 50)
  4. change circlesize = circleSize - 20;
  5. change ellipse(200,200,circleSize,circleSize);

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

Go back to the home page.