DIGITAL DOODLE
Digital Doodle: Drawing App Using MIT App Inventor
- This tutorial will show you how to create an app using MIT App Inventor.
- The app draws a line on the screen as the user drags a finger around.
START A NEW PROJECT
- Go to Projects > Start new Project
NAME THE PROJECT
- Give a suitable name for your Project
SET THE SCREEN SO THAT IT DOES NOT SCROLL
- Select Screen1 under Components pane.
- From the Properties pane of Screen1, uncheck the box next to "Scrollable" setting.
ADD A CANVAS
- From the Drawing and Animation Palette, drag out a Canvas component on to Screen1.
CHANGE THE HEIGHT AND WIDTH OF THE CANVAS
- Under Components pane, select Canvas1.
- Under Properties of Canvas1, set both Height and Width properties to Fill parent.
THAT'S ALL FOR THE DESIGNER
- This basic app only needs a Canvas.
SWITCH TO BLOCKS EDITOR
- Switch to Blocks editor to program the app.
GET A Canvas.Dragged EVENT BLOCK
- from the Blocks, click on Canvas1.
- From the drawer, pull out when Canvas1.Dragged event.
GET A Canvas.DrawLine CALL BLOCK
- In the Canvas1 drawer, pull out call Canvas1.DrawLine method block.
USE THE GET AND SET BLOCKS FROM THE DRAGGED BLOCK TO FILL IN THE VALUES FOR THE DRAW LINE BLOCK
- Mouse over the parameters of the Canvas1.Dragged block to pull out the get blocks (prevX, prevY) and (currentX, currentY)that you need.
- (Mouse over them, don't click on them.)
TEST THE APP
- Under Connect, click on AI Companion.
- Scan/Enter the code to live test the app.
EXTEND THE APP
Here are some ideas for extending this app. You can think of many more!
- Change the color of the ink (and let the user pick from a selection of colors).
- Add a button to clear the screen.
- Clear the Screen when phone is shaking.
- Change the background to a photograph or picture. Let the user draw dots as well as lines (hint: Use DrawCircle block).
- Add a button that turns on the camera and lets the user take a picture and then doodle on it.
Comments
Post a Comment