Background

jLogo Programming

Java

Appendices

Lastly

Operators & Expressions

Introduction

In the previous lesson you learned about a powerful tool, an input (a variable) which lets procedures do similar, yet different things. Inputs give you a lot more power to author abstract things. You've written procedures which draw boxes of varying sizes, you've experimented with axes that were turned into grids.

In this lesson, you will learn about a new kind of procedure called an operator. Operators produce an output. You'll work with some of the most commonly-used operators, Logo's built-in math stuff.

Most operators take inputs; they do something with the inputs to produce the output, e.g., the sum operator adds its two inputs together and the result is the procedure's output.

Operators can be combined to form expressions. Since jLogo only provides a prefix operator notation, constructing expressions can be a bit confusing at first. Plumbing Diagrams let you visualize the expressions, so you'll learn how to draw them.

Operators

So far, all of the procedures you have been working with have been commands. What commands do is produce an effect. The commands you have been using do things that you can see when you invoke them, e.g., the turtle draws a line, the turtle rotates, the color of the turtle's pen is changed, etc... There is another kind of procedure called an operator.

An operator is a procedure that produces an output which is used somewhere you need an input.

To make what I'm trying to explain clearer, I'm going to use what Brian Harvey calls plumbing diagrams in his book Computer Science, Logo Style. Plumbing diagrams consist of boxes representing procedures. If a procedure is defined to have inputs, there are openings in the top of the box, one for each input. If the procedure produces an output, there is an opening out the bottom of the box. Figure 8.1 shows a command with an input, and an operator with one input and an output.

Figure 8.1

Figure 8.2 shows the plumbing diagrams for a jLogo command and a Logo operator, both of which you've not seen yet. println displays its input in the CommandCenter of the TG applet (or the TG application) and then moves the cursor to the first column of the next line. random expects an input which should be a positive integer and produces an output, an integer which is greater than or equal to zero and is less than the input.

Figure 8.2

As an example, invoking random with an input of 5 will cause it to output one of the integers: 0, 1, 2, 3, or 4. You can see this by combining println (which takes an input) with random. Here are 3 examples of using println, one of which includes using random. pr is the abbreviated form of println.

   ? println 5
   5
   ? println quotient 65536 64   
   1024
   ? repeat 5 [ pr random 5 ]
   4
   0
   1
   3
   1
   ?

Use the following TG applet to try stuff out for yourself.

alt="Your browser understands the <APPLET> tag but isn't running the applet, for some reason." Your browser is completely ignoring the <APPLET> tag! TG - TurtleGraphics Applet

Beware! If you use an operator, its output needs somewhere to go. Try leaving out the println command, e.g.,

   ? random 8   
   ?

You'll get an error message pop-up containing:

  ERROR: I don't know what to do with output from random 8

Operators can have more than one input but can only produce one output. As an example, the sum operator takes two inputs and outputs the value of the sum of the two inputs. Figure 8.3 shows the plumbing diagrams for a generic operator with two inputs and the sum operator.

Figure 8.3

Finally, there are a few operators which do not have any input, they just produce an output. These operators simply provide information. jLogo has two procedures that you can use to get the current size of TG's graphics canvas. They, canvasheight and canvaswidth, get their names from similar concepts available in the Java programming environment.

Table 8.1 contains the most common math operators, as well as a couple of other procedures we'll use in this lesson. Try out each of the new math operators with the println command.

Command	Inputs	Description
CANVASHEIGHT		Outputs the height of the graphics canvas in turtle steps
CANVASWIDTH		Outputs the width of the graphics canvas in turtle steps
DIFFERENCE	number1 number2	Outputs the result of subtracting number2 from number1
PR PRINTLN	thing	Displays thing in the terminal window. The line is then finished off by moving the cursor to the start of the next line.
PRODUCT	number1 number2	Outputs the result of multiplying number1 by number2
QUOTIENT	number1 number2	Outputs the result of dividing number1 by number2
RANDOM	number	Outputs an integer greater-than or equal-to zero AND less-than number
SQRT	number	Outputs the square root of number
SUM	number1 number2	Outputs the result of adding number1 and number2
Table 8.1

