4.4. Logo Part I

Time Estimate: 90 minutes

4.4.1. Introduction and Goals

In this lesson you will design, implement, and test algorithms to draw simple shapes. For example, you will write an algorithm to draw a face made up of squares and lines like the one in the video below.

In our implementation of Logo, we’ve replaced the Turtle with an Android. Here are the drawing commands you can use:
  • The forward command moves the Android forward by 10 pixels.
  • The turn command causes the Android to turn right by 90 degrees.
  • The penUp and penDown commands puts the Android's pen on or off the canvas.
(Teacher Tube version)
Learning Objectives: I will learn to
  • use primitive Logo commands to draw simple shapes
  • define procedures to simplify the drawing process
  • use loops to replace repeated commands
Language Objectives: I will be able to
  • discuss loops and procedures as abstractions that reduce the complexity of a program
  • describe the functionality of an app using key vocabulary, out loud and in writing, with the support of vocabulary notes from previous lessons

4.4.2. Learning Activities

Introduction

Logo is a programming language that was invented in the 1960s by Seymour Papert primarily for educational use. Papert believed that we learn best when we are building our own knowledge and ideas – when we build tangible objects that help us create our own mental models to understand the world around us.

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 very sophisticated drawings, such as the pattern on the left.

Logo Commands

The Logo programming language consists of a set of primitive commands that control the turtle. You saw something like these commands in the Blockly Maze exercises that you did. Taken together these commands constitute an abstraction – a language – for drawing shapes. The App Inventor template below has these Logo Commands already written for you.

Existing code segments that you can use are often called libraries. A software library contains procedures that may be used in creating new programs. The use of libraries already written for you simplifies the task of creating complex programs. You can also write your own libraries of code to use in other App Inventor projects using the backpack feature to share them.

In this lesson we have deliberately created a fairly weak abstraction – one that lets you draw shapes, but only with some difficulty. As you're working on the shapes, think about how you would improve the drawing language; that is, help us think about a better abstraction for drawing shapes.

Tutorial

To get started, open App Inventor with the Logo 1 Template in a separate tab and follow along with the tutorial below. If the template does not open, download the .aia file, go to App Inventor and do File/Import and import in the downloaded .aia file. If you are using iOS companion, please change the Canvas Height property to Fill Parent instead of 100% so it does not cover the buttons.

When the template opens, you will see a lot of collapsed blocks.  DO NOT OPEN OR EDIT THESE BLOCKS!

You can either watch the video tutorial, read the text tutorial or use the short handout.

  (Teacher Tube version)

There are three basic types of control structures in designing algorithms: sequence, selection, and repetition. Just about any algorithm you can think of can be built using these three types of controls. As you saw in the tutorial, procedures and loops made drawing a square much easier than using a list of commands. Note the big difference between the two algorithms below. 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 repetition, a for-each counting loop, a much more practical and general approach. The for-each block in this case repeats the statements in its do-slot 4 times.

Exercises (Pair Programming)

After doing the tutorial above, you have drawn 20x20 square using a loop and then refactored the code to use procedural abstraction to create the procedure square20.

For these exercises below, before coding your solution in App Inventor, it would be a good idea to first write out the solution in pseudocode and discuss it with your coding partner. Download and print this graph paper to use when designing your algorithms in the following exercises.

  1. 40x40 Square: Design an algorithm for drawing a 40-by-40 square. Then implement your algorithm by defining a procedure named square40 that draws a 40-by-40 square. Then modify the ButtonDraw.Click handler so that it calls the square40 procedure. To simplify this algorithm, use a for-each loop to repeat the commands needed to draw a square.
  2. Line40: Define a procedure name line40 that draws a line of length 40. Test it by calling it from the ButtonDraw.Click handler.
  3. Refactor your square40 procedure to use a for-each loop and the line40 procedure 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.
  4. Triangle: Can you draw a triangle with this set of Logo commands? Discuss with your partner how the programmer who designed this Logo app could change some of the basic commands so that it would be possible to draw a triangle and other shapes.

  5. Draw a Face: Design an algorithm for drawing a face with a large square for the head, 2 small squares for eyes, and a line for the mouth, as shown below. Design and define any other procedures 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. You’ll have to use the penUp procedure to lift the Android 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 or on the board before trying to program it. Use your graph paper to help figure the distances.

    Once you’ve designed a correct algorithm, implement it by defining a procedure named drawFace that draws the face. Then test your code to make sure you got it right. Post a screenshot of your face drawing on your portfolio.

    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 procedure named drawFace and call it in the ButtonDraw.Click procedure. Keep testing and refining your algorithm until it correctly draws a face.
    • Abstraction: Once you can successfully drawn the face, refactor your code to make good use of procedures that break the face into parts, e.g., head, left eye, right eye, mouth, moves.
  6. Refactor your drawFace procedure by breaking it up into smaller procedures. 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-procedures will include the various penUp, penDown, and move commands to position the eyes and mouth correctly and to return the Android to its starting position (at the bottom left corner of the face). Remember: Ideally, your algorithms should leave the Android in the same state when it is finished drawing the head as when it started.

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 App Inventor blocks is shown below:

FunctionText Style Block StyleApp Inventor
Assignmenta ← expression
a ← expression
DisplayDISPLAY(expression)
DISPLAY expression
Expressionsa + b, a - b, a * b, a/b, a mod b
a + b
Selection (else optional) IF (condition)
{
   block of statements
}
ELSE
  {
   block of statements
}
IF condition
block of statements
ELSE
block of statements
Conditiona = 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
}
REPEAT n times
block of code
Repetition REPEAT UNTIL (condition)
{
   block of statements
}
REPEAT UNTIL condition
block of code

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

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

In the REPEAT UNTIL(condition) loop:

  • The code inside the loop is repeated until the boolean condition evaluates to true.
  • If the condition evaluates to true initially, the loop body is not executed at all.
  • There can be an infinite loop if the ending condition never evaluatea to true.
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 parenthesis () are used after a procedure name to indicate that it is a procedure and to give it any data it might need inside the parentheses. Some practice problems using these commands are below.

4.4.3. Summary

In this lesson, you learned how to:


4.4.4. Self-Check

4.4.5. Sample AP CSP Questions

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.

You have attempted of activities on this page