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. printlndisplays 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.

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 thesum 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 andcanvaswidth, 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
Outputs the height of the graphics canvas
CANVASHEIGHT
in turtle steps
Outputs the width of the graphics canvas in
CANVASWIDTH
turtle steps
Outputs the result of subtracting number2
DIFFERENCE number1 number2
from number1
Displays thing in the terminal window. The
PR
thing line is then finished off by moving the
PRINTLN
cursor to the start of the next line.
PRODUCT number1 number2 Outputs the result of multiplying number1
 by number2
Outputs the result of dividing number1 by
QUOTIENT number1 number2
number2
Outputs an integer greater-than or equal-to
RANDOM number
zero AND less-than number
SQRT number Outputs the square root of number
Outputs the result of adding number1 and
SUM number1 number2
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.
1. 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
2. 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:
3. (a) 22, 87, 15, 40
4. (b) 93, 31, 72, 18, 6
5. (c) 63, 11, 57, 84, 49, 25

3. 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.
4. 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:

1. 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.
2. drawRandomBox, which moves the turtle to some random location in
TurtleSpace, sets the pen to a random color, and then
invokes drawSolidBox100
3. 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 invokesdrawRandomBox.
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 drawRandomBoxwith 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 (641for 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
1. 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 namedsolidBox 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.

2. 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 thedrawStreet 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 andsety. Use it in this project, check it out...
Command Inputs Description
Moves the turtle to an absolute position, specified as two
number1
SETXY numbers: the new horizontal (X) and vertical (Y)
number2
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 lessonto 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 printlncommands in your programs allows you to
see what they are doing.