Student Instructions

A New Way to Move

The moveForward() turtle command that we've used so far moves the turtle the same amount every time (25 pixels in fact). Similarly, turnLeft() turns the turtle to the left exactly 90 degrees. Today we are going to see how some functions can accept input, such as a number, to more exactly control behavior. For example, you can write moveForward(103) to move the turtle exactly 103 pixels if you like.

Do This:

How far is it to the top edge of the screen?

Run the program to see the new version of moveForward() in action. Then changing only the number supplied to moveForward(), move the turtle to the top edge of the screen. Experiment to find out the distance in pixels between where the turtle starts and the top edge of the screen.

Once you've found it, compare with a neighbor to see that you're seeing the same thing and click Finish to move on.

Note: There might be slight differences depending on whether you get the turtle to just touch the edge, or go off the screen entirely.

Student Instructions

Terminology: Parameter

When you have a command like: moveForward(100) we say that the moveForward() command accepts a parameter. And 100 is the value given or supplied to moveForward()'s parameter. Since this value can change, you will often see a written description for the command that looks something like moveForward(pixels) to indicate that the value supplied to moveForward()'s parameter should be the number of pixels you want it move.

The good old moveForward() command still exists. In fact it's the same command as moveForward(pixels). The "parameter-less" version of moveForward() simply supplies a default value to the parameter. We might also say that the moveForward() command has an optional parameter since you could call either moveForward() or moveForward(50) and it doesn't cause an error when you run the program.

NOTE: you can write your own functions that accept parameters, too! But we'll get to that in later lessons.

New Commands!

Check it out. The turtle toolbox now contains the parameterized versions of the turtle commands including turnLeft(angle) and turnRight(angle). Notice that penUp() and penDown() don't have parameters.

Do This:

Use the parameterized versions of the commands to draw a triangle with sides that are 100 pixels long.

Student Instructions

Documentation

As we move forward you are going to see more and more (and more!) commands added to the toolbox. What happens if you see a command and don't understand it, or you forget how it works? Don't worry, this happens to professional programmers all the time! No one actually memorizes long lists of commands. Most programming environments have ways to quickly look up documentation about the commands of the language you're using. Good news: App Lab has documentation too!

When you hover your mouse over a command in the block palette a bubble pops up with a quick reminder of what a function does, and what its parameters are. If you click "See examples", you will be taken to more detailed documentation of the command which includes code examples that you can even copy and paste.

More New Commands: Color and Width

Two powerful new commands have been added to the toolbox, penColor() and penWidth().

Read the documentation: Read through the documentation for penColor() and penWidth() which let you set the color and size of the pen your turtle uses to draw. The documentation for penColor() has a lot in it! For now just look at the named colors, things like "red", "green", etc. Don't worry, you'll get a lot of opportunities to practice with colors in a variety of ways. We're just getting started!

Do This:

Draw the square: Use pen color and width functions to draw the thick blue square shown below. The size of the square doesn't matter.

Student Instructions

Drawing with Dots

We've added a new command called dot().

Read the documentation for the dot() command.

Make a "snowman"

1. Set the pen color to some new color (we made ours pink)

   • Note: even if you just want the default dot color - black - explicitly set the color to black here.

2. Using that color, make a dot so big that it fills the screen.

3. In a different color, make 3 dots in a row, each one smaller than the next. (We made our dots white to look like a snowman)

You might want to go back to the documentation for penColor() to look up other colors to use.

Student Instructions

Hexadecimal Colors

In reading the documentation, you may have noticed that penColor() can accept colors in the hexadecimal format (e.g. "#AC9100"). Colors on websites will often be represented in this format. It's useful to know how to interpret and use this format when trying to duplicate colors in your own images.

Read the documentation: Review the documentation for penColor() and pay particular attention to how to define colors in hexadecimal.

Do This:

Draw the bullseye: Draw the bullseye below using a combination of penColor() and dot().

Hint: The sample image was created using three of the following hexadecimal colors: #00ABDC, #CC4400, #1188CC, #006699, #11CC00. Can you recall how hexadecimal color works to select the correct colors on your first try?

