In this activity, students will use data representation and abstraction to share examples of how humans are able to share information with each other as efficiently as possible.
Students respond to the following prompts:
Prompt 1: Road signs, like a stop sign, are one example of conveying information visually. What are some other examples of pictures or symbols that are used to convey information?
Prompt 2: Abbreviations can be used to refer to something without having to say the entire word or phrase. What are some technical or scientific examples as well as those you might hear your friends say?
Teaching Tips:
In this activity, students will use pattern recognition and data analysis to determine what is the smallest amount of data necessary to communicate to another person information such as a word, phrase, shape, or visual scene.
Q1: On average how much information (turns/steps) from the first person was necessary to guess
Word | Phrase | Shape | Visual |
Q2: Why do you think it required more information to guess a visual rather than a word?
Q3: What could have made each of these easier to guess, so that it would require fewer steps to solve?
A1: Answers will vary. On average, a word will require the fewest steps and a visual will require the most.
A2: Answers will vary. Responses could include that a visual is more complex than a word, and there is often more information in a visual (many lines) than a word (a few letters).
A3: Answers may include:
In this activity, students will apply data representation to convey visual information using binary.
Walk students through the following:
Q1: If you had a 5 x 5 grid that represented which pixels were on and off on your computer screen, which of the following boxes would you color in to tell the computer how to display a square?
1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 |
Q2: Tell the computer how to draw the box by indicating which pixels should be on and which should be off using 0 for off and 1 for on. Follow the numbering of the pixels from 1-25. For example if the first, second, and third boxes should be on and the fourth should be off you would write 1110.
You were able to represent a square using only 25 numbers which the computer would store in its memory. Each of these numbers would take up a "bit" of memory. 8 bits = 1 Byte and 1000000 Bytes = 1 Megabyte which is approximately what is used to represent an image like the image here.
Red | Green | Blue | |
Red | 1111 1111 | 0000 0000 | 0000 0000 |
Green | 0000 0000 | 1111 1111 | 0000 0000 |
Blue | 0000 0000 | 0000 0000 | 1111 1111 |
Q3: With 24 bits how many possible color options are available?
A1: A couple of options below:
1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 |
1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 |
A2: A couple of options below:
A3: Each bit has two possibilities, 0 and 1. Computers at a fundamental level use the binary system for representing bits. Binary is a base-2 number system and with 24 bits the possible colors are 224, or 16,777,216 colors. The human eye is unable to distinguish between all of these possible colors. To read more about the RGB relationship of additive color mixing, and the exponential relationship of 224, see the RGB colour model.
In this activity, students will apply pattern recognition and abstraction to understand how bitmasks can be used to add or remove information from a pixel.
Students should have a basic understanding of the binary and hexadecimal number systems before using this activity.
Walk students through the following:
Red | Green | Blue | |
Red | 1111 1111 | 0000 0000 | 0000 0000 |
Bitmask | OR 0000 0000 | 1111 1111 | 0000 0000 |
Yellow | 1111 1111 | 1111 1111 | 0000 0000 |
If you are unfamiliar with hexadecimal, it may be helpful to see how 4D2 is translated back into decimal to understand the notation.
4D216 = (4 * 162) + (13 * 161) + (2 * 160) = (4 * 256) + (13 * 16) + (2 * 1) = 123410
Note: 13 is used to represent D in the calculation because D is the 13th digit in the hexadecimal system (0-9,A,B,C,D)
Red | Green | Blue | |
Yellow | 1111 1111 | 1111 1111 | 0000 0000 |
Bitmask | AND 0000 0000 | 1111 1111 | 0000 0000 |
Green | 0000 0000 | 1111 1111 | 0000 0000 |
Q2: What would be the resulting binary and color if the same AND bitmask was applied to Red?
By using different bitmask operations and different bit combinations it is possible to add or remove information from the pixels.
A1: 1111 1111 0000 0000 1111 1111 Purple
Red | Green | Blue | |
Red | 1111 1111 | 0000 0000 | 0000 0000 |
Bitmask | OR 0000 0000 | 1111 1111 | 0000 0000 |
Purple | 1111 1111 | 0000 0000 | 1111 1111 |
A2: 0000 0000 0000 0000 0000 0000 White
Red | Green | Blue | |
Red | 1111 1111 | 0000 0000 | 0000 0000 |
Bitmask | AND 0000 0000 | 1111 1111 | 0000 0000 |
White | 0000 0000 | 0000 0000 | 0000 0000 |
Activity overview: In this activity, students will use abstraction to implement a bitmask in algorithm to modify an image.
The Pencil Code program used in this activity has two primary points where students can easily modify the code:
In the previous activity the idea of a bitmask was introduced and how it could modify the bits in a color. In this activity students will modify an image using a bitmask. Walk students through the following:
Q1: Complete the following chart using the & bitmask. Add your opinion of the quality of the new image compared to the original.
Bitmask value (base16) | Memory Size (bytes) | Quality (1-10) |
---|---|---|
0xFFFFFFFF | 142845 (original size) | 10 |
0xFF000000 | 1389 | 1 |
0xFFAAAAAA | ||
0xFFCCCCCC | ||
0xFFEEEEEE | ||
0xFFA0A0A0 | ||
0xFFC0C0C0 | ||
0xFFF0F0F0 |
The primary concern of previous versions of smartphones was the amount of storage available. Now, with so much information coming from the Internet, developers are constantly thinking of how they can reduce the size of the data as small as possible to reduce expensive network charges for users.
Discuss with students that if they were developing software for sending photos to friends versus software for photo editing, they might be willing to sacrifice a little bit of quality in order to make the photos load more quickly.
A1: Answers are based on the default image (http://goo.gl/Y1UncS).
Bitmask value (base16) | Memory Size (bytes) | Quality (1-10) |
---|---|---|
0xFFFFFFFF | 142845 (original size) | 10 |
0xFF000000 | 1389 | 1 |
0xFFAAAAAA | 113200 | |
0xFFCCCCCC | 92758 | |
0xFFEEEEEE | 124374 | |
0xFFA0A0A0 | 50779 | |
0xFFC0C0C0 | 35283 | |
0xFFF0F0F0 | 64899 |
Ask students what understanding they have gained through this lesson about compressing data.
Ask students, What additional ideas do you have for compressing an image?
Term | Definition | For Additional Information |
---|---|---|
Binary | A number system with two possible digits 0 and 1. So the number 30 in decimal is written as 11110 (1 * 25 + 1* 24 + 1* 23 + 1* 22 + 1* 21 + 0* 20) | https://en.wikipedia.org/wiki/Binary_number |
Bitmask | Applies a bitwise operation to multiple bits at once. | https://en.wikipedia.org/wiki/Mask_(computing) |
Bit | A binary digit, the smallest representation of information in a computer or digital communications. | https://en.wikipedia.org/wiki/Bit |
Bitwise operation | Manipulates a bit by comparing it to another bit (e.g. 1 AND 0 = 0 but 1 OR 0 = 1) | https://en.wikipedia.org/wiki/Bitwise_operation |
Hexadecimal | A number system with 16 possible digits 0-F (0-9, A, B, C, D, E, F). So the number 30 in decimal is written as 1E (1 * 161 + 14 * 160) | https://en.wikipedia.org/wiki/Hexadecimal |
Pixel | The smallest controllable physical part of a computer screen. | https://en.wikipedia.org/wiki/Pixel |
Concept | Definition |
---|---|
Abstraction | Identifying and extracting relevant information to define main idea(s) |
Algorithm Design | Creating an ordered series of instructions for solving similar problems or for doing a task |
Data Analysis | Making sense of data by finding patterns or developing insights |
Data Representation | Depicting and organizing data in appropriate graphs, charts, words or images |
Pattern Recognition | Observing patterns, trends, and regularities in data |
speed Infinity picture = picture = 'http://goo.gl/Y1UncS' # from Wikimedia # First sprite c1 = new Sprite c1.fd 150 c1.wear picture await c1.done defer() # Load image # Get raw image data bits and convert data into # 32-bit integer array. d = c1.imagedata() source = new Uint32Array(d.data.buffer) # Second Sprite, empty to start. c2 = new Sprite # fold width: d.width height: d.height c2.bk 150 n = c2.imagedata() target = new Uint32Array(n.data.buffer) # Apply the bitmask. for j in [0...source.length] target[j] = source[j] & 0xFFFFFF00 # Set the altered imagedata to sprite 2. c2.imagedata(n) # Finally we encode each image using PNG # compression and then label each image # with its number of bytes as a PNG file. labelBytes = (c) -> # fold b64 = c.canvas().toDataURL().replace /^.*,/, '' bytecount = atob(b64).length c.label bytecount + ' bytes', font: 'bold 32px Arial', color: yellow textShadow: '0 0 7px black' labelBytes c1 labelBytes c2 ht()