One thing that may appear strange to you at first is the way the name of the operation comes first, followed by its inputs. But, if you think about it, jLogo is consistant - all of its procedures work this way. First you have something that you want done, then comes the thing or things it will use as input. With a little experience (some practice), you'll get used to this way of doing things.

Here is a procedure that computes the area of a rectangle and displays it.

   to printRectArea :height :width   
     println product :height :width
     end

In the field of programming languages, when an operator precedes its inputs (its operands) it is called prefix notation, e.g., "+ 3 2". Most programming languages support what's called infix notation, e.g., "3 + 2" and "12 / 3." As you can see, the operator is placed between the operands. Most Logo interpreters support both prefix and infix notations for the common math operators. But, jLogo is a subset of Logo and one of the things I have left out (for a few reasons) is the infix operators.

Expressions - Operator Combinations

Expressions are compositions of operations that produce an output. In expressions, the output of one operation is fed into another operation as an input. Until you get some practice putting together expressions, they can be a bit confusing. But, don't get frustrated, this is where plumbing diagrams save the day! Plumbing diagrams can help you understand the structure of the expression. The organization that they show graphically makes jLogo expressions much easier to write.

Take, for example, computing the circumference and area of a circle, given its radius.

   to printCircleCircum :radius
     println product 2 (product 3.14159 :radius)
     end

   to printCircleArea :radius
     println product 3.14159 (product :radius :radius)   
     end

Here are their corresponding plumbing diagrams.

Figure 8.4

Notice one new thing I've introduced in the code above, parenthesis. I added them to make the code easier to read. jLogo will check to ensure that matching parenthesis surround complete expressions. So, use them as you see fit.

Practice: Expressions

Following are some very common math applications you work with in high school math classes.

Draw a plumging diagram for a tip calculator which takes two numbers as inputs, the bill's total cost and the percentage of the tip. The output of the expression is the amount of the tip. Then write the procedure tipCalc which prints the tip amount. Here are some sample computations.

Bill Total Tip % Tip $

$10 15 1.50

$15 20 3.00
The average of a bunch of numbers is the sum of the numbers divided by the number of numbers.
1. Draw a plumbing diagram for the expression which averages four numbers.
2. display the average of the numbers:
```
(a)  22, 87, 15, 40
(b)  93, 31, 72, 18, 6
(c)  63, 11, 57, 84, 49, 25
					
```
The length of the hypotenuse of a right triangle is equal to the square root of the sum of the squares of each of its legs' lengths. Draw a plumbing diagram for this expression and then write a procedure which displays the length of the hypotenuse of a right triangle, given the lengths of its legs.
Write procedures which display the surface area and the volume of a sphere, given its radius. Here are the formulas you need.

Project: Lots of Boxes

Time for a project. We are going to create a few digital collages. Figure 8.5 shows a couple of examples. Click on either image to see a larger copy of it.

Figure 8.5

The first image consists of hundreds of colored boxes. The boxes are all the same size, but their locations and colors have been chosen randomly. The second image is similar, but the sizes of the boxes vary from twenty turtle steps on a side to one hundred turtle steps on a side, in twenty step increments. The sizes were chosen randomly.

Relying on our steps for writing computer programs, we'll start writing our new program RandomBoxes with:

1. Understanding the Problem

And to help with this, I've written down everything you should know about the problem.

