B CUSP 110 – Digital Thinking

Homework 8: The Raes-Fry Again


Goal: To use the concept of variables.

Part 1: Introduce A Variable

In class, we drew a kite figure in an active program structure, that is, one with a setup( ) and a draw( ). Then we introduced a variable x, placing the declaration at the top of the code; that is, we wrote int x = 0; which tells the computer we will be using x as an integer variable, and its value should start at 0. We then added the x amount to every x-dimension specification, and we incremented it at the end of the draw( ) function, that is, we wrote x = x + 1; This had the effect of moving the kite right across the screen.


Begin with a fresh copy of your colored Raes-Fry robot from (Homework6.RobotCode.txt), and make it move in the same way as the kite. You will need to go through the same steps:

1)      Make sure the robot is drawn in the draw( ) function of an active program.

2)      Declare a variable x, initialized to 0.

3)      Add the x amount to all of the x-coordinates used in the program.

4)      Increment the x variable in the draw routine.

And then watch the robot move across the screen.

Part 2: Introduce Another Variable

Continuing with your moving Raes-Fry robot, introduce another, y. It should also be an integer and have 0 as its initial value; that is, it’s just like x. But, y is to be added to the y-coordinates of the head, because we want to make the robot’s head move up and down.


First, make its head move down by placing an increment instruction (like x’s) in the draw( ) routine. This should cause the robot’s head to descend off of the bottom of the screen.


TIP: Notice that to work on the vertical motion without the robot moving right, simply “comment out” the increment of x line; that is, place // in front of it, as in                                         // x = x + 1;


Next, replace the increment of y line with this line of code:

y = (y + 1) % 60;

This is like the previous increment instruction, except that it “mods” the value of y back to 0 when it gets to 60. That is, the % symbol is an operator like divide, expect that it gives the remainders. This means that the values of y are (one at a time): 0, 1, 2, 3, 4 … 59. This lowers the head in 59 steps, 1 pixel at a time, before it springs back up. Give it a try!


Make sure that the antennae are moving with the head!


Part 3: Challendge: Introduce a Third Variable (Optional)

Continuing with the moving robot, introduce another integer variable, z, which is also initialized to 0. Add z to the length of the robot’s body; and increment it at the end of draw( ) using the mod operator with

            z = (z + 2) % 20;

The mod operator works similarly here, so z will have the sequence of values (one at a time) of: 0, 2, 4, …, 18. Watch it work.



Wrap Up.

You’ve programmed Processing using variables. You used the fact that the draw( ) routine refreshes the image several times per second. Each time it runs draw( ) it repeats the “increasing” operation such as x=x + 1;  This causes the variable’s value to grow. By using that variable to increase the horizontal position of shapes, you could make the R-F robot move off the screen, and you could modify its parts so they move, too.


Rename a copy of the .pde file with your name, and submit it into the class drop box.