CPSC 110-08: Computing on Mobile Phones
Spring 2012
Color Mixer App

CS Principles

This activity addresses the concept of abstraction. It focuses, in part, on the following learning objectives:

Introduction

Like everything else digital, the colors you see on the screen of your computer or phone are just bits. In this case the bits represent numbers. Inside the computer the numbers are represented as binary numbers, strings of 0s and 1s.

The bits represent the numbers from 0 to 255, which specify the quantities of Red, Green, and Blue that we should mix together to get the color we want.

Let's make some colors!

The RGB Color Model

Recall that the RGB model adds together 3 primary colors, Red, Green, and Blue.

Each primary color component (R,G,B) can be represented as an 8-bit byte. Recall that an 8-bit string can represent 28 = 256 different things. In this case, the 8-bit string for Red represents different amounts of Red, from 0 (none) to 255 (lots). And the same for Green and Blue.

If there are 256 different quantities of R, G, and B, then we can mix these together in 256 × 256 × 256 = 16,777,216 ways, which corresponds roughly to the number of colors the human eye can distinguish. Here are some examples:

  (65,65,65) = Grey
  (255,0,0) = Red
  (0,255,0) = Green
  (0,0,255) = Blue
  (65,0,0) = Brown

The Color Mixer App

Let's create a simple app that lets the user create their own colors by mixing various quantities of R, G, and B. The user will type the quantities into TextBoxes and when the Button is pressed the background color of the button will display the color.

Here's a snap shot of the app's user interface (UI) -- Click to enlarge:

As you see it consists initially of a big grey Button and three text boxes representing the red, green, and blue quantities arranged in a horizontal layout component.

Basic Set Up -- the User Interface

  1. Drag 3 TextBox components and a HorizontalArrangement component onto the Viewer, placing the TextBoxes in the HorizontalArrangement as shown in the picture.

  2. Rename the text boxes using the descriptive names shown in the picture. This will help you keep track of which is which when you need to refer to them in the Blocks Editor.

  3. Configure all of these components so that their Width property is set to Fill Parent.

  4. Configure the properties of the TextBoxes so that each contains a numeric value and such that the value is colored Red, Green, or Blue as shown in the picture.

  5. Drag a Button component onto the Viewer and configure it as shown -- i.e., Width = Fill Parent and Text = Paint the Color.

  6. That's it for setting up the user interface.

Mixing the Colors

The behavior of this app is very simple. When the button is pressed, the app will mix together the primary colors and display the result as the Button's background color.

This app uses a very simple algorithm, which can be expressed as follows: 

When Button1 is Clicked do:
  Set Button1's BackgroundColor to:
     The color obtained by mixing quantities
     contained in the Red, Green, and Blue text boxes.

Here's how we can implement this algorithm in App Inventor.

  1. Open the Blocks Editor.

  2. Click on the background or open the Built-In:Colors drawer to display the functions or operations that you can perform with colors.

  3. Select the make color block. This block lets you mix together red, green, and blue quantities to form a new color. Its components argument (slot) accepts a list consisting of the Red, Green, and Blue quantities in that order.

  4. So let's make a list of three numbers by clicking on the background or opening the list drawer and pulling out the make a list block.

    This block initially shows only one slot labeled item. But after you place a value in that slot, the Blocks Editor will open up a new slot. So you can add an indefinite number of items into the list.

  5. What values do we want to put in the list? We want to put the values that the user has typed into our TextBoxes, first the value for Red, then Green, and then Blue -- the order is important here. To get these values open the MyBlocks:TextBoxRed drawer and pull out the TextBox.Text block and put it in the item slot. Repeat this step for Green and Blue. You should end up with the following list:

  6. Now that we have this list, we can plug it into the make color slot giving the following combination:

  7. The final step is program Button1 to change its background color when it is clicked. For this we need a Button1.Click block and we need to put a Set Button1.BackgroundColor block in its do slot. The completed block will look like this.

Some Questions to Think About

  1. How many different binary values can be represented in 5 bits?

  2. Suppose that the primary colors, red, green, blue, were represented in only 5-bits (rather than in 8-bit bytes). How many colors could be represented in a 5-bit RGB scheme. Show your calculation.

  3. Challenge Yourself: Following the approach used in the this app, modify the PaintPot app -- call it PaintPot2 -- making it so that the user can create any color for drawing on the app, not just Red, Green, and Blue.