You know how to draw the perimeter of a box and rectangle; we've done this, see drawRect as an example. But, how do we draw a solid color box? In the lesson where we drew a circle, one approach was to draw its perimeter as a bunch of BIG points, each a solid color box. Checkout the procedure pointOut100. All we did was to use a very thick pen, and draw a line of equal length to the pen's width. We should be able to do the same sort of thing to draw a bigger solid colored box.
The turtle's pen can be set to at least sixteen different colors. The setpencolor procedure expects an input that's zero for black, one for blue, etc... up to fifteen for grey. Type "help setpencolor" in the CommandCenter or click here to for more information about setpencolor, get the full list.
Invoking random with an input of 16 will get it to output an integer in the range of 0 through 15.
The size of TG's drawing space (the GraphicsCanvas) can be obtained using the canvasheight and canvaswidth operators. In the last lesson you learned about moving the turtle to TurtleSpace coordinates with, as an example, setx. The center of TurtleSpace is the coordinates 0,0. So, half of the X coordinates will be negative and half will be positive. If canvaswidth outputs 600, then the turtle will remain in the viewable space as long as its x coordinate is greater than or equal to -300 and less than or equal to 300.

This is a good bit of information about the problem we are solving. It's enough for us to get going; on to the next step in writing a computer program:

2. Devising a Plan

The plan is best expressed as pseudo-code. Our RandomBoxes program, which produces the artwork shown on the left in Figure 8.5, with equal-sized boxes, is pretty simple.

  1. repeat the following sub-steps a number of times
  1.1. set the color of the turtle's pen to some random value
  1.2. move the turtle to a random location
  1.3. draw a solid box 100 steps on a side

Or, I prefer to use procedural abstraction, so I'll write three procedures:

drawSolidBox100, which sets the pen's size to the width (100) of the box being drawn and then moves forward the number of turtle steps needed to cover the height (100) of the box.
drawRandomBox, which moves the turtle to some random location in TurtleSpace, sets the pen to a random color, and then invokes drawSolidBox100
main which does some initial stuff then invokes a procedure named drawRandomBox a bunch of times

What we now have is a layer-cake of three levels of abstraction, a hierarchy that looks like Figure 8.6.

main

drawRandomBox

drawSolidBox100

Figure 8.6

The next step in our process of writing a computer program is...

3. Carrying out the Plan

This means writing the Logo procedures. To get started, I type in a simple version of drawSolidBox100, a procedure which draws a solid square of a specified size.

   to drawSolidBox100
     setpensize 100   
     pendown
     forward 100
     end

Next, I'll add a new procedure that builds on top of this; I'm naming it drawRandomBox. It's always nice to get code entered, so I'll type in a partially functional version of it.

   to drawRandomBox
     ; setpencolor <some random value>
     penup
     ;setx <random X coordinate in GraphicsCanvas>   
     ;sety <random Y coordinate in GraphicsCanvas>
     drawSolidBox100
     end

What's nice about this is that we can verify that we have a program that at least partially works. It is always easier to find problems when you incrementally develop your programs. In the code above, the parts of drawRandomBox that I still need to figure out have been entered as comments. Once I have what I know how to do working, I'll replace the comments, one at a time, with code that accomplishes what the comment says. Try your version of the program out. You should be able to invoke drawRandomBox and end up with a solid box displayed.

To wrap up your first pass at the program, add a main that initializes the GraphicsCanvas, and then repeatedly invokes drawRandomBox.

   to main
     hideturtle
     home clean setheading 0   
     repeat 20 [ drawRandomBox ]
     end

Once we get this initial version of our program working, we can convert the comment lines into working source code, one comment at a time. But now take the time to get what I've shown you working. Don't move on until you've done this...

A Random Pen Color

Time to add some randomness to our program. The first comment that needs to be converted to Logo is the one that sets the pen's color to some random value. What's our first step? How about drawing a plumbing diagram? I'll do that; Figure 8.7 shows mine.

Figure 8.7

In this diagram, we have the literal 16 as an input to the random operator, which produces an output (a number in the range of 0 through 15, inclusive) that is then supplied as an input to the setpencolor command.

Now it's your turn, convert this plumbing diagram into source code and replace the corresponding comment line in drawRandomBox with your code.

