Chapter 4.4 - Logo Part 1

4.4. Logo Part I

Time Estimate: 90 minutes

4.4.1. Introduction and Goals

An algorithm is a precise sequence of instructions that controls the computer’s behavior. In this lesson, you will design, implement, and test algorithms to draw simple shapes using a Logo-like platform. Logo is a programming language that was developed in the 1960s aimed primarily for educational use. It is an excellent platform for creating simple drawing algorithms. Objectives: In this lesson, you will learn to: use primitive Logo commands to draw simple shapes; define simple functions to simplify the drawing process.

Getting Ready

Open Thunkable with the LogoTemplate and follow along with the following tutorial. Note: If the blocks don’t appear well in the Blocks Editor, right-click on the background and use the Clean Up Blocks option.

Creating Simple Drawing Algorithms

The template you load will provide a running app that lets you draw using simple Logo drawing commands. The commands are implemented in buttons: Fwd -- make the Turtle go forward 10 pixels. Right -- make the Turtle turn right 90 degrees. Pen -- a toggle that takes the Turtle off the canvas (no drawing mode) or puts it on the canvas (drawing mode). Hide/Show -- a toggle that makes the Turtle disappear or reappear. Draw -- this button will execute whatever algorithm you put into its Click handler. The final exercise in this lesson asks you to draw a face similar to the one shown here -- details below. Reset -- this button clears the canvas and puts the Turtle back in the middle.

Introduction

Logo is a programming language that was invented by Seymour Papert in the 1960s, primarily for educational use. Papert believed, as we do, that students learn best when they are building their own knowledge and ideas:

Constructionist learning is inspired by the [view] that individual learners construct mental models to understand the world around them. However, constructionism holds that learning can happen most effectively when people are also active in making tangible objects in the real world.

In this lesson the tangible objects you will build are algorithms for drawing simple shapes.

Logo’s best known feature is its turtle -- an actual picture of a turtle -- that the user can control by telling it how to move. As the turtle moves, it leaves behind a trail -- in other words, it draws. Imagine the trail left behind by an animal as it moves around in the sand on a beach. Logo can be used to create very sophisticated algorithms and hence very sophisticated drawings. Here’s a cool example.

Logo Commands

The Logo programming language consisted of a set of primitive commands that controlled the turtle. You saw something like these commands in the Blockly maze exercises that you did.

In our implementation of Logo, we’ve replaced the Turtle with an Arrow so your algorithms will be telling the Arrow what to do. For this version, we have deliberately made the basic commands much weaker than the ones you used in the Blockly maze. Here are the commands that you can use in building your algorithms:

• The forward command moves the Turtle forward by 10 pixels.

• The turn command causes the Turtle to turn right by 90 degrees.

• The penUp command pulls the pen off the canvas so nothing is drawn when the Turtle moves. The penDown command puts the pen down on the canvas so it will draw.

• The showTurtle command makes the Turtle visible. The hideTurtle command makes the Turtle invisible.

• The reset command clears the canvas and moves the Turtle back to its starting position.

We’ve implemented these commands as Thunkable functions for you. You should see the following collapsed blocks in the Blocks Editor of your Logo 1 Project:

DO NOT OPEN OR EDIT THESE BLOCKS

Algorithms

As you know, an algorithm is a precise sequence of instructions that, when executed on a computer, controls the computer’s behavior. For example, here’s an algorithm for drawing a 10-by-10 square, expressed in pseudocode (left) Thunkable blocks (right):

When ButtonDraw,Click do: forward turn forward turn forward turn forward turn The Thunkable commands have been put into the definition of the ButtonDraw Click event handler. When you press the app’s ‘Draw’ button, it will now draw a 10 x 10 square.

Exercises, Part 1

For these exercises, before coding your solution in Thunkable, it would be a good idea to first write out the solution in pseudocode and discuss it with a partner.

0. (Optional) Use graph paper when designing your algorithms in the following exercises.

1. Complete the ButtonDraw Click handler as shown above. Then, test the app on your device. When you click the draw button, it should draw a 10-by-10 square. That’s a pretty small square. You might have to hide the Turtle to see it.

