Unit 3: Creating Graphics & Images Bit by Bit

The Paint Pot app

A computational model of finger painting, focuses on MIT App Inventor's drawing and painting features and related topics from the CS Principles framework.

What does this unit have in store for programming and new concepts?

This unit extends your mobile programming toolkit to several new MIT App Inventor components and introduces a number of new programming concepts, including the concepts of variables, list and data abstraction.

Specifically, what do they wanna explore with us in terms of apps and concepts?

Introduces two other apps: Map Tour app, which provides a first introduction to lists, and Map Tour with TinyDB, which demonstrates how to incorporate external data and location into a mobile app

App inventor coordinate system

One for the Canvas (pixel-based, with (0,0) at the upper-left) and one for the Map component (GPS coordinates like latitude and longitude.

What is another thing to further our understanding of learned before?

The binary number system and be introduced to the idea of a bit as the fundamental unit of data.
Through a number of hands-on and interactive activities, you will explore how bits are used to represent images and how redundant parity (the fact of being even or odd) bits can be used to detect simple data transmission errors.

Function in CS

In computer science, this is a named, self-contained block of code that performs a specific task and can be called multiple times to reuse code and break down complex problems into smaller, manageable pieces. It typically accepts input data (parameters), execute a series of instructions, and may return an output value to the part of the program that called it.

Argument in CS P

A value or expression that is passed as input to a function or procedure. It provides specific data for the function or procedure to work on.

What does the paint pot app use for coding?

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.

What is one new concept that The Paint Pot app uses?

Variables

A variable

Provides a way to name a memory location in your program to hold different values; an abstract named storage location that holds a value that can be referred to and changed during the execution of a program

What is a variable considered as?

A abstract symbol; a data abstraction that exists in all programming languages

Why is using a variable an example of (data) abstraction

Using a variable instead of a specific value makes an app more generally useful.
A variable is more general and more abstract than a specific value such as 5.
A variable is an abstract symbol that can represent lots of different values

A regular variable (often a local variable)

A variable that is defined within a specific block of code, like a function, and is only accessible within that block, existing only during the time that block is executing

A global variable

A variable that is accessed in multiple scopes (possibilities, opportunities); accessible and can be modified from any part of a program, so anywhere, existing for the entire program's lifetime.

Another way to think of a global variable

As a variable as a storage container that can store any value and it can be used
globally (
operates or applies through the whole of a program) throughout the app

What do we do with global variables, like in app inventor?

Set up a variable using the initialize global variable block. The get and set block is used whenever we wanna make a command with the value in the variable block for the program; get its current value or set its value to something else

Initializing global variable block

These variables need be initialized which is to set the value or put in the condition appropriate to the start  or to set (something in a computer program) to a starting position, value, or configuration, before they can be used.

Initialize global variable block functions

Does three things: creates the variable, gives it a name, and sets its initial value.

What are variable names?

They are (can be unique) alphanumeric symbols that must begin with a letter and can contain any combination of letters and digits.

Naming variables

Must be strings (sequence) of letters and digits (no quotes) and cannot start with a digit. An example of an invalid name would be 10seconds. This rule is in App Inventor, but in as many other computer languages. While the special characters are not allowed, _ and . are, but it depends on the language.

String

A sequence of characters that can be stored in a variable or list

Substring

Part of an existing string

The get block (for variables)

Used to get the variable's current value whenever needed in the program

The set block (for variables)

Used to assign or change the value of the variable

The AP CS Principles Exam uses

Pseudocode, two pseudocode styles: text-based and block-based.

Assignment

Sets a variable to a value or a mathematical expression

Expression

A Mathematical statement that involves values, variables, and operators for example (a+b)/2, and sometimes mathematical procedures like getting a random number or squaring a number. These are evaluated to produce a single value.

Operator

Symbols like +,-,*,/ used for addition, subtraction, multiplication, division

College Board AP CSP style for exam vs. MIT App Inventor: Assignment

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.

College Board AP CSP style pseudocode block and text for exam: Display and Expressions

The DISPLAY statement is used to display variable values or the value resulting from mathematical expressions

College Board AP CSP style pseudocode block and text for exam vs. vs. MIT App Inventor blocks: Paint Pot app example

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.

UI two types of
Components

Basic components and Screen Arrangement component

a
Setter block

To set, or change, the value of the (UI components) property and has a
to slot
that looks like a jig-saw piece where you plug in an appropriate value for the property
Ex: The value of the Canvas’s PaintColor property whenever one of the color buttons is clicked

App Inventor Coordinate System: Canvas

Used for where the user does anything on the Canvas. The x and y (x,y) are the coordinates of the point(s) at which they touch it. The top left corner of the Canvas is coordinates (0,0) and each pixel across and down increases the (x,y) coordinates.

Getter Blocks

Expressions that 'get' or contain the current value of the property

What does programmers think that the number is known as?

A constant or a literal value since its values never change, take it for example of 5.

Which of the following symbols is a variable?

x
paintBrush (b/c “paintBrush” is a broad representation for something more specific)

Variables store numbers

This can be used in arithmetic math and instead of or in addition of numbers, expressions can be plugged or attached to variables just the same as a value

Which value would you set the Width property to if you want your component, e.g., a Button, to fill its container or bounded area

Fill parent

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

Vertically

Ex: 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.
a ← 1 (Set a to 1)
b ← a (Set b to the current value of a)
b ← b + 1 (Add 1 to b)
a ← a + b (Set a to be the current value of a + b)
DISPLAY(a)
DISPLAY(b)

3 2

A bug in computer programming or computer bug

An informal term for error in computer hardware or software -- the term was coined by Grace Hopper. Any error or defect, that prevents the app from working the way it is supposed to.

Example of a bug

The value of dot size will eventually become negative and the dot won’t even appear at 0, so knowing this, at negative it will definitely not show, and it is not needed then.

Debugging

The process of removing errors from computer hardware or software.

If Statements

Selection with these is used in every programming language.

A three way or even an unlimited number of choices of selection

We usually use if/else blocks to make a two way choice, but you can make this that is nested in else if statements, that goes before the else, and can include as much as you want.

Example of using else if in the if else block

The block to the side will print out "Excellent" if your score is greater than 10, "Good job!" if your score is greater than 5, or "Keep Trying". If the first condition is false (for example if score is 2), it will fall down to the next condition and so on until it reaches that last else

Some conditional statements can be written as ___________.

Equivalent Boolean expressions or vice versa. For example,

Text-based and a block-based pseudocode

The AP CS Principles Exam uses both of these for questions that involve code.

The curly brackets { }

Used in AP text pseudocode (and in many text-based programming languages) to indicate the start and end of a block of code

Relational operators and Boolean

=, ≠, <, >,<=, >= are used inside if statements to compare variables with values or mathematical expressions, and they evaluate to a (true, false)

Trick for telling < and > apart

Think of a number line and think of < and > as arrows; < (less than) points towards 0 and smaller numbers on the number line and > (greater than) points towards the larger numbers on the number line

Boundary Value Analysis (BVA)

A technique where when testing software, test the critical values or boundary values (not any of the middle values)–both valid and invalid values at the extremes ends of a range of legal values.

Why is it important to test boundary values in doing the BVA technique?

Most software defects occur at the extreme of valid and invalid input ranges. In systematically testing values at, just below, and just above defined boundaries, it can uncover these common error zones, enhancing system reliability and robustness

Example of BVA testing: In an app where the user enters a number for the month of the year, what would be appropriate boundary values to check?

0 and 1, also 12 and 13,

What would the following code print out if the score was 6?

Getting better!

AP 2021 Sample Question: In a certain country, a person must be at least 16 years old to drive a car and must be at least 18 years old to vote. The variable age represents the age of a person as an integer. Which of the following expressions evaluates to true if the person is old enough to drive but not old enough to vote, and evaluates to false otherwise?
I. (age ≥ 16) AND (age ≤ 18)
II. (age ≥ 16) AND (NOT(age ≥ 18))
III. (age < 18) AND (NOT(age < 16))

II and III only

AP 2021 Sample Question: The following code segment is intended to set max equal to the maximum value among the integer variables x, y, and z. The code segment does not work as intended in all cases. Which of the following initial values for x, y, and z can be used to show that the code segment does not work as intended?

x = 3, y = 2, z = 1

P 2021 Sample Question: In the following statement, val1, val2, and result are Booleanvariables.
Which of the following code segments produce the same result as the statement above for all possible values of val1 and val2?

What would the following code print out if the score was 10?

Going strong!"

When you use the Camera component to take a picture as the Canvas background, explain why the picture goes away when the app is restarted? What do you think could be done to prevent the picture from disappearing when the app is restarted?

It is stored in the RAM (random access memory) and it is temporary memory storage. When the app is closed or the phone is turned off, the content in the temporary storage is cleared out, causing the picture to be lost. To prevent this, save the picture to a more permanent storage location, in the hard drive/external memory card or internal storage, so it is in permanent memory, and retrieve it from there when the app is opened again

Analog

Refers to data with values that change continuously, or smoothly, over time like sound and music files

Sampling analog data

Refers to measuring values of the analog signal at regular intervals (usually in time or space) called samples in order to digitize it into a binary representation

Example of Sampling analog data

The purple lines and the green lines represent the digital sample that approximates the analog curve. The purple sampling rate is very low…there are only 3 samples taken to approximate that part of the orange curve. The blue sampling rate is much higher…there are 15+ samples taken to better approximate the curve which is why the green lines more smoothly reflect the curve than the purple lines

One of the things that bits and binary number, 1 and 0, can represent

Images

Image compression

A type of data compression which can reduce the size (number of bits) of transmitted or stored data

One image representation and compression technique

Run-length encoding (RLE)

Run-length encoding (RLE)

A compression algorithm that represents an image in terms of the length of runs of identical pixels

A pixel

Short for a picture element, a single point in a graphic image.

What does the RLE image compression illustrate?

Some of the ways that images and other data are represented with binary numbers

RLE compression for black and white pictures and pixels

Although, this technique works well, efficiently with those two common colors and it is why they known to use it for that, but it is not limited to it. It is as efficient and effective with other simple graphics with large, solid areas of color.

What does the effectiveness, efficiency, and conciseness depend on with using RLE compression technique?

It depends on the repetitiveness of the data, not on the number of colors, whether the image contains solid colors or with many shades. It will still work with complex photographs and images with many shades, but it's far less effective

Runs in RLE as for black and white

# white pixels, # blacks, # whites, … within a row # of many rows of pixels

What is RLE image compression an example of?

Lossless
compression

What is the lossless compression and/or RLE compression good for (with white and black runs)?

Images with lots of whitespace.
E.g., Fax images
Used in BMP (bitmap) images

A bitmap

A type of memory organization or image file format used to store digital images.

Lossless Compression

Original image can be perfectly reconstructed from the compressed data
Good for medical, archival images.
Used in BMP (bitmap) images

Lossy Compression

Some data may be lost during compression that can’t be recovered, and cannot be converted back into the image

Does lossy compression affect camera images?

It does affect camera images quality, but it is Ok for camera images for us where the lost data cannot be perceived by the human eye.

Example of a lossy compression

JPEG images

How much data is it going to be in compressed image versus original image?

Well, it depends on the image (black and white vs. color) and how many bits (the data) per pixel (with addition to other data to include from the image).

How is the amount of data between the compression and the original image important?

The amount of data in the compression has to be less than the original image, since compression is for reducing the amount of storage, data taking up. This is so you'll know if the compression of an image worked.

Monochrome Image

1 bit per pixel
256 pixels  requires 256 bits
1 = white, 0 = black
Old technique, 1960s

8-bit Color Image

Old technique, 1980s
Red, Green, Blue (RGB)
8 bits per pixel
Example: 0000 0000 = black  (0)   1111 1111 = white  (255)
If there are more than 2 colors, RLE needs two numbers per run:  the color and the run length

24-bit Color Image

Red, Green, Blue (RGB)
24 bits per pixel
8 R, 8 G, 8 B 
2
24
= 16,777,216 colors
More than we can see
3 numbers for each pixel
Example: 0,0,0 = black  255,255,255 = white 255, 0, 200 = Pink📍
Four times as many numbers

Amount of RLE Compression?

Depends on # bits/pixel
But, even more importantly...
...
Depends on # of different colors in the image
The more colors,the more color changes, the more numbers needed.

We’ve seen binary used to…

Represent numbers
Represent colors
Represent machine language
It’s all bits!

Fewer bits

It does not necessarily mean less information

The amount of size reduction from compression depends on what?

Both
The amount of redundancy in the original data representation
The compression algorithm applied

What is another factor to the amount of compression

The number of different colors used in the actual image. For example, our black and white spaceship there were only 2 colors, so there were relatively few color changes and therefore lots of long runs. If it were a colored spaceship, there would be many color changes and therefore fewer long

The difference between the two image data compressions

Lossy data compression algorithms can usually reduce the number of bits stored or transmitted more than lossless compression algorithms

What is especially true about data compression?

There are trade-offs (a balance achieved between two desirable but incompatible features; a compromise) involved in choosing a compression technique for storing and transmitting data.

ASCII

Short for American Standard Code for Information Interchange, is an abstraction of (character encoding standard) code for representing English (text) characters as numbers, assigning a unique numerical value, with each letter (also, numbers, symbol, punctuation) assigned a number from 0 to 127 (128).

Why is ASCII so significant?

Allows computers and electronic devices to exchange/transfer and store/process information, crucial for enabling different computer systems to communicate, and served as a foundation, forming the basis for modern text and character encoding systems/sets

What does converting from binary to character(s) require?

Need to convert from binary to decimal and then from decimal to ASCII (same as decimal #). Then use the ASCII table to find the character using the ASCII value found.

How do you convert between binary and color code (Hex and RBG values)?

To convert binary to a color code (like hexadecimal or RGB), you break a 24-bit binary number into three 8-bit chunks, representing the Red, Green, and Blue components of a color. Each 8-bit binary chunk is converted into its decimal equivalent (0-255), which then corresponds to a specific intensity for that color component, allowing the display to mix these primary colors to produce the final shade. To go from RBG values to Hex by converting each 8 bit number or the decimal from that to hexadecimal
To summarize and go the opposite way, each pair of hex numbers can translate to an 8-bit binary number or a 0-255 base-10 decimal value.

Defining or setting code vs. calling or doing the code

Defining establishes what the code does without running it, whereas calling triggers the execution of the defined instructions, producing the intended outcome

Condensing code enable us to what?

Work smarter, not harder, but still harder

Redundant or repeating code

This is generally not a good idea to keep. For one thing, it makes it more complicated to modify and maintain the program. Imagine cases where forgetting to change some piece of code and that could seriously affect the behavior of the program, possibly introducing a bug into the app/program

Exampe of redundant or repeating code’s effect

Suppose we decided that we want to change the display to say 
Dot Radius: 5
instead of
Dot Radius = 5. 
This is a subtle change but to effect this change we would have to find and change all three occurrences of that code.  If we forgot one, that would introduce a bug into the program.