Tuesday, July 28, 2009

Programming with 5th Grader.

I like to teach by working through the steps in such a way that the conclusions become obvious to the kids--almost so that I did not have to tell them at all. This annoys my oldest to a great extent because Hanover gets things quickly and feels that I talk too much (blah, blah, blah, conclusion she already figured out). And yet, when I stop early, it turns out that she misses an important nuance or goes off half-cocked and is almost entirely wrong.

For instance, I was helping her with her programming course homework. My husband (teaching the course) had introduced arrays and For-Next loops. She insisted that she didn't need much help and then proceeded to feel lost just looking at the code she was supposed to modify (and the pressure of doing homework or you can't go to your play date helped set her on edge as well).

The existing program consisted of two balls bouncing around in a box. When we had done that program, I fortuitously appended all of the associated variables with 1 and 2. The program set up the starting condition for each ball (the initialization), drew the balls in the box, then checked the ball's position and reversed the direction if it was outside of the box, and then moved it to it's new position.

So the initialization set the first position, the size, the color, and the speed of the ball. Hanover, getting complicated, wanted everything random. There were random starting positions, random speeds, random colors, and random sizes. Here is what her Phrogram code looked like for two balls [General note: I wrote this on a different computer and didn't have the program for reference--the commands are approximate and may not be correct. The idea is there. When I correct with a copy of the code, I'll record the update]:

//Assign a radius to the drawn circle, a random number between 10 and 30.

ballradius1=random(10,30)

//Assign a color for the circle, a random number between 10 and 130.

col1=random(10,130)

//First X position is a random number between (1+ballradius1) and (640-ballradius1). The rectangular screen is 640 pixels long in the X direction. The radius is added to the position so that it's the EDGE of the ball that is at the edge of the screen.

x1=random(1+ballradius1,640-ballradius1)

//First Y position is a random number between (1+ballradius1) and (480-ballradius1). The rectangular screen is 480 pixels high in the Y direction. The radius is added to the position so that it's the EDGE of the ball that is at the edge of the screen.

y1=random(1+ballradius1,480-ballradius1)

//The speed in the X direction is assigned. The speed is defined by how much the ball will move in X in one iteration. It was decided to use a random number between 1 and 5.

xspeed1=random(1,5)

//The speed in the Y direction is assigned. The speed is defined by how much the ball will move in Y in one iteration. It was decided to use a random number between 1 and 5.

yspeed1=random(1,5)

And then each of those commands was repeated for the second ball, replacing the 1 at the end with variables that end in 2.

ballradius2=random(10,30)
col2=random(10,130
x2=random(1+ballradius2,640-ballradius2)
y2=random(1+ballradius2,480-ballradius2)
xspeed2=random(1,5)

The most recent assignment was to increase the number of balls in the box to 40. The first thing I did was to remind Hanover of arrays (it had been two weeks since the last class). That for every variable I can put a [1] after it and it would be the same as writing x1, just now it's x[1]. x2 could become x[2]. It could go on to x[3], x[4], x[5], and x[15], x[27], x[38]. And each one of those names would refer to that particular ball's x position. I reviewed that instead of using numbers in the brackets we can use i (for increment) She was determined to use a different letter and picked m for many. So when we have m=1 it's the same as x[m]=x[1]=x1. And then m can be set equal to 2 to get x[m]=x[2]=x2. We can keep adding 1 to m until it goes all the way from 1 to 40.

Here's an example of using m and incrementing it to set our conditions for all of the 40 balls.

m=1
xspeed[m]=random(1,5)
m=2
xspeed[m]=random(1,5)
m=3
xspeed[m]=random(1,5)
m=4
xspeed[m]=random(1,5)

...and so on. It is really obvious that we are doing the exact same instruction for each m. This is a computer! It's designed to do things automatically. "Was there an instruction that you learned that changes a number until you get to a certain number?" That was enough to get her to remember the For loop. A For loop (for those unfamiliar with programming) will count with a variable from defined number (in this case 1) to a second defined number (40) by 1 (programmers know this is a simplification) and when it gets to the Next command, it knows to go back to the 'For' and move the variable to the next number. With all of the code written above for 4 balls, we can now address 40 balls with the section of code below:

For m=1 to 40
xspeed[m]=random(1,5)
Next

Much shorter. It's even shorter when you look at the change for the whole initialization.

Here's the original code (from above, only without comments this time) for only 2 balls.

ballradius1=random(10,30)
col1=random(10,130
x1=random(1+ballradius1,640-ballradius1)
y1=random(1+ballradius1,480-ballradius1)
xspeed1=random(1,5)
yspeed1=random(1,5)

ballradius2=random(10,30)
col2=random(10,130)
x2=random(1+ballradius2,640-ballradius2)
y2=random(1+ballradius2,480-ballradius2)
xspeed2=random(1,5)
yspeed2=random(1,5)

Here is the same code using arrays and the For-Next loop.

For m=1 to 40
ballradius[m]=random(10,30)
col[m]=random(10,130)
x[m]=random(1+ballradius[m],640-ballradius[m])
y[m]=random(1+ballradius[m],480-ballradius[m])
xspeed[m]=random(1,5)
yspeed[m]=random(1,5)
Next


Now this only sets up the starting information for each ball: radius, color, starting position, and speed. The next section would draw each ball. There are some commands missing, so this would not necessarily run after copying it into Phrogram. I did not include instructions for opening the drawing window.

For m=1 to 40
Pen(False) //Turns drawing off (so it doesn't draw a line when you move it)
MoveTo(x[m],y[m]) //Moves the 'pen' to the center of the circle.
Pen(True) //Turns the drawing back on.
Color(col[m]) //Sets the pen to the color of that ball.
Circle(ballradius[m]*2) //Draws a circle of the right radius for that ball.
Next

That will draw all 40 circles on the screen. The next section of code makes the ball bounce off the walls by changing directions and moves the ball to its next position.

For m=1 to 40
If x[m]>640-ballradius[m]
xspeed[m]=-xspeed[m] //If the position of the edge of the ball is outside of right side of the box, then reverse the travel in the X direction.
If x[m]<1+ballradius[m]> //If the position of the edge of the ball is outside of the left side of the box, then reverse the travel in the X direction.
If y[m]>480-ballradius[m]
yspeed[m]=-yspeed[m]
//If the position of the edge of the ball is below the bottom of the box, then reverse the travel in the Y direction. Yes, Y is more positive the lower you go. Don't ask me.
If y[m]<1+ballradius[m]
yspeed[m]=-yspeed[m]
//If the position of the edge of the ball is above the top of the box, then reverse the travel in the Y direction.
x[m]=x[m]+xspeed[m] //Make the next drawn position move by the speed in that direction.
y[m]=y[m]+yspeed[m]

Of course we need to draw the balls and change their positions over and over and over again in order to animate the balls and see them bouncing. Each of the preceeding For-Next loops were included in a While loop (which continues to do something while conditions stay the same) until the space bar is pressed. So it runs through both For-Next loops (drawing the balls, checking if they are outside of the box and reversing direction if so, and moving them) forever--or until someone presses the space bar.

2 comments:

Shez said...

Your daughter could be a clone for my son. He rolls his eyes at the minutiae of my explanations and always tries to run off and just do it because he insists he understands it. Of course he doesn't and hilarity does not ensue.

aileen said...

I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


Susan

http://dclottery.info