Docsity
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Docsity AI
Docsity AI
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

Encoding Images, Slides of Artificial Intelligence

Washington State University (WSU or Wazzu)Artificial Intelligence

In this lesson, students will explore images and participate in creating an image file format. Image file types are more complicated because they include meta ...

Typology: Slides

2022/2023

Uploaded on 02/28/2023

rubytuesday
rubytuesday 🇺🇸

4.4

(38)

273 documents

1 / 14

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
5
1
UNIT 1: A BIT OF EVERYTHING | LESSON 6: ENCODING IMAGES
Encoding Images
Unit 1: A Bit of Everything | Lesson 6
Lesson time: 180 Minutes (4 days)
6
LESSON OVERVIEW:
In this lesson, students will explore images and participate in creating an image file format.
Image file types are more complicated because they include meta data, namely the width and
height of the image, as well as data indicating pixel colors. The process of rendering color on a
computer screen by mixing red, green, and blue light is an important concept of this lesson and
the results are not always intuitive. An important objective of this lesson is to understand how
image file sizes can become quite large. For example, even a relatively small image of 250x250
pixels is represented by a total of 62,500 pixels. And each of those pixels requires multiple bits
of information, sometimes three bytes (24 bits) for each pixel, bringing the total to 1.5 million
bits to store one smallt image!
Students will encode binary image data using the provided online “Pixelation” tools. The lesson
culminates with students encoding the binary data for their own personal “favicon” for use
throughout the course. The time allocation for this lesson is flexible, depending on student needs
and interests. It is possible to condense the learning experiences into 120 to 150 minutes.
Getting Started— 25 minutes
1. Journal: How would you encode the information that defines an image using bits?
2. Mini-lecture: Encoding images and a simple image encoding scheme.
Activity: Decoding a simple image—20 minutes
3. Pixelation tool v.1: Decode a simple B&W image.
Activity: Encoding an image including width/height data—30–45 minutes
4. Create simple file format for B&W image.
5. Pixelation tool v.2: Encode a B&W image.
Activity: Encoding a full color image; Create a personal favicon—90 min
6. Think-Pair-Share: What is required to encode color?
7. Mini-lecture: RGB color.
8. Pixelation tool v.3: Understanding color representation.
9. Designing a favicon.
Teaching Summary
DRAFT
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe

Partial preview of the text

Download Encoding Images and more Slides Artificial Intelligence in PDF only on Docsity!

Encoding Images

Unit 1: A Bit of Everything | Lesson 6 Lesson time: 180 Minutes (4 days)

LESSON OVERVIEW:

In this lesson, students will explore images and participate in creating an image file format. Image file types are more complicated because they include meta data, namely the width and height of the image, as well as data indicating pixel colors. The process of rendering color on a computer screen by mixing red, green, and blue light is an important concept of this lesson and the results are not always intuitive. An important objective of this lesson is to understand how image file sizes can become quite large. For example, even a relatively small image of 250x pixels is represented by a total of 62,500 pixels. And each of those pixels requires multiple bits of information, sometimes three bytes (24 bits) for each pixel, bringing the total to 1.5 million bits to store one smallt image! Students will encode binary image data using the provided online “Pixelation” tools. The lesson culminates with students encoding the binary data for their own personal “favicon” for use throughout the course. The time allocation for this lesson is flexible, depending on student needs and interests. It is possible to condense the learning experiences into 120 to 150 minutes. Getting Started —25 minutes

  1. Journal: How would you encode the information that defines an image using bits?
  2. Mini-lecture: Encoding images and a simple image encoding scheme. Activity: Decoding a simple image —20 minutes
  3. Pixelation tool v.1: Decode a simple B&W image. Activity: Encoding an image including width/height data —30–45 minutes
  4. Create simple file format for B&W image.
  5. Pixelation tool v.2: Encode a B&W image. Activity: Encoding a full color image; Create a personal favicon —90 min
  6. Think-Pair-Share: What is required to encode color?
  7. Mini-lecture: RGB color.
  8. Pixelation tool v.3: Understanding color representation.
  9. Designing a favicon. Teaching Summary

