3.2. Paint Pot Tutorial¶

Time Estimate: 90 minutes

3.2.1. Introduction and Goals¶

Paint Pot is a “finger painting” app. It simulates dipping your finger in a pot of a paint then drawing with it on a canvas. The app uses buttons to change the paint colors and MIT App Inventor’s touch and drag event handlers to draw circles and lines on the canvas.

(TeacherTube Version)

Learning Objectives: I will learn to

follow a tutorial to create the PaintPot app
deepen my understanding of event-driven programming
learn how to use a variable to make a program more general

Language Objectives: I will be able to

explain the result of programming statements that include variables and assignments
describe how a global variable is an abstraction
use target vocabulary, such as variable, assignment, expression, operator, and pseudocode while describing app features and User Interface with the support of concept definitions and vocabulary notes from this lesson

3.2.2. Learning Activities¶

Tutorial Part 1: Painting and Drawing on a Canvas

To get started, open MIT App Inventor with the Paint Pot Template in a separate tab and follow along with the following video or your teacher.

Q-2: By default, when you add components to the MIT App Inventor Viewer they are laid out ___________.

Vertically
Horizontally
If it were easy, you wouldn’t be learning anything!
Diagonally
If it were easy, you wouldn’t be learning anything!
Randomly
If it were easy, you wouldn’t be learning anything!

Q-3: Which value would you set the Width property to if you want your component, e.g., a Button, to fill its container?

Automatic
Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
Fill parent
Fill container
Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
Max pixels
Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.

Q-4: Which of the following would be a good name for a button whose purpose was to allow the view to refresh the screen?

Button1
Don’t worry, it’s hard! Let’s go back and try it again.
ButtonOne
Don’t worry, it’s hard! Let’s go back and try it again.
ButtonRefresh
B1
Don’t worry, it’s hard! Let’s go back and try it again.
RefreshButton

Tutorial Part 2: Varying the Size of the Dots

Watch the video tutorial below or click here for the text version of the tutorial.
(TeacherTube version)

AP CSP Pseudocode: Variables and Assignment Statements

A variable provides a way to name a memory location in your program to hold different values. It is a data abstraction that exists in all programming languages. In MIT App Inventor, we set up a variable using the initialize global variable block. The get block is used to get the variable's current value whenever needed in the program. The set block is used to assign or change the value of the variable.

The AP CS Principles Exam does not have a designated programming language. It uses pseudocode which is a cross between computer code and everyday English. Pseudocode is less precise than actual computer code, such as Java or Python or MIT App Inventor, but more precise and less wordy than everyday English. The AP CSP Reference Sheet is provided during the exam to help you understand the AP pseudocode format used in the exam. It includes two pseudocode styles: text-based and block-based.

In the College Board AP CSP exam, MIT App Inventor set blocks are called assignment statements and are represented as the left-pointing arrow (←). The following text and block style pseudocode is used to assign values to variables:

Function	AP Text	AP Block	MIT App Inventor
Assignment:	a ← expression	a ← expression

The DISPLAY statement is used to display variable values or the value resulting from mathematical expressions like (a+b)/2. Expressions are made up of values, variables, math operators, and sometimes mathematical procedures like getting a random number or squaring a number. In mathematical expressions, the operators * for multiplication, / for division, and the mod operator (remainder after division) are done before + and - like in math, unless there are parentheses that for example tell the computer to do (a+b) first before dividing by 2. Notice that * is used for multiplication instead of x, because x would get confused with a variable name. Expressions are evaluated to produce a single value.

Function	AP Text	AP Block
Display:	DISPLAY(expression)	DISPLAY expression
Expressions:	a + b, a - b, a * b, a/b	a + b

For example, here is AP style pseudocode to set the dotsize variable to 5 and then increment it (add one to it). The variable dotsize will have the value 6 after these two lines of code are executed. The value stored in a variable will be the most recent value assigned.

Function	AP Text	AP Block	MIT App Inventor
Set dotsize to 5	dotsize ← 5	dotsize ← 5
Increment dotsize	dotsize ← dotsize + 1	dotsize ← dotsize + 1

Some exercises involving AP pseudocode for assignment are below. More complex AP pseudocode will be shown in Unit 4.

3.2.3. Summary¶

In this lesson, you learned how to:

3.2.4. Self-Check¶

Vocabulary

Here is a table of some of the technical terms we've introduced in this lesson. Hover over the terms to review the definitions.

variable
assignment
expression

operator
pseudocode

Check Your Understanding

Complete the following self-check exercises.

Q-8: Which of the following would be a valid MIT App Inventor variable name?

5
Mistakes are welcome here! Try reviewing this; the value 5 is number. Numbers cannot be used as variable names. Try again
-5
Mistakes are welcome here! Try reviewing this; the value -5 is number. Numbers cannot be used as variable names. Try again
"user name"
Mistakes are welcome here! Try reviewing this; the text "user name" is a text value. Text values cannot be used as variable names.
userName
That's correct. Variable names are alphanumeric symbols that must begin with a letter and can contain any combination of letters and digits. Other examples would be name5, bigDot, passwd, smallDot.

Q-9: A variable is an abstract symbol that refers to some particular value. Which of the following symbols is a variable?

10
Mistakes are welcome here! Try reviewing this. 10 is a number. It is a value not a variable.
paintBrush
Yes, paintBrush is an abstract symbol for some particular value -- although we don't know what value it is referring to here.
"hello"
Mistakes are welcome here! Try reviewing this. "hello" is a text value. It is not a variable. Text values are always represented in quote marks.
true
Mistakes are welcome here! Try reviewing this. true is a boolean value. So it cannot be used as the name of a variable. The other boolean value is false.
x
Yes. x is an abstract symbol that could be used for a variable name. We don't know what value it is referring to here.

Q-10: Suppose you initialize dotsize with the block

Which of the following blocks would you use to change the value of dotsize?

OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this. This getter block, , can only be used to 'get' the variable's current value. It cannot be used to change its value.
Yes, a setter block, , is the correct block to use to change or 'set' a variable's value.
OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this. The block can only be used to create and initialize a variable. It cannot be used to change its value.
None of the above.

Q-11: What value will the variable dotsize have after the following sequence of blocks are executed?

|blank|

Q-12: Using a variable is an example of abstraction because

a variable is more general and more abstract than a specific value such as 5.
True. A variable, such as dotsize is more abstract than a value such as 5 because it can represent many different values.
using a variable instead of a specific value makes an app more generally useful.
True. As we saw with dotsize using a variable made the program more useful.
a variable is an abstract symbol that can represent lots of different values.
True. As we saw with dotsize a variable can take on many different values during the course of a program.
using a variable instead of a specific value makes an app more vague.
Let me add new information to help you solve this. Variables are more general and more abstract, but that's not the same as being vague. We can always determine precisely what value a variable represents during the course of a program.

Q-14: What does the following AP CSP pseudocode display? Remember to trace through the code keeping track of the values in a and b after each line of code.

2 2
1 1
2 3
3 2
Yes, that's correct. At first a is 1 and b is set to a which is 1. Then, we add 1 to b and it becomes 2. Then, a adds b (which is currently 2) to its value (which is currently 1) and becomes 3.

3.2.5. Reflection: For Your Portfolio¶

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File/Make a Copy to make your own editable copy.

You have attempted of activities on this page