O'Reilly logo

App Inventor by Ellen Spertus, Liz Looney, Hal Abelson, David Wolber

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 2. PaintPot

image with no caption

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, and then update it to allow him to take his own picture and draw on that instead. On a historical note, PaintPot was one of the first programs developed to demonstrate the potential of personal computers, as far back as the 1970s. Back then, making something like this simple drawing app was a very complex undertaking, and the results were pretty unpolished. But now with App Inventor, anyone can quickly put together a fairly cool drawing app, which is a great starting point for building 2D games.

The PaintPot app
Figure 2-1. The PaintPot app

With the PaintPot app shown in Figure 2-1, you can:

  • Dip your finger into a virtual paint pot to draw in that color.

  • Drag your finger along the screen to draw a line.

  • Poke the screen to make dots.

  • Use the button at the bottom to wipe the screen clean.

  • Change the dot size to large or small with the buttons at the bottom.

  • Take a picture with the camera and then draw on that picture.

What You’ll Learn

This tutorial introduces the following concepts:

  • Using the Canvas component for drawing.

  • Handling touch and drag events on the phone’s surface.

  • Controlling screen layout with arrangement ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required