In the previous lesson, I wrapped up what you need to know about writing your own procedures. You now know everything there is to know about creating your own commands and operators. You know how to write procedures that work with inputs and/or produce an output.
In this lesson, you will learn
- about new values, symbolic values, that you can have in your program – words – and a list of words which is called a sentence in Logo.
- how to do something when input events occur. Events covered are keyPressed (when a key on the keyboard is pressed), mouseClicked (when the left button on the mouse is pressed), and mouseMoved (when the mouse is moved within the graphics canvas).
- how to get the X and Y coordinates where the mouse was when its left button was clicked, and
- how to label, draw text on the graphics canvas.
Symbolic Values – Words
There is a lot more to programming than generating numbers and drawing stuff. Logo is a symbolic programming language, a decendent of LISP. Symbolic programming was created to help get computers to do human-like things – the study of artificial intelligence.
So, how do you represent a word in Logo?
When a Logo interpreter sees a double-quote character, i.e. (“), the collection process for characters composing the word starts. All characters until a space or the end of the line are considered part of the word. “Word is a word made up of the characters: W, o, r, and d. Note that the double-quote introduces the word – it is not part of the word.
You can display words just like numbers. Figure 9.1 shows examples of printing words, note that numbers may also be entered as words.
Lists of Words – Sentences
In Logo, a sentence is a list of words. Just like a word can be included in a program by quoting it (i.e. “Logois a word), a sentence can be included in a program by surrounding a word or words with square brackets. Here are a few example sentences:
[This is a sentence] [200 50] [ forward 100 right 90 ]
Note that Logo sentences are just lists of words and that they do not have grammatic structure.
The second example shows how we might use a sentence to represent a point, an x,y pair of coordinates.
An important feature of a sentence is that although it can be made up of many words, it is still only one thing. This is very important when a sentence is used as an input to a procedure. Figure 9.2 shows a sentence as an input to println and then what happens when you attempt to invoke println with multiple words.
So, even though the sentence is composed of four words, println displays it properly. But, when I gave println two individual words, the interpreter complained because println only consumed one input. Thus, the Logo interpreter expected the second word to be a new command and “Words is not a command.
Sentences can also be output from procedures when compound data is appropriate. The example above, [200 50], works as one way of representing a point. Take a peek at the pos operator…
WORD and SENTENCE Operators
Words and sentences can also be built out of their pieces by using word and sentenceoperators. A word can be built out of two words, a sentence can be built by combining words and/or sentences.
Notice that the word operator only combines two words into a single word. It’s not as flexible as the sentence operator. You can’t use word to combine a word and a sentence.
|WORD and SENTENCE Procedures|
|WORD||word word||Outputs a word consisting of its first input concatenated with its second input.||
|Outputs a sentence consisting of its first input concatenated with its second input.||
Figure 9.3 shows a few examples of uses of these operators. Notice how flexible the sentence operator is; it can be used to combine a word and a sentence or combine two sentences into one.
Oh, and just an fyi, sentence can be abbreviated se.
Here is the TG applet. Spend a little time playing with words and sentences. I’m going to talk a little bit about the user interface next, but you’ll need to use words and sentences in the exercises that follow.
|alt=”Your browser understands the <APPLET> tag but isn’t running the applet, for some reason.” Your browser is completely ignoring the <APPLET> tag!|
The User Interface
These days, most of the interaction with a computer or any device with a computer in it, is via what’s called a graphical user interface. In computer-speak it’s commonly called the GUI, (pronounced goo-ee).
On a deskside computer system, the GUI provides ways for you to launch programs, display stuff, etc… all with a mouse pointing device. When you are interacting with programs, you use a pointing device (a mouse) to open up menus, choose items from the menus, check boxes that determine how your program should do things. It’s a point-and-click environment. When it is time to enter text, you have the keyboard.
On a calculator or mobile phone, much of the interaction is done with buttons – buttons for numbers, menu buttons, arrow buttons for moving around within the menu system. For text entry, sometimes the buttons are used, but some devices have tiny key pads (made popular by the Blackberry messaging device).
The first two computers I got to use only dealt with cardboard cards with holes punched in them for input. But, by the time I got my first job, my interface was through a teletype terminal, and this was a major step forward! I could actually interact with the computer, not just submit something for it to do and then wait for something to appear on the printer.
|Punchcard||Model 33 Teletype|
By the 1970’s, this magical kingdom in the world of computer science appeared, commonly called PARC. Actually it is Xerox PARC (PARC stands for Palo Alto Research Center) and it still exists. A group of scientists there built what was to be the future of computing: networks of “personal” computers were prototyped. Much of what you see on a computer these days, the user interface, was invented at PARC. The researchers all had computers (Altos) with high-resolution graphics displays and a pointing device (a mouse). The mouse, or “X-Y position indicator for a display system” which is what it was originally called, was invented by Doug Engelbart at SRI (Stanford Research Institute) in the early 1960’s. The computers the researchers used were connected by a high-speed network (Ethernet). They used this environment that they built themselves to do all of their work.
|Xerox PARC’s Alto|
The first fancy integrated user interface that was built for the Alto (that’s most applicable to what I want to talk about) was Alan Kay’s vision of Dynabook. Alan and a few other researchers including Adele Goldberg and Dan Ingalls, built a graphically-oriented system for working with Personal Dynamic Media, a programming environment they called Smalltalk. The Smalltalk system introduced a new concept of breaking the graphical display into pieces called “windows” which held separate information. As I can fit concepts from this system into our learning, I will.
We’ve been doing lot’s of graphical output, now it’s time to interact with a user – to get some input via your computer systems’ GUI. In the following few sections I cover events that your program can respond to. The events that jLogo supports are keyPressed, mouseClicked, and mouseMoved. I’m going to start with the mouse since it is the most fun!
Responding to a mouseClicked Event
The mouse is simply a pointing device which sends the computer motion information. In the most common form of the mouse, a little ball spins when you move it across a surface. As you move the mouse from side to side and forward or backward, it sends this information to the computer. The GUI uses this information to keep track of a point where the mouse is. The GUI gives you feedback in the form of a graphical icon, usually an arrow. The mouse also has buttons on it. It tells the computer when you press a button down and when you release it. When this down-up motion is done quickly it’s called a mouse-click. Low-level GUI software communicates that a mouse-click has occured to higher-level programs, like TG, in the form of an event.
The TG applet/application receives an event when a mouse button is clicked. If you define a procedure named mouseClicked it will be performed when a mouse-click occurs in the graphics canvas and the button clicked is the left-button. Go back up to the TG applet. Type in the following definition of mouseClicked. Or, better yet, if you have the TG application, Copy and Paste it into TG’s editor.
to mouseClicked println "mouseClicked end
Click the left button on the mouse on the graphics canvas a few times and watch what happens…
MOUSEX,MOUSEY – Where the Mouse Was Clicked
So, what good is knowing that the mouse was just clicked without knowing where it was in TurtleSpace when it was clicked?
Enter the operators mousex and mousey. These two operators output the coordinates where the mouse was when it was clicked.
Things to try:
- Write a mouseClicked procedure that prints where the mouse is when it’s clicked, its x,y coordinates. Use the word and/or sentenceoperators introduced at the beginning of this lesson to combine stuff and print something like:
mouseClicked at 112,44 mouseClicked at -133,-87
- Write a mouseClicked procedure that moves the turtle to where the mouse is when it’s clicked.
Following mouseMoved Events
To track movement of the mouse on the graphics canvas, define a procedure with the name mouseMoved. Here is a neat example to use to see how it works. Type this into the TG applet or application’s editor, then click the mouse on the graphics canvas and watch what happens when you move the mouse around on the graphics canvas.
to mouseMoved println se [mouseMoved to] word mousex word ", mousey end
Things to try:
- Change your mouseMoved procedure to move the turtle to where ever the mouse goes.
Responding to keyPressed Events
Just like the way mouseClicked and mouseMoved provide access to mouse events, keyPressed can get you events generated when a key on the keyboard is pressed. If you define a procedure with the name keyPressedthat has one input (a number), it will be performed when a key is pressed.
Go back up to the TG applet and type in the following definition of keyPressed.
to keyPressed :num println :num end
Once you have this entered, click the mouse on the graphics canvas, and then press a few different keys on the keyboard.
But what good are numbers for for keyPressed events? Why doesn’t keyPressed provide the character pressed?
Well… because not all keys on a keyboard have a character that represents them. For example, all keyboards have arrow keys.
Not to fret, Logo has an operator that converts a key number to a character – char. It takes an ASCII number representing a character as its input and outputs the ASCII character.
Change your keyPressed procedure to print the character represented by the key number, instead of the number.
Drawing Text on the Graphics Canvas
One more new primitive command: label. The label command draws text on the graphics canvas. The text is displayed where the turtle is. You use label similarly to how you can use the printcommand. The difference is where the characters are displayed.
Here’s a fun little program to enter, try it out…
to half :num output quotient :num 2 end to randCanvasX output difference (random canvaswidth) half canvaswidth end to randCanvasY output difference (random canvasheight) half canvasheight end to main penup hideturtle repeat 40 [ setxy randCanvasX randCanvasY label "Hi! ] end main
Write a program, LabelPoints, that labels points on the graphics canvas when you click on them. Figure 9.6 shows an example screen after six mouse-clicks.
Write a program, Eyes, that draws a pair of eyes centered on the graphics canvas. As you move the mouse around on the graphics canvas, make the pupils in the eyes follow the mouse. Here is an applet that shows the desired behaviour.
Write a program, KeyPressedLabels, that
- has a mouseClicked procedure which moves the turtle to where the mouse is clicked and draws a little cursor to indicate where it’s at,
- has a keyPressed procedure which uses char, and label to draw the character representation its input. After drawing the character, erase your cursor, move the turtle over (ready for the next character), and draw a new cursor.
Here is an applet that shows the desired behaviour.
In this lesson, you learned how to include symbols (words and sentences) into your programs. They can be displayed just like numbers. You learned how to join them to form bigger words or longer sentences.
You learned about the label command which draws textual representations of things onto the graphics canvas.
You learned about the events that TG will pass on to your programs if you want to know about them. They are
- when the mouse is clicked on the graphics canvas. Your program can do something if it has a procedure named mouseClicked.
- when the mouse is moved around on the graphics canvas. Your program can do something if it has a procedure named mouseMoved. The mouse must have been previously clicked on the graphics canvas to activate it.
- when a key is pressed on the keyboard. Your program can do something if it has a procedure named keyPressed . The mouse must have been previously clicked on the graphics canvas to activate it.
You learned about the mousex and mouseyoperators which output the X and Y values for the coordinate where the mouse was when it was clicked or moved.
And, finally, I snuck in another example of hierarchy – did you catch it? The Events structure… Here’s an example of it’s layers for mouse events:
|Programs you write in jLogo which contain mouseClicked and/or mouseMoved|
|TG, written in Java gets Events from OS, can pass them to programs written in jLogo|
|OS (Operating System, e.g. Windows, Linux), gets binary data from the mouse,
converts it into Events, and provides these to programs running on the OS
|Hardware… the mouse, the interface (e.g. USB port) it plugs into,
the logic (chips) in them, LEDs, optical sensors, mechanical wheels, switches, etc…
|Procedures Introduced In This Lesson|
|CHAR||number||outputs a single character word that is the ASCII code corresponding to the input (an integer between 0 and 127).||
|KEYPRESSED||keyNumber||When a keyboard key is pressed, TG receives an event. If the key is one that TG is interested in, a user-defined procedure with the name keyPressed (expecting one input) is invoked if it has been defined.||
|LABEL||thing||Draw the textual representation of thing on the graphics canvas, at the turtle’s current position.||
|MOUSECLICKED||When a mouseClicked Event is received by the TG program, if it is the left-button and it is in the graphics canvas, TG invokes a user-defined procedure with the name MOUSECLICKED if one has been defined.||
|MOUSEMOVED||When a mouseMoved Event is received by TG, it performs a user-defined procedure named mouseMoved, if one has been defined. mouseMoved Events only happen when the graphics canvas is active, i.e., the mouse was previously clicked on it.||
|MOUSEX||Outputs the X-coordinate where the mouse was when it was last clicked.||
|MOUSEY||Outputs the Y-coordinate where the mouse was when it was last clicked.||
|Outputs a sentence consisting of its first input concatenated with its second input.||
|Outputs a word consisting of its first input concatenated with its second input.||