BFOIT - Introduction to Computer Programming

Procedure Inputs

Introduction

Hopefully by now I've convinced you that programming involves a process of solving problems in stages.  Since most computer programs that you will want to write are too complex to simply type-in, you need to take advantage of the concept of procedural abstraction.  Break the problem that you are writing into pieces.  Think about what you need to do; of this, think about what you already know how to do.

Start writing a program in pieces.  Each piece is written as a procedure which you define.  Your procedures are simply lists of instructions.  In techie terms, you are using abstraction to make the source code easier to understand and thus easier to write correctly and easier to enhance.

As you think about the steps or as you are typing in instructions, you will recognize similarities or patterns in the code.  When you discover a pattern with the same instructions being used over and over again, you can reduce the amount of code by using iteration - you learned about this (the repeat command) a couple of lessons ago.  Using iteration makes your programs smaller, and so, easier to understand,

But, iteration only lets you eliminate duplicated instructions, identical code, that your want to do multiple times.

In this lesson, you will learn how to define procedures that have inputs, also known as parameters.  These inputs (their names) are used in the body of the procedure in place of specific (actual) values.  When you invoke the procedure, you provide a specific (actual) value to use in place of the input, everywhere its name is in the body of the procedure.

Procedures with inputs allow you to reduce multiple, similar, patterns of instruction sequences to a single instruction.  Confused?  It will become clearer as this lesson progresses...

Similar, But Different, Boxes

Look at the series of objects in Figure 7.1.  What are the similarities of the objects?  What are the differences?  Take a moment to write your thoughts.

Similar Boxes Figure 7.1

Now, write a program, boxes, which draws the series of growing boxes.  Your program should consist of a procedure for each box.  Then, write your main procedure which contains invocations of these new procedures.  Finally, invoke main to display the row of boxes.

If you are confused, refresh your memory regarding defining procedures, review Definition of a Procedure.  Also rereading the last lesson's Summary may help.  Give this exercise good effort before reading on.

Similar Procedures

Here are my definitions of the procedures which draw the first couple of boxes and part of the definition of the main procedure.

   ;draw a box 25 turtle steps on a side
   to box25
     repeat 4 [forward 25 right 90]
     end

   ;draw a box 50 turtle steps on a side
   to box50
     repeat 4 [forward 50 right 90]
     end

   to main
     home clean setheading 0 setpencolor 0 setpensize 1   
     penup left 90 forward 250 right 90 pendown
     box25
     penup right 90 forward 70 left 90 pendown
     box50
     ;...
     end 

Since the procedures draw different sized boxes, I've given each of them an appropriate name.  But check them out carefully, the only difference in the instructions that make-up the bodies of these procedures is the number of steps that the turtle is told to move forward

Think about this scenario.  Logo doesn't have an infinite set of forward commands, e.g., fd25, fd50, fd75, etc...  There are not commands for all possible right instructions, e.g., rt30, rt45, rt90, etc...  There are commands forward, fd, right, and rt which expect an input that specifies the number of steps to move, or the number of degrees to rotate.

We obviously need the capability to define procedures that can be used in a similar manner.  We need the ability to define a procedure named box that expects to get a number when it's invoked.  The number will determine the size of the box drawn.

What we need is called an input.

Defining a Procedure With an Input

Here is what we want...

   ;draw a box of a specified size.
   to box :size
     repeat 4 [forward :size right 90]   
     end 

This procedure definition has an input.  Similar to the way you name the procedure itself, you give the input a name, an identifier.  In this example, I've chosen the name size.  The colon (":") preceding the name (pronounced "dots") tells the interpreter that this word is an input and that it should use what's in it. 

What do I mean, in it?  Well, an input is one kind of a thing that's called a variable.  Variables are containers.  Inputs get a value put into them when the procedure they are part of is invoked.

Up until now, all of the programs you've written have been composed of commands with literals as arguments.  Literals are constants like the number "4" in the repeat instruction in the example above.  Every time box is invoked, the <List-of-Instructions> input to the repeat command is performed 4 times. 

But now, the input to the forward command is a variable - the input named size.  The number of steps that the turtle moves forward is equal to the input provided in an invocation of box.  The turtle moves a variable number of steps every time the Logo interpreter performs the box procedure.

Here's the TG applet.  Type in the example definition of box from above and then invoke it a couple of time with different values as arguments, e.g.,

   box 10   
   box 25
   box 100 

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

Then, see what the following repeat instructions do.

   repeat 4 [ box 25 box 50 box 75 left 90 ]    
   repeat 24 [ box 60 box 90 right 15 ] 

Practice: Grid

Let's generalize the program we have been working on which draws the axes.  Figure 7.2a shows the axes; we are going to add an input to the procedure which draws a tick mark.  Doing this will allow us to change ONE NUMBER in our program and the resulting drawing will appear as in Figure 7.2b.

a. Axes
b. Grid
Figure 7.2

Figure 7.3 shows the hierarchy of the grid program. 

tickMark
axis
grid
main
Figure 7.3

Here is the code for tickMark.

   ; draw a tick mark at the turtle's current location
   ; the tick mark is drawn perpendicular to its heading
   ; input :len is length the tick mark extends outward   
   to tickMark :len
     setpensize 1 setpencolor 15
     right 90 forward :len back :len
     left 180 forward :len back :len
     right 90
     end 

And, here is the code for axis which invokes tickMark.

   ; draw an axis at the turtle's current location
   ; the axis runs along the turtle's current heading
   ; input :num is the number of tick marks to draw (20 steps apart)
   ; input :ticLen is the distance a tick mark extends outward from axis
   to axis :num :ticLen
     pendown
     repeat :num [setpencolor 0 setpensize 3 forward 20 tickmark :ticLen]   
     end 

