Unit 9: Sketch and Guess: Part 2

SKETCH & GUESS:

PART 2 In this lesson, you will
allow the Sketcher to
HOW TO DRAW A LINE IN THE APP
draw.
You’ll start coding on the SketcherScreen,
and make the drawing part of the app.
To draw something on the Canvas, you need to use the
when Canvas.Dragged block and the call Canvas1.DrawLine blocks.

The diagram below shows how to use coordinates to draw a line in the app. A line is drawn by
joining two points. Using Canvas1.DrawLine, you need to specify the position of the start point
(x1, y1) and the position of the end point (x2, y2).

Finger touches the screen

Finger moves on the screen

(5, 5)
dragged (20, 10)

prevX prevY
currentX currentY

If you want to draw a line in the app, you need to use prevX, prevY and currentX, currentY.
Below please work with your partner to fill in the blanks.
(5, 8) dragged
(3, 5)
dragged
(15, 10)
(2, 20)
prevX

prevY

currentX

currentY
 Unit 9: Sketch and Guess: Part 2

HOW TO DRAW A CURVE IN THE APP

A line is formed by connecting many dots. Each of the dots is represented by its
coordinate (x,y).

dragged
Point 2 Point 3

Point 1 Point 4
(50, 20) (100, 20)
(0, 50) (150, 50)

If you want to draw a curve in the app, you need to draw many lines, each with its own
prevX, prevY and currentX, currentY. Below please work with your partner to fill in the
blanks.

segment 1 segment 2 segment 3

(Point 1-Point 2) (Point 2-Point 3) (Point 3-Point 4)

prevX

prevY

currentX

currentY
 Unit 9: Sketch and Guess: Part 2

DRAW WHEN USER DRAGS ON THE CANVAS

1❏ Open your SketchAndGuess project.

2❏ Make sure you are in SketcherScreen.

Switch to the Blocks Editor.

3❏ From the Blocks panel, pull out Canvas1.Dragged and Canvas1.DrawLine blocks.

3
 Unit 9: Sketch and Guess: Part 2

startX and startY

SPECIFY THE START AND END POINTS mark where the user first
starts drawing. You will
continue to keep track of X,Y
4❏ Set the start point. as the user draws, so use
prevX, prevY to currentX,
currentY.
a

Hover your
mouse over the
prevX and pull out b
the get prevX

5❏ Continue to set the end point: x2 and y2

to currentX and currentY respectively.

4
 Unit 9: Sketch and Guess: Part 2

CLEAR THE CANVAS

6❏ Pull out a ClearButton.Click block and add a

Canvas1.Clear block to it.

7❏ Make sure you have Screen1 open.

a
Test your app using the MIT AI2 Companion.
Choose the “I want to draw” option and then
try drawing on the screen. Press the Clear
button to clear the drawing.
b

5
 Unit 9: Sketch and Guess: Part 2

TELL THE SKETCHER WHAT TO DRAW

Because this will eventually be a game with a Sketcher and a Guesser (or even multiple Guessers), the
app will require the Sketcher to press a button which will prompt them with a random item to draw.

❏
8 Make sure you are in the SketcherScreen and in the Blocks Editor.

❏
9 Initialize a new variable, and name it drawingOptions.

❏
10 From the Lists drawer, drag out a make a list block and click on the blue icon to add
more elements. Add 10 more items to the list for a total of 12 items. Snap to the initialize
block.

a c
 Unit 9: Sketch and Guess: Part 2

TELL THE SKETCHER WHAT TO DRAW (continued)

❏
11 Snap in blank Text blocks as items in the list. Type in words for different objects that can be
options for the Sketcher to draw. You can use the objects below, or choose your own objects.

❏
12 Create another new variable, and name it currentDrawing. Initialize it to a blank Text block. This
variable will be used to save a random item from the drawingOptions list that will be the object
the Sketcher will draw.
 Unit 9: Sketch and Guess: Part 2

PICK A RANDOM ITEM WHEN STARTBUTTON IS CLICKED

❏
13 Pull out a StartButton.Click block.

❏
14 Pick a random item from the drawingOptions list, then save it to the variable,
currentDrawing.

c f

e
 Unit 9: Sketch and Guess: Part 2

DISPLAY RANDOM ITEM TO DRAW

❏
15 Pull out a set DrawingLabel.Text block.

❏
16 Add a join block from the Text drawer
to display what to draw in the Label.
c

❏
17 Since the Sketcher is starting a new picture, clear the Canvas.
 Unit 9: Sketch and Guess: Part 2

TEST DRAWING OPTIONS

❏
18 Make sure you have Screen1 open.
Connect to the MIT AI2 Companion to test.

❏
19 Choose the “I want to draw” option.
When the SketcherScreen opens, press the New Picture button.
A random item should be displayed for the user to draw.
Try pressing the button again. Check that random objects to draw are displayed.
 Unit 9: Sketch and Guess: Part 2

COMPUTATIONAL THINKING CONCEPTS

Sketch And Guess Part 2

1. Sequences

2. Events

3. Naming/Variables

4. Manipulation of data and elementary data structures

11