ACS-1805 Introduction to Programming

Size: px

Start display at page:

Download "ACS-1805 Introduction to Programming"

Cuthbert Sherman
5 years ago
Views:

1 ACS-1805 Introduction to Programming Chapter 02: PaintPot

2 PaintPot This tutorial introduces the Canvas component o for creating simple two-dimensional (2D) graphics PaintPot o an app that lets the user draw on the screen in different colors and then update it The user can then take a picture and draw on that o On a historical note PaintPot was one of the first programs developed to demonstrate the potential of personal computer as far back as the 1970s Back then, making something like this simple drawing app was a very complex task and the results were pretty unpolished o But now with App Inventor anyone can quickly put together a fairly cool drawing app o This is a great starting point for building 2D games

3 What You ll Learn This chapter introduces the following concepts o Using the Canvas component for drawing o Handling touch and drag events on the device surface o Controlling screen layout with arrangement components o Using event handlers that have arguments o Defining variables to remember things That the user has chosen for drawing like the dot size

4 Change the Name Change the screen title to PaintPot The different names o The name you choose for your project as you work on it This will also be the name of the application when you package it for the device o The component name You ll see in the Components panel You can t change the name of this initial screen in the current version of App Inventor o The title of the screen This is what you ll see in the app s title bar. This starts out being the same as the component name But you can change it, as we just did for PaintPot

5 Visual Components You ll use these visual components o Three Button components for selecting red, blue, or green paint o A HorizontalArrangement component for organizing the three buttons o One Button component for wiping the drawing clean o Two Button components for changing the size of the dots that are drawn o One Button component for invoking the camera to take a picture o Another HorizontalArrangement component for organizing the above four buttons

6 Create the Color Buttons Drag a Button component onto the Viewer ochange its Text attribute to Red omake its BackgroundColor red. oclick Rename to change its name from Button1 to RedButton Note that spaces aren t allowed in component names Similarly make two more buttons for blue and green oname them BlueButton and GreenButton oplace them under the red button vertically

7 Why Rename the Buttons So we can use more meaningful names othis makes your projects more readable oit will really help when you move to the Blocks Editor and must refer to the components by name In this book, we ll use the convention of having the component name end with its type

8 Using Arrangements for Better Layouts For this app we want the buttons all lined up side by side o across the top of the screen o You do this using a HorizontalArrangement component Drag out a HorizontalArrangement component from the Palette s Layout drawer o Place it under the buttons. o Change the Width property of the HorizontalArrangement to Fill parent so that it fills the entire width of the screen

9 Using Arrangements for Better Layouts Move the three buttons one by one into the HorizontalArrangement component You ll see the three buttons indented under the HorizontalArrangement component in the list of project components o This indicates that the buttons are now subcomponents of the HorizontalArrangement component You can center all the buttons on the screen by changing Screen1 s AlignHorizontal property to Center

10 Adding the Canvas Drag a Canvas component from the Palette s Drawing and Animation drawer onto the Viewer ochange its name to DrawingCanvas oset its Width to Fill parent so that it will span the entire width of the screen oset its Height to 300 pixels This will leave room for the two rows of buttons oset the BackgroundImage of the DrawingCanvas to the kitty.png file oset the PaintColor of the DrawingCanvas to red

11 Arranging the Buttom Buttons Drag out a second HorizontalArrangement o Place it under the canvas Drag two more Button components onto the screen o Place them in this bottom HorizontalArrangement o Change the name of the first button to TakePictureButton Change its Text property to Take Picture o Change the name of the second button to WipeButton Change its Text property to Wipe" Drag two more Button components into the HorizontalArrangement o Place them next to WipeButton o Name the buttons BigButton and SmallButton o Set their Text to Big Dots and Small Dots

12 Add A Camera Componet Drag a Camera component from the Media drawer into the Viewer oit will appear in the non-visible component area