Remember: The hex colors must have quotes around them so penColor(“#FF0099”) not penColor(#FF0099).

Student Instructions

Multiple Parameters - Making Arcs

Many commands need more than one parameter to make sense. When a command needs more than one parameter, the parameters are separated by commas and the order of the parameters matters.

Two new commands have been added to the block palette, arcLeft() and arcRight() which both accept two parameters.

Read the documentation: Read the documentation for arcLeft() and arcRight().

Do This:

Draw a squiggly line:

Using arcLeft and arcRight along with the ones you have already learned draw a purple squiggle on a blue background. Feel free to use any of the methods for choosing colors you have already learned.

Hints:

• To make the figure exactly, you need to turn before calling arcLeft or arcRight to orient the turtle first.
• The parameters to arcLeft and arcRight are the same and they are multiples of 10
• The colors are "PowderBlue" and "Purple" - though you can use other colors if you like.

Student Instructions

Transparency - Red, Green, Blue, Alpha

There is another command that lets you set the pen color called penRGB(r,g,b,a).

• The first 3 parameters are for values (in the range 0-255) for the red, green, and blue channels.
• The 4th parameter a stands for "alpha". The "alpha channel" for color lets you set the level of opacity as a decimal value between 0 and 1 - it is interpreted as a percentage, so 0.5 equates to 50% opaque. For example: penRGB(113, 102, 160, 0.5).

Do This:

Read the Documentation: To figure out how to use penRGB() go read the documentation, paying special attention to the syntax used to give a command multiple values.

Draw the circles:

Use penRGB() and dot() to draw two overlapping circles as shown in the image.

Student Instructions

Moving Relative to the Screen

The turtle commands we've seen so far move the turtle relative to the turtle's location and direction. If you want to get the turtle to a specific position on the screen using only moveForward() or turnLeft(), you need to know the turtle's location beforehand.

Two new commands in the toolbox help resolve this issue. moveTo() moves the turtle to a location on the screen based on its X and Y coordinates. turnTo() turns the turtle in a specific direction. Together these commands can make many drawings easier to complete.

Do This:

Read the documentation: Read the documentation for moveTo() and turnTo(). Pay specific attention to how the coordinate system is arranged in App Lab as it is different from what you might have seen in a math class.

Draw the smiley: Use these new commands to help you draw the smiley face pictured below.

HINT: You can't really do this one without using penUp() and penDown().

Student Instructions

The Full Turtle API

We've added a few more commands to the toolbox. At this point you have access to every turtle command provided by App Lab. As we've already seen with our exploration of functions you can combine these commands to create more complex functionality, but at the lowest level all of your code will be making use of the set of commands provided by App Lab.

Code you write will always be based upon the commands that are provided by the programming language you are using. When several commands are provided in a logical chunk, like the set of turtle commands, we refer to them collectively as a library of functions. The total set of commands that a language provides access to is called the application program interface, or simply an API.

As you gain more experience you will gain familiarity with the API for the language you are using, but you will still want to return to the API documentation from time to time to remind yourself what functionality a language offers.

Congratulations, you've really come a long way as a turtle artist!

Do This:

Draw whatever you like! The only requirements are:

• use at least 3 different colors
• use moveTo

Explore the documentation for any new commands you see and use your skills as both an artist and user of API documentation to draw something of your own choosing.

If in doubt: try to re-create "I [heart] CS" drawing shown here.

Student Instructions

AP Practice - Scoring a PT Response

In this scenario imagine that you are scoring an AP Performance Task response. Below we show the student's submitted code as well as their written response for writing prompt 2d.

As a reminder, here is that prompt:

And here is the student written response that goes with the code shown at right:

Student response:
2d). The abstraction I have identified draws a heart in the program. The whole program draws a picture with turtle graphics that says "I [heart] CS" where the [heart] is actually a drawing of a heart shape. Because I am using the parameterized versions of these turtle functions it helps manage the complexity of the code. Without the parameters the drawing is achieve-able but would require many many more lines of code. For example: the command to arcRight(220, 30) - which moves the turtle in a 220-degree arc with a 30-pixel radius - is possible to do with a long series of repeated moveForward, and turnRight commands, possibly hundreds. By using the arcRight command I encapsulate in one line what the code should be doing rather than having to reason about hundreds of lines of code.

Use the scoring guide (shown below) to determine if the student should be awarded the point for each of the two criteria about abstractions (row 7 and 8)

You score it

Each row of the scoring guide one is worth one point, so response 2d is worth up to 2 points total. Should the student get 0, 1 or 2 points total?

Below explain how you would score it, and why you would or wouldn't award the point for each row. Cite the specific criteria in the scoring guide to justify your response.

Student Instructions

Student Instructions

Read the definitions provided below and then choose the best answer.

• Abstract Programming Inheritance - The idea that abstractions in languages get "passed down" in newer versions.

• Artificial Parameter Intelligence - The idea that function parameters should be intelligent enough to "know" what you want as a programmer.

• Application Program Interface - A well-documented library of functions provided in a programming language that helps to simplify complex programming tasks.

• Applied Power Implementation - A process by which functions are given extra override power related to parameters.

• Abstract Parameter Interface - A programming construct in which parameters are passed down through levels of abstraction.

Student Instructions

It is said that functions with parameters generalize the behavior of a more specific command and allow programmers to use functions instead of duplicated code. Explain what this means to you using the difference between turnLeft() and turnLeft(angle) as an example.

Student Instructions