Test it by invoking drawRandomBox a few times. If your changes are working, you should now be getting a box that's a different color each time you invoke drawRandomBox. Remember that it is possible to get the same color two times in a row - the numbers output by the random operator are truely random.

Once you have this working...

Random Box Locations

Now, let's move on to the setx and the sety commands. Again, we start with plumbing diagrams, as shown in Figure 8.8.

Figure 8.8

Now... These plumbing diagrams do not provide the complete solution. I've got to leave something for you to work on by yourself. These diagrams are of example expressions for computing random X and Y coordinates.

In these plumbing diagrams, literals are used for the height, half the height, the width, and half the width of the GraphicsCanvas (641 for the width and 481 for the height). You need to replace all the literals, with operators canvasheight and canvaswidth and expressions that include them.

Do it... Convert these plumbing diagrams into Logo source code and replace the ;setx... and ;sety comment lines. Test them by invoking drawRandomBox from the CommandCenter a few times. Once complete, each time, a box should appear in a random location, in a random color. It's best to change and test one plumbing diagram/line of your program at a time.

BUG: ?Partial Boxes at Top, Right, and Left?

Ok, so I didn't give you the complete solution to the program... If you've only been following along, not thinking hard about your program, it is going to have a bug in it. Your boxes go off the top and off the right and left sides of the GraphicsCanvas. Compare what your program draws with Figure 8.5. If you have partial boxes, fix this...

Practice: Program Changes/Extensions

The second collage in Figure 8.5 has randomly sized boxes. The sizes of the boxes vary from twenty turtle steps on a side to one hundred turtle steps on a side, in twenty step increments. Figure 8.10 is a plumbing diagram for supplying a procedure named solidBox with the side sizes. Figure 8.9 Convert this plumbing diagram into source code and produce a collage similar to that in Figure 8.5.
Your turn! Make your own collage using something other than squares...

Project: A Street of Different Houses

On to a much more interesting challenge: get the turtle to draw a street of houses that vary in height and width.

Figure 8.10

Notice how the houses are similar, but slightly different from each other. And, looking closer, you'll notice that the taller the house, the taller the door and the window is. The wider the house is, the wider the door and the window is.

So, the objective is to modify the drawHouse procedure you first wrote in the Defining Your Own Commands lesson and then used in the drawStreet procedure you wrote in the Hierarchical Structure lesson. Your new drawHouse will have inputs for the height and width of the front of the house.

Start off simply. Plan out how you achieve the end result by making a series of changes. For example, when I first wrote the drawStreet program, I started by extending my house program so that it drew a street of identical houses as shown in Figure 8.11.

Figure 8.11

Once I had this working, I moved on add the :height and :width inputs to my drawHouse and drawFront procedures. When I tested this, I could get the front of the house to change - but the roof wasn't right and the door and window looked funny. So, one by one, I fixed the corresponding procedures for drawing the roof, drawing the door, and finally drawing the window.

Table 8.2 shows a new command, setxy, that is shorthand for the other to commands you've been using up to this point, setx and sety. Use it in this project, check it out...

Command	Inputs	Description
SETXY	number1 number2	Moves the turtle to an absolute position, specified as two numbers: the new horizontal (X) and vertical (Y) coordinates.
Table 8.2

Practice: Enhance Grid

Now that you know about the canvasheight and canvaswidth operators, modify the grid program you wrote in the last lesson to draw a grid, or pair of axes, that is the size of the GraphicsCanvas.

Summary

You learned about an operator, a procedure which produces an output value. This output value is then fed into another procedure's input.

You were exposed to many of the operators that are built into Logo, mostly the mathematical operators for basic arithmetic.

You learned how to construct plumbing diagrams which help you visualize how to connect commands, literals, and operators to form expressions you need in your programs.

You used the println command for the first time to display literals and output values from combinations of operators. Putting println commands in your programs allows you to see what they are doing.

Back to Procedure Inputs
Go to the Table of Contents
On to: Defining Operators

Bill Total	Tip %	Tip $
$10	15	1.50
$15	20	3.00