whn/f

COMPUTER SCIENCE PRINCIPLES LEARNING OBJECTIVES

1.1.1 Use computing tools and techniques to create artifacts. 1.1.2 Collaborate in the creation of computational artifacts. 1.1.3 Analyze computational artifacts. 1.2.1 Use computing tools and techniques for creative expression. 2.1.1 Describe the combination of abstractions used to represent data. 2.2.2 Use multiple levels of abstraction in computation. 3.1.1 Use computers to process information to gain insight and knowledge. 3.2.1 Use computing to facilitate exploration and the discovery of connections in information.

Writing will

enhance students’

understanding as they

learn to articulate their

thought processes

in solving problems

and learning

CS concepts.

whn/f

During this discussion, ask questions that will draw out the following important concepts related to encoding images. There is no need to provide answers to the questions that students might ask at this time, but acknowledge students for raising issues that will be resolved later in the lesson.

  • Pixels — the small elements of a picture that can be encoded using bits.
  • Color information — must use bits to encode colors for each pixel.
  • Size — must encode the dimensions of the image so it can be reconstructed properly.
  • Protocol — all of the above encodings grouped together make up a protocol or “file type” for an image. 2. Mini-lecture: Encoding images and a simple image encoding scheme
  • Use the notes provided in the^ presentation,^ What is a Pixel?^ (http://bit.ly/pixel_lecture) Coming Soon: This mini-lecture will be available as a video in the Teacher Resource Collection.

ACTIVITY: DECODING A SIMPLE IMAGE — 20 MIN

3. Use the Pixelation tool v.1 to decode a simple B&W image (manual width/height)

  • Distribute the Student Activity: Decoding a simple B&W image. (Available in the collection of teacher resources and previewed at the bottom of this lesson.)
  • Access the^ Pixelation tool v.1^ at http://bit.ly/pixeltoolv1.
  • Explain the steps for decoding a simple B&W image “by hand.”
  • Provide a series of 0s and 1s (bit stream) that represent a simple image for students to enter into the Pixelation tool v.1 (available in the teacher resources folder).
  • After the students enter the values from the bit stream, they must experiment by changing the width and height values until they see a recognizable image. If time is limited, this activity can be demonstrated by the teacher as an introduction to the Alternative Approach second part of the activity in which students do their own encoding. Student Activity Guide: Decoding a simple B&W image (preview) Scenario You are an information detective. You’ve just captured a stream of bits from outer space that you believe represents an image. It is your job to decode the stream. The Pixelation tool v.1 will enable you to convert the bit stream into a recognizable image. Directions to the student
  1. Open the Pixelation tool v.1 (http://bit.ly/pixeltoolv1)
  2. Enter the stream of bits into the Pixelation tool.
  3. Adjust the width and height using the sliders until you can recognize the image.

DRAFT

ACTIVITY: ENCODING AN IMAGE INCLUDING WIDTH/HEIGHT DATA—30–45 MIN

4. Develop a simple file format for a B&W image which includes width and height data. Start with a quick Think-Pair-Share journal entry. Think

  • Prompt:^ “In the first part of this activity, you (the human) had to use your intelligence to reconstruct an image with the help of a Pixelation tool. You received the data as a bit stream but needed to adjust the size of the image until the image “looked like something” recog- nizable. For a machine to be able to reconstruct the image on its own, we would need to include the image width and height data in the bit stream. How would you add the dimen- sional information into the encoding of the image?”
  • Allow 1 minute for students to write their responses. Pair
  • Prompt:^ “Compare ideas with your partner. How are your ideas similar? How are they different?”
  • Allow 1-2 minutes for partner discussions. Share
  • Invite pairs to report their ideas to the class. These important concepts should emerge:
    • Values for width and height need to be encoded with bits.
    • A decision must be made about where the width/height values should go in the bit stream (typically beginning or end).
    • A decision must be made about how many bits should be used to encode the width and height data. (This detail must be pre-determined in order for a computer to reconstruct the image.)
  • This discussion should take about 5 minutes and introduces the next activity. 5. Pixelation tool v.2: Encode a B&W image.
  • Distribute the Student Activity Guide: Encoding a B&W image. (Available in the collection of teacher resources and previewed below.) Students will use the Pixelation tool v.2 that requires the width/height to be encoded in the first two bytes. Alternatively, you can demonstrate the Pixelation tool v.2 to reinforce the concepts from the previous discussion.

ASSESSMENT:

  • Collect the bit streams of data created by students. A digital collection scheme, or a class discussion board can be used.
  • Encourage students to share their bit streams with friends. They should be able to use any stream and reconstruct the image by copying and pasting the data into the Pixelation tool v.2.

DRAFT

Did you know?

  1. Test your work by decoding (reversing the process) the stream of bits using the Pixelation tool v.2.
  2. Submit your work by sending the stream of bits to your teacher.
  3. Share bit streams with other students. Decode the streams to discover their images. This is similar to the task space scientists performed to encode an image to be sent into space with the Voyager satellite.

DRAFT

ACTIVITY: ENCODING A COLOR IMAGE; CREATE A FAVICON—90 MIN

6. Think-Pair-Share Think

  • Instruct students to respond to this prompt in their journals. “At the beginning of this lesson on encoding images, you were asked to think about and describe your own image encoding scheme. It is likely that you were thinking about a full-color image. Did you plan to encode colors? What ideas did you have for that specific task? How can we alter the B&W image encoding method to encode color?” Pair
  • Instruct student to compare ideas with their elbow partner. “How are your ideas similar? How are they different?” Share
  • “Based upon your knowledge of encoding color, describe how red or purple might be encoded.” Important concepts to extract from the discussion: + A finite set of colors that can be used in designs must be established because we are limited by using bits. + A color encoding strategy requires encoding multiple bits for each pixel of the design. + The number of colors that can be used is limited by the number of bits allocated per pixel. 7. Mini-lecture: Color and Light
  • Mini-lecture^ with slides (http://bit.ly/lecture_color) 8. Pixelation tool v.3: Understanding color representation
  • Demonstrate use of the Pixelation tool v.3. Distribute Student Activity: Understanding Color Representation. (Available in the collection of teacher resources and previewed below.)
  • Provide time for students to experiment with the tool to create the images described on the student activity guide. Make the point that if they want to include more colors, they will need to vary the amounts of red, green and blue light that go into each pixel (rather than just setting the lights on or off). The students’ abilities with binary and hex numbers will help them in this activity.
  • If you cannot print in color, display the assignment with a projector. Coming Soon A video of this demonstration will be available in the Teacher Resource Collection.

DRAFT

  1. Make a 4x4 image with bits-per-pixel set to 12. Switch the tool into hex mode and create an image in which the first row displays 4 different “reddish” colors (with red being the dominant color). The second row should show 4 different “greenish” colors, the third row should show 4 “bluish” colors, and the fourth row should show only shades of gray. It should look something like this:
  2. Summarize your understanding of “additive colors” and “subtractive colors.” Describe how colors are “mixed” in each method. Be sure to include examples of when each might be encountered in the everyday life of a student.
  3. Compare your images with those of another student. Are they the same? Are they different? If they are different, analyze your work and determine where the errors occurred. Why did that error create the image you observed? 9. Create a Personal Favicon
  • Distribute^ Student Activity Guide: Creating a Personal Favicon. (Available in the collection of teacher resources and previewed below.) Writing step-by-step instructions to recreate your favicon is an important element of this activity.
  • These projects are fun to share. Consider printing them in a larger format to post in the class- room or print stickers of the icons for student use. A favicon is a small image, usually 16x16 pixels, that is typically shown in a web browser’s address bar next to the web address for a particular website or web page. It is typically a small version of a company logo or some other symbol for the site. This activity can be assigned as homework or completed in class. Because it involves some creativity, the amount of time needed to complete the project is rather unpredictable. You might consider assigning students to design their favicon outside of class on paper or using an online homework tool. Class time could then be used to discuss how to solve the problem and encode the images with the Pixelation tool. Alternative Approach Did you know?

DRAFT

Student Activity Guide: Creating a Personal Favicon (preview) Scenario A favicon is a small image, usually 16x16 pixels, that is typically shown in a web browser’s address bar next to the web address for a particular website or web page. It is typically a small version of a company logo or some other symbol for the site. Favicons are designed by artists and programmed into web pages by web designers. Below are some examples of favicons—you might recognize some! Directions to the student

  1. Create a personal 16x16 favicon and encode it using the Pixelation tool v.3. The image should represent your personality in some distinctive way. You will be using this

DRAFT

ASSESSMENT QUESTIONS

  • How many bits (or bytes) are required to encode an image that is 25 pixels wide and 50 pixels tall if you encode it with 24 bits per pixel? To help students understand how quickly the bit size of images expands as the image is enlarged, start with smaller numbers (5 X 10) and then incrementally increase the width and height to illustrate the concept.
  • Given the 24-bit color #7AB906 find a 12-bit color that is very close to it—so close that your eye can barely detect the difference. Can you come up with a rule to convert any 24-bit color into a 12-bit version of the color that is very close to it?
  • Imagine that you have an image that is too dark or too bright. Describe how you would alter the RGB settings to brighten or darken it. Give an example. Produce two color images, a bright version and a dark version of the same thing.
  • If you increase the number of bits-per-pixel is the image “improved”? Give a reason why and a reason why it might not be “better.” Students will learn about the concepts in these Assessment Questions over the course of Lesson 6. Use them periodically as a “check-back system” to ensure that students have retained their learning from the previous activities.

OTHER NOTES

Use these questioning prompts to help students think more deeply about concepts related to images and encoding images. Pixel Pixels divide a picture into smaller elements which can be assigned color.

  • It is likely that some students have created digital images or have an intuitive sense of the need for pixels. If the word ‘pixel’ is used during early class discussions, question students to be sure they understand the term. + You’ve just used this word ‘pixel’... exactly what do you mean? + Why do we need to have pixels in order to create a digital image? Color Data Bits are used to encode a color for each pixel.
  • Initially guide students to keep it simple: one bit per pixel, where 0 and 1 are black and white.
  • Prompt students to think more deeply about encoding color.
    • How many bits should we allocate for each pixel in the image?
    • What would be the simplest allocation? (1 bit per pixel)
    • If I used 2 bits per pixel, how many different colors could I make? 3 bits? etc. Size and dimensions Values used to encode the dimensions of the image are necessary to accurately reconstruct an image. Teaching Tip Alternative Approach

DRAFT

  • Prompt students to review their understanding of this concept.
    • If I were to send you a stream of 0s and 1s over the internet, how could you reconstruct the original image?

IMAGE FILE TYPE OR PROTOCOL

When aggregate, all of the concepts described above form a “protocol” or “file type.”

  • In order to create and share images digitally we must have an agreed-upon format for how the bits should be organized and what they mean. Prompt students to review their understanding of this concept. + What details about an image are required to accurately share it with others over elec- tronic transmission systems?

CONNECTIONS AND BACKGROUND INFORMATION

The activities in Lesson 6 support CSTA K-12 Computer Science Standards. 3B-1. Classify problems as tractable, intractable or computationally unsolvable. 3B-3. Identify and select the most appropriate file form based on trade-offs. 3B-4. Explore principles of system design in scaling, efficiency, and security. 3B-5. Deploy principles of security by implementing encryption and authentication strategies. 3B-7. Discuss the interpretation of binary sequences in a variety of forms. 3B-9. Analyze data and identify patterns through modeling and simulation. Activities in Lesson 6 support the goals found in the Common Core State Standards for Mathe- matics: Understanding number systems and in the Common Core State Standards for Writing: Write informative/explanatory texts to convey complex ideas and information clearly.

DRAFT