2. Design an algorithm to draw a 20-by-20 (pixels) square. Note: Designing an algorithm is not the same as programming it. You will first want to write it in pseudocode, working out the details with your partner. Part of designing it is also figuring out what your design would do -- that is, mentally thinking of yourself as the Turtle and going through the steps of the algorithm and seeing what the result is. This is also an exercise you could do with your partner, taking turns being the turtle.

After you have designed a good algorithm, implement it in Thunkable by modifying the ButtonDraw Click handler to draw a 20-by-20 square.

3. Let’s use a little abstraction here. One advantage will be that you can save all of your algorithms for use in future exercises.

Define a function named square20 that draws a 20-by-20 square and then modify the ButtonDraw Click handler so that it calls the square20 function. Design suggestion: Your square20 function (and the other functions you create) should leave the Turtle in exactly the same state that it started in. That is, it should end up where it started and facing in the same direction.

Abstraction: Defining functions is a form of procedural abstraction. One good reason for doing so is that you’ll be able to use your functions to solve other problems -- e.g., in this lesson, when you want to draw a face. In Logo, as in other languages, defining a function is a way of extending the language. For example, now that you have a square20 function, you can use it just like any of the primitive commands -- forward, turn -- you started with.

4. Design an algorithm for drawing a 40-by-40 square. Then, implement your algorithm by defining a function named square40 that draws a 40-by-40 square. Then, modify the ButtonDraw Click handler so that it calls the square40 function.

Algorithms with Repetition and Selection

As we have learned, in designing algorithms, there are three basic types of control structures: sequence, selection, and repetition. Just about any algorithm you can think of can be built using these three types of controls.

Sequence. You are already familiar with sequence, which just means a sequence of steps. In Thunkable, we arrange blocks in a sequence by placing them top to bottom:

Selection. You are also familiar with selection, which is just the term we use for if-else structures:

Repetition or Iteration. In Logo 1 we will make use of repetition or looping to simplify algorithms that involve repeating a sequence of commands. Let’s review a simple example of how it can be used with our new forward and turn commands.

In the following example, we use a repeat loop to draw a 10-by-10 square.

Note the big difference between the two algorithms. The algorithm on the left uses a simple sequence with copies of the forward and turn blocks to draw a square, whereas the algorithm on the right uses a repeat loop, a much more practical and general approach. The repeat block in this case repeats the statements in its do-slot 4 times. There are other loops such as the for-each block, the repeat until block, and count with i block that you may use in other situations. In this example and for many of the exercises in this lesson, a repeat block can be used as shown here, to repeat the statements a specified number of times.

Using a Repetition Control Structure

You are probably finding it tedious to draw a 40-by-40 square by having to repeat the forward command 4 times for each side of the square. Let’s have the computer do that. In the following set of exercises, use a repeat loop as shown in this example to repeat sequences of blocks that you need to draw your shapes:

For example, consider this function for drawing a 20-by-20 square.

This is an example of a repeat loop -- the repeat block repeats the commands inside its do-slot 4 times, thereby drawing a 20-by-20 square.

A loop or loop control structure is an abstraction that simplifies the expression of certain algorithms -- those that involve repetition of some sort or other.

Exercises, Part 2

1. Define a function named line40 that draws a line of length 40. Test it by calling it from the ButtonDraw Click handler.

2. Refactor your square40 function to use a repeat loop and the line40 function to draw a 40-by-40 square. As we learned in an earlier lesson, refactoring means to revise your code without changing the basic functionality of your app. Test your algorithm by calling it from the ButtonDraw Click handler.

3: Design an algorithm for drawing a face with a large square for the head, 2 small squares for the eyes, and a line for the mouth, as shown below. Design and define any other functions you need to help simplify this problem -- e.g., the outline of the head, the eyes, and so on. Make appropriate use of loops in your algorithm.

Design first, then code: This algorithm will be quite a bit more complex than any of the others you’ve done. So it’s important that you work out a careful plan for doing this.

