Paint Pot - B

Technical Terminology

ASCII - ASCII is short for American Standard Code for Information Interchange is a character encoding scheme in which each character is represented by a 7-bit (originally) or 8-bit binary sequence. For example, the ASCII sequence 01000001 represents the letter 'A'
bit - A bit is short for 'binary digit'
bitmap - A bitmap is a type of memory organization or image file format used to store digital images
byte - One byte is 8 bits
lossless compression - A lossless compression algorithm is one in which no data are lost; the original data can be completely recovered
lossy compression - A lossy compression algorithm is one in which some data are lost; the original data cannot be completely restored
pixel - A pixel, short for 'picture element', is a single physical point in a raster image
run length encoding - A compression algorithm that represents an image in terms of the length of runs of identical pixels

Use the Color Picker or Color Slider to create your own color, then code a new button to use that color using the make color block. Note: you need a list of 3 numbers for make color to work; RGB, Red Green Blue is the order.

Minimum number for each is 0, and maximum number is 255.

Varying the Size of the Dots

Nice work! Now try out your app and test that it works. Do you notice any limitations? To start, did you notice that all of the paint dots have the same radius: 5 pixels. Let's take another look at the DrawCircle method that we used to draw a dot whenever the canvas was touched. As you see here, the radius is always set to 5. Every dot will have a radius set to 5. The radius will never change!

Programmers refer to the number 5 here as a constant or a literal value because its value never changes: it is literally 5. Can we make this more flexible? How can we enable the app to draw dots of different sizes?

Variable Abstraction

Let's replace the number 5 in the above block with a symbol, such as dotSize, that can represent any value.

Now, when a dot is painted, its radius will be whatever value that dotSize represents. If we set dotSize's value to 5, then it would draw a dot of radius 5. If we set it to 2, it will draw a dot of radius 2. And so on. So, rather than just be a constant, such as 5, dotSize is an abstract variable that can stand for any value. This is a simple example of the data abstraction principle.

Drawing Different Sized Dots

How might we use this new found ability to enable our app to draw different sized dots? One way would be to add two Buttons to the app, one labeled '+', which adds 1 to dotSize whenever it is clicked, and the other labeled '-', which subtracts 1 from dotSize whenever it is clicked. It might also be nice to add a Label Component that will display the current value of dotSize and to update its value whenever one of the buttons is clicked.

In other words, we want to change our UI so that it has the following additional components.

Add the following UI components:

Creating and Using Global Variables

In App Inventor, dotSize is an example of a global variable. You can think of a variable as a storage container that can store any value and it can be used globally throughout the app. Global variables have to be created and given an initial value using a special block that is found in the Variables drawer of the Toolbox. (If you look in that drawer you will find that App Inventor also has local variables, which we will learn how to use later.)

When creating a global variable you should give it a unique, but valid, name. Variables in App Inventor, as in many other computer languages, must be strings of letters and digits (no quotes) and cannot start with a digit. An example of an invalid name would be 27seconds.

App Inventor also has blocks in the Variables drawer to set and get the value of a global variable. For the setter block we can set the value of dotSize to whatever number we put in its to-slot. By using a getter block we can get dotSize's value and plug it into any slot where it will fit: just like putting together a jigsaw puzzle.

Add 1 to a Variable

Variables that store numbers, such as dotSize, can be used in arithmetic. To see this let's pull an addition block and a number block out of the Math drawer.

(The bright blue circle on the addition block is a drop-down menu that lets you change the block so you can add more than two values with one block. The white '+' sign in the middle of the two open slots is the plus operator.

Notice that the open slots the addition block has the correct shape for plugging in either a value (such as 0) or a variable (such as dotSize).

We can create an expression whose value is (dotSize + 1). Since we have initialized the dotSize to 5, then after changing the number block to a 1, then the resulting expression would have the value 6, (dotSize + 1) or (5 +1).

Finally, this expression block can be plugged into any slot where a value can be plugged. For example, we can plug it into dotSize's setter block.

This is an App Inventor example of an assignment statement. The value of dotSize is set to the result of the expression which is its current value + 1. dotSize will now have the value 6.

In text programming languages like Java or C, the same code would be written as: dotSize = dotSize + 1;

On the AP CS Principles exam, the same code would be written as:

In this example we will show how to use a single label that concatenates or joins together two or more separate pieces of text called 'strings'. In this case, concatenate the prompt and the value.

Coding the Plus Button

Whenever the plus ('+') button is clicked it should perform the following operations:

Add 1 to the global dotSize.
Concatenate the prompt ("Dot Size = ") and the global dotSize using a join block from the Text drawer.
Display dotSize's value in the LabelDotsize. To do this we set the label's Text property.

Here's what the block should look like. It has two statements. First it adds 1 to dotSize: we saw how to do that above, then it sets the label's Text property to the string "Dot Size = dotSize" where the variable dotSize is replaced by its current value when the app runs.

Try coding the ButtonMinus on your own.

Testing the App

Test your app with the following inputs or actions. See if your app's actual output/performance match the expected outputs.

Summary

Here are some new App Inventor blocks that you used in this lesson and their AP pseudocode versions for the CSP AP exam.

Report abuse