Read over these procedures.  Enter them into the editor in TG or the TG applet.  Experiment with axis.  The key to whether a pair of axes or a grid is drawn it value of its ticLen input.  If axis, is invoked with its ticLen input set to 100.  If you change ticLen to some small about, like 5, you will get an axis.  So... the choice is made with a single number, an input you supply to axis!

Write a program named Grid which first draws the pair of axes (Figure 7.2a), waits for a few seconds, then draws the grid (Figure 7.2b).

Inputs are very powerful tools.

Timeout... Does this make sense?

If this (defining and invoking procedures which have inputs) is even the least bit fuzzy, before moving on, check out the way procedure definition with an input is explained in the book: "Thinking About [TLC] Logo" by clicking on this link.

Multiple Inputs

Procedures are not limited to to zero or one inputs.  Procedures are allowed to have more than one input.  The repeat command we have been using has two, a count and an instruction-list.  The boxes we have been drawing are squares, a special case of a rectangle.

Here is the definition of a new procedure which draws a rectangle.

   ;draw a rectangle of a specified size.
   to rectangle :height :width
     repeat 2 [forward :height right 90 forward :width right 90]   
     end 

Type it in.  Try it out.

Project: drawRect

The TG application/applet you are using is written in Java - which is why I've given it the name jLogo.  The goal is to prepare students for the AP Computer Science curriculum, which currently is based on the Java programming language.  I'm going to take advantage of the current lesson's objective, which is to introduce multiple inputs, to show you one of Java's primitive graphics procedures.  We will then define it in Logo.  Here is a description of Java's drawRect.

    drawRect( int x, int y, int width, int height )

    drawRect draws the outline of the specified rectangle. The
    left and right edges of the rectangle are at x and x + width.
    The top and bottom edges are at y and y + height. The
    rectangle is drawn using the current color.

    Parameters:
    x - the x coordinate of the rectangle to be drawn.
    y - the y coordinate to the rectangle to be drawn.
    width - the width of the rectangle to be drawn.
    height - the height of the rectangle to be drawn.
			

So what are the differences between what we have been doing with our turtle to draw boxes and Java's drawRect procedure?

  • All of our box procedures have expected the turtle to be where the lower-left corner of the box is to be drawn.  Everytime a rectangle is drawn with drawRect, the invocation includes the x,y location of the rectangle's upper-left corner.
  • The boxes we have drawn were with whatever color and size the turtle's pen currently was.  drawRect only draws with a pen size of 1.  It's low-level Graphics support does not have the concept of line thickness.  It does draw in whatever the current color is.
  • The boxes we have drawn have been oriented in the direction the turtle is headed.   This allowed us to draw some pretty neat graphics.  drawRect is quite restrictive in comparison.  The edges of the rectangle must be parallel to the X and Y axes.
  • There is a major difference in the layout of TurtleSpace when compared with Java's coordinate system.  All graphics in Java is relative to the top-left corner of the graphics area.  This point is 0,0.  X coordinates increase going right; Y coordinates increase going down.  There are no negative X or Y coordinates.

Taking all of this into account, here is a Logo version of Java's drawRect.  One thing I did not do was to change the turtle's pen size.  I'm going to leave it as it is. 

   ;draw a rectangle of a specified size at specified location
   to drawRect :x :y :width :height
     penup setx :x sety :y pendown
     setheading 90
     repeat 2 [forward :width right 90 forward :height right 90]   
     end 

Read over this code closely.  You'll find a couple of new commands, ones we haven't used before.  setx moves the turtle east or west (right or left), to the location specified by its x input parameter.  sety moves the turtle north or south (up or down), to the location specified by its y input parameter.  These commands are like the forward and back commands - they draw a line to the destination if the pen is down - but, it works without regard to the turtle's current heading and does not change the heading

Practice: Rewrite boxes

Your turn - rewrite the boxes program this lesson started off with, naming it drawBoxes.  Include drawRect in the program and use it (invoke it) to draw all the boxes.

Logo Animation - Watching Inputs in Action

InputsAnimated Figure 7.4

Click here to see an applet that demonstrates the execution of a small program which draws a three cubes.  If you are having any trouble visualizing how inputs get their values when a procedure which has them gets invoked, go watch it...  Watch how the program is executed, step by step.

Project: SeaScape

In one of the projects at the end of the Iteration lesson you you were to take something as simple as an arc and use it to draw a flower. Here is a simple seascape that is also composed with arcs. 

Figure 7.5

Write procedures arc, bird, fish, and waves and then invoke them from a main procedure.  Then invoke main to draw your seascape.

Summary

In this lesson, you've learned how to extend the utility of procedures.  You now know how to write procedures that can act differently; exactly what gets done depends upon the inputs ( parameters) that are provided on invocations.  This is good for two reasons:

  1. You can reduce the size of your programs.  The shorter your programs are, the easier they are to read and understand, the less chance they have mistakes in them, and the less you have to type.
  2. Your abstractions can be more powerful.  Without inputs, a procedure does the same thing every time it is invoked.  This is pretty limiting.  But, with inputs, your procedures are much more flexible.

Logo Primitive Procedures
Introduced in This Lesson

Command Inputs Description Example
SETX number Moves the turtle horizontally to the specified absolute window position. SETX 100
SETY number Moves the turtle vertically to the specified absolute window position. SETY -50
Table 7.1


Back to Hierarchical Structure
Go to the Table of Contents
On to Operators & Expressions

Public Domain Mark
This work (BFOIT: Introduction to Computer Programming, by Guy M. Haas),
identified by Berkeley Foundation for Opportunities in IT (BFOIT),
is free of known copyright restrictions.