13 Adding Behaviors to the Components Add the Touch Event to Draw a Dot odrag the when DrawingCanvas.Touched block to the workspace The block has parameters for x,y, and touchedsprite These parameters provide information about the location of the touch Drag out a call DrawingCanvas.DrawCircle command oplace it within the DrawingCanvas.Touched event handler

14 Adding Behaviors to the Components othree sockets for the arguments we need to plug in x, y, and r The x and y arguments specify the location where the circle should be drawn r determines the radius oyou ll plug in the x and y values from DrawingCanvas.Touched Drag get blocks out for the x and y values and plug them into the sockets in the DrawingCanvas.DrawCircle block ospecify the radius r (to 5)

15 Adding Behaviors to the Components Add the Drag Event That Draws a Line othe difference between a touch and a drag A touch is when you place your finger on the DrawingCanvas and then lift it without moving it A drag is when you place your finger on the DrawingCanvas and move it around while keeping it in contact with the screen

16 Adding Behaviors to the Components odrag the when DrawingCanvas.Dragged block to the workspace. The DrawingCanvas.Dragged event comes with the following arguments: startx, starty: the position of your finger at the point where the drag started currentx, currenty: the current position of your finger prevx, prevy: the immediately previous position of your finger draggedsprite: a Boolean value, it will be true if the user drags directly on an image sprite

17 Adding Behaviors to the Components odrag the call DrawingCanvas.DrawLine block into the DrawingCanvas.Dragged block The DrawingCanvas.DrawLine block has four arguments two for each point that determines the line (x1,y1) is the starting point, whereas (x2,y2) is the end Drag out get blocks for the arguments you need A get prevx and get prevy should be plugged into the x1 and y1 sockets A get currentx and get currenty should be plugged into the x2 and y2 sockets

18 Adding Behaviors to the Components Change colors o Open the drawer for RedButton Drag out the when RedButton.Click block o Open the DrawingCanvas drawer Drag out the set DrawingCanvas.PaintColor Place it in the do section of RedButton.Click o Open the Colors drawer Drag out the block for the color red Plug it into the set DrawingCanvas.PaintColor to block o Repeat steps 2 4 for the blue and green buttons o Set up is WipeButton Drag out call DrawingCanvas.Clear and place it in the WipeButton

19 Adding Behaviors to the Components Let the User Take a Picture oopen the TakePictureButton drawer Drag the when TakePictureButton.Click event handler into the workspace ofrom Camera1 drag out call Camera1.TakePicture Place it in the TakePictureButton.Click event handler ofrom Camera1 drag the when Camera1.AfterPicture event handler into the workspace

20 Adding Behaviors to the Components ofrom DrawingCanvas, drag the set DrawingCanvas.BackgroundImage and place it in the Camera1.AfterPicture event handler. ocamera1.afterpicture has an argument named image It s the picture that was just taken oyou can get a reference to it by using a get image block for the image argument from the Camera1.AfterPicture block Plug it into set DrawingCanvas.BackgroundImage

21 Adding Behaviors to the Components Changing the Dot Size o In the Blocks Editor, from the Variables drawer of the Built-in blocks, drag out an initialize global name to block o Within the initialize global name to block, change the text name to dotsize o Initialize the dotsize to 2 by creating a number 2 block o Drag out a get block from the initilize global dotsize o Go to the DrawingCanvas.DrawCircle block drag the number 5 block out of the r slot, and then place it into the trash. o Replace it with the get global dotsize block

22 Adding Behaviors to the Components ochanging the Value of dotsize Drag out a when SmallButton.Click event handler from the SmallButton drawer. Mouse over the dotsize within the initialize global block and drag out the set global dotsize to block editor Plug it into SmallButton.Click. Create a number 2 block and plug it into the set global dotsize to block Make a similar event handler for when BigButton.Click, but set dotsize to

23 The Finished Project

PaintPot. Figure 2-1. The PaintPot app

PaintPot. Figure 2-1. The PaintPot app Chapter 2 PaintPot This tutorial introduces the Canvas component for creating simple, two-dimensional (2D) graphics. You ll build PaintPot, an app that lets the user draw on the screen in different colors,