FHTW Berlin Fachbereich 4 Internationale Medieninformatik Mädchen Machen Technik October 4, 2004

Welcome to the Girls and Technology Week at the FHTW Berlin!

We will be doing the first programming exercise here from my first semester programming course in our International Media and Technology study program. The main difference is that you don't have to write a 5-7 page lab report on what you do in the lab!

We will be working with the Etch-A-Sketch. Have you ever played with something like this before?

This is a simple drawing application. It actually resembles a child's toy called an Etch-A-Sketch. In case you are not familiar with an Etch-A-Sketch, here is a brief description: An Etch-A-Sketch is a rectangular frame (generally red) with a silver screen in the center and two white knobs, one in each of the lower corners. Inside the silver screen is a point of darker gray. As you turn the knobs, the darker gray point moves around the screen, leaving a darker gray trail behind it. By controlling the knobs carefully, you can draw pictures.

In this exercise, we will perform operations on a similar (though less brightly colored) display. The position of each knob will be represented by a single number. Behind the scenes, an instruction-follower will continually check the position of each knob and update the position of the dot correspondingly. Note that there is one instruction follower for each knob, and they're not guaranteed to operate at precisely the same speed.

Your job will be to write the instructions for the dot position.The trick is that whatever instruction you write will be read (and executed) repeatedly. If your instruction always gives the same value, it will be as though that knob is stuck in one position. If your instruction changes the value, the same change will be made to the knob's position over and over again. (To keep the knob moving, you'll have to make this change relative to the knob's current position. We'll discuss how to do this below.)

Another interesting feature of our program is that the same rule may be used to control both knobs. The knob-rules don't have any way to tell which knob they're controlling. You can experiment with this to see how a rule behaves when it's being used by both knobs, or by one or the other knob.

But on to the details....

In your application, as in the Etch-a-Sketch, there is a blank screen with a dot on it. When the dot moves, it leaves behind a trail. The motion of the dot is controlled by two entities, one for each axis (horizontal and vertical). Each of these entities follows a particular control rule, which you will write. This rule tells the entity how to behave. The control rule is automatically invoked by the application system; your job is simply to write down appropriate control rules.

The form of a control rule is a sequence of Java statements ending in a

return double ;

where double is some Java expression with type double. The value returned by your control rule will be used as the new position of the dot. For example, you could write

return 10.0;

in order to move the dot to position 10. Expressions can be numbers such as 1.0, or they can be fields with a name such as pos , or they can be two expressions connected by a binary operator such as pos+1.0, or an expression in parentheses, or an expression with a unary operator such as -pos. You can make your expressions as complicated as you want - if you understand what you mean!!

Numbers such as 1.0 or 3.7234 are values of type double.

How to start the Etch-A-Sketch? Just click on the Web-Start-It link, and answer Yes to all questions! You should now see these two windows:

1. Write Horizontal and Vertical rules in Recipe1 and Recipe2 that will place the ball in position (10, 20). You should use the keyword return and then give the value. Don't forget to put a ; at the end! Now use Recipe/Compile both to compile your code. This means turning it into a form that the instruction-follower can understand. If you click on Start - something should happen!
2. Try other coordinates as well, including negative ones.
3. Use the Horizontal rule for both rules.  What do you expect would happen?
4. Use the Horizontal and Vertical rules separately again. Use the mouse to manually move the ball to another position.  Do this several times.  What happens?
5. Each rule knows where the dot currently is - that value is kept in a field called pos. Can you figure out how to draw a line?
6. Great - but it looks stupid when it hits the wall. The values for the wall are maxpos and -maxpos. Can you make the line bounce off the wall just before it hits the wall? We use a statement called as if-statement to do this:
   
   if (some Boolean-valued expression)
   { then do this}
   else
   { do this };
   
   Don't forget: return has to be the last statement!
7. Would you like to have your own field? Use the "add fields" button and you can make your own fields, such as:
   
   int step;
   
   Now you can do something like
   
   step = step + 1;
   pos = pos + step;
   return pos;
   
   What do you expect will happen here?
8. For experts: Make up other cool things to do! Can you draw a circle? How about a spiral? Can you cover the screen in diagonal stripes?

If you enjoyed this, maybe you want to study with us! You can get more information about the study program "International Media and Computing" from our web site: http://imi.fhtw-berlin.de!