You’ll have to use the penUp function to lift the Turtle off of the drawing canvas. And you’ll have to plan how far to move forward to get the eyes and mouth placed properly. You will definitely want to plan and test this algorithm on paper before trying to program it. You might want to use graph paper to help figure the distances.

Once you’ve designed a correct algorithm, implement it by defining a function named drawFace that draws the face. Then, test your code to make sure you got it right. Include a screenshot in your reflection document.

Here is a plan to follow:

• First, draw a scale model of your face. For this, you need to decide what each square on the graph paper represents -- e.g., is each square 10 pixels? 5 pixels?

• Based on your model, write out the commands for drawing the face using pencil and paper -- i.e., write out your algorithm right on the graph paper.

• Code your face-drawing algorithm and test it. Define a function named drawFace and call it in the ButtonDraw Click handler. Keep testing and refining your algorithm until it correctly draws a face.

• Abstraction: Once you can successfully draw the face, refactor your code to make good use of functions that break the face into parts -- e.g., head, left eye, right eye, mouth, moves.

4. Refactor your drawFace function by breaking it up into smaller functions. This will make it easier to understand. For example, here’s a possible algorithm you might use:

To drawFace do: square100 positionAndDrawLeftEye positionAndDrawRightEye positionAndDrawMouth returnToStartOfFace

As their names suggest, the sub-functions will include the various penUp, penDown, and move commands to position the eyes and mouth correctly and to return the Turtle to its starting position (at the bottom left corner of the face). Remember: Ideally, your algorithms should leave the Turtle in the same state when it is finished drawing the head as when it started.

5: Can you draw a triangle with this set of Logo commands? Discuss how or why not. (reflection)

6: Discuss: What do we need to change about the Logo commands in order to be able to draw a triangle? (reflection)

Conclusion

Hopefully, you experienced a bit of impatience and frustration with some of these exercises. The loop control structure made it somewhat easier, but it was still pretty tedious to draw a face, and as you discovered, it’s impossible to draw a triangle and many other shapes.

The problem here, as you’ve probably realized, is that the set of primitive operations we’re using -- forward, turn -- are too weak. For example, instead of having a forward function that can only go forward by 10 pixels, we could create a forward(N) function that can go forward by any number, N, of pixels. Similarly, instead of having a turn function that can only turn by 90 degrees -- which makes it impossible to draw a triangle -- we could have a turn(M) function that can turn by any number, M, of degrees.

The lesson here is that our choice of abstractions, in this case, our basic Logo commands, affects the kinds of problems we can solve and how we solve them. We will revisit this topic in the Logo Part II lesson.

AP CSP Pseudocode: Control Structures

In the AP CSP exam, there are questions that involve a robot moving in a grid following simple commands similar to our Logo App. The commands used in the exam are:

• MOVE_FORWARD() : The robot moves 1 square forward in the direction it is facing.

• ROTATE_RIGHT() : The robot turns right 90 degrees, staying in the same square but facing right.

• ROTATE_LEFT() : The robot turns left 90 degrees, staying in the same square but facing left.

• CAN_MOVE( direction ) : This command can be used with 4 possible directions: left, right, forward, and backward. It returns true if there is an open square in the specified direction from the square that the robot is in.

The AP CS Principles Exam uses a text-based and a block-based pseudocode for questions that involve code. The AP CSP reference sheet is provided during the exam describing this pseudocode. The AP CSP pseudocode for basic control structures compared to Thunkable blocks is shown below:

Function	Text Style	Block Style	Thunkable
Assignment	a ← expression
Display	DISPLAY(expression)
Expressions	a + b, a - b, a * b, a/b, a mod b
Selection (else optional)	IF (condition) { block of statements } ELSE { block of statements }
Condition	a = b, a ≠ b, a < b, a > b,a <= b,a >= b NOT(condition), (condition AND condition), (condition OR condition)
Repetition	REPEAT n times { block of statements } or REPEAT UNTIL (condition) { block of statements }

The robot navigation commands can be used within selection and repetition control structures like below:

REPEAT UNTIL ( GoalReached() ) { IF (CAN_MOVE(forward)) { MOVE_FORWARD() } }

Note that the curly brackets { } are used to indicate the start and end of a block of code, for example the repetition control structure. The parentheses () are used after a function name to indicate that it is a function and to give it any data it might need inside the parentheses.

Issues displaying the Buttons

You may encounter issues with displaying your Buttons when testing with either the in-window Preview or with the Thunkable Live App. Here are some suggestions to fix the display issues:

• Go to the Screen1 properties and click the toggle for Scrollable to change it to true.

• This fixes the buttons but somehow causes the Canvas to not display correctly.

• To fix the Canvas not displaying correctly:

• Change the Stage1 Height to 400 and Stage1 Width to 400.

• Change the Canvas1 Height to Absolute Size 400 and Canvas1 Width to 400.

• (We have found other dimensions to work other than 400x400, but I think they may depend on the device screen size.)

4.4.3. Summary

In this lesson, you learned how to:

Learning Objective AAP-2.K.a: For iteration: a. Write iteration statements.

Learning Objective AAP-2.K.b: For iteration: b. Determine the result or side-effect of iteration statements.

Learning Objective AAP-3.D: Select appropriate libraries or existing code segments to use in creating new programs.

4.4.4. Self-Check

Q-1: What is the name of the computer language that uses a turtle to implement drawing algorithms? Type your answer into the textbox (spelling counts).

Q-2: True or False? An algorithm is a precise sequence of statements that must be expressed in a computer language.

A. False

B. True

Q-3: Assuming that forward tells the Android to move forward by 10 pixels and turn tells it to turn right by 90 degrees, what shape would be drawn by this algorithm?

forward

forward

turn

forward

turn

forward

forward

turn

forward

turn

A. A circle

B. A rectangle

C. A right angle

D. A square

Q-4:

Given the following code segment, which value of x would cause an infinite loop?

REPEAT UNTIL (x > 0)

{

x ← x - 1

}

A. x = 1

B. x = 10

C. x = 0

4.4.5. Sample AP CSP Questions

Q-5:

The following question uses a robot in a grid of squares. The robot is represented as a triangle, which is initially in the bottom left square of the grid and facing right.

Consider the following code segment, which moves the robot in the grid.

Which of the following shows the location of the robot after running the code segment?

A.

B.

C.

D.

Q-6: The program segment below is intended to move a robot in a grid to a gray square. The program segment uses the procedure GoalReached, which evaluates to true if the robot is in the gray square and evaluates to false otherwise. The robot in each grid is represented as a triangle and is initially facing left. The robot can move into a white or gray square, but cannot move into a black region.For which of the following grids does the program NOT correctly move the robot to the gray square?

A.

B.

C.

D.

Q-7:

AP 2021 Sample Question: The following procedure is intended to return the number of times the value val appears in the list myList. The procedure does not work as intended.

Line 1: PROCEDURE countNumOccurences(myList, val)

Line 2: {

Line 3: FOR EACH item IN myList

Line 4: {

Line 5: count 0

Line 6: IF(item = val)

Line 7: {

Line 8: count count + 1

Line 9: }

Line 10: }

Line 11: RETURN(count)

Line 12: }

Which of the following changes can be made so that the procedure will work as intended?

A. Moving the statement in line 5 so that it appears between lines 2 and 3

B. Moving the statement in line 11 so that it appears between lines 9 and 10

C. Changing line 6 to IF(item = count)

D. Changing line 6 to IF(myList[item] = val)

Q-8: AP 2021 Sample Question: Consider the following procedure.

Procedure Call	Explanation
drawCircle(xPos, yPos, rad)	Draws a circle on a coordinate grid with center (xPos, yPos) and radius rad

The drawCircle procedure is to be used to draw the following figure on a coordinate grid.

Which of the following code segments can be used to draw the figure?

Select two answers.

A.

B.

C.

D.

4.4.6. Reflection: For Your Portfolio

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File > Make a Copy to make your own editable copy.