Administrative Notes October 11, 2016 Midterm 1 grades released - PowerPoint PPT Presentation

Administrative Notes October 11, 2016 • Midterm 1 grades released (see Piazza for details) • Reminder: Project groups due end of the day Wednesday • Reminder: Project proposals due the 17 th • You’ll also have reading quizzes due the 17 th – readings should be up later today. Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Follow up! • Rezipping the Word document – I needed to change directories before I rezipped • Pokemon Go tracking Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Data Representation, Part 2: Image Representation Computational Thinking 3 www.ugrad.cs.ubc.ca/~cs100

Learning Goals • CT Building Block: Define the RGB colour specification, explain its basis • CT Building Block: Define “bitmap image” and “pixel” and explain how to construct a bitmap image representation • CT Building Block: Define “vector image” and explain how to construct a vector image representation • CT Building Block: Compare and contrast the suitability of bitmap and vector representations for different uses of images • CT Impact: Students will be able to describe what differences are made possible by using hand drawn vs. computer animation Computational Thinking 4 www.ugrad.cs.ubc.ca/~cs100

Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Red Green Blue Images Monitors, phone screens, and TVs make different colours by mixing Red, Green, and Blue lights Computer applications use 256 intensities (8 bits) for each of red, green, and blue. Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Black and White Colors Black is the absence of light: 0000 0000 0000 0000 0000 0000 (Binary) 0 0 0 0 0 0 (Hex) RGB bit assignment for black White is the full intensity of each color: 1111 1111 1111 1111 1111 1111 (Binary) F F F F F F (Hex) RGB bit assignment for white http://www.colorpicker.com/ Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Clicker Question Suppose red’s intensity is 255 (full intensity). What happens if both the blue and green intensities increase at the same rate, starting from 0? A. The colour remains red but gets lighter B. The colour remains red but gets darker C. The colour changes from red to an aqua shade D. None of the above Computational Thinking 8 www.ugrad.cs.ubc.ca/~cs100

Clicker Question Illustration Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Clicker Exercise Which colour best describes the one represented by the hexadecimal colour code: #00B103? A. A shade of red B. A shade of blue C. A shade of green D. A shade of purple Computational Thinking 10 www.ugrad.cs.ubc.ca/~cs100

Okay, so that’s how colours are stored. What about images? There are two ways that computers commonly store images. The most common is a bitmap – the picture is chopped up into small little squares called pixels. Each pixel’s colour is stored in RGB. (000000) Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Pixel pages The screen is split into smaller pixels, each of which can show Red, Green and Blue 1 2 3 4 5 0 173 173 173 0 Pixel 1 0 173 173 173 0 0 235 235 235 0 • = = 0 173 173 173 0 2 0 173 173 173 0 0 235 235 235 0 173 0 173 0 173 3 173 0 173 0 173 235 0 235 0 235 173 173 0 173 173 4 173 173 0 173 173 235 235 0 235 235 0 173 173 173 0 0 173 173 173 0 0 173 173 173 0 0 173 173 173 0 0 235 235 235 0 0 235 235 235 0 0 173 173 173 0 0 173 173 173 0 0 173 173 173 0 0 173 173 173 0 + + = 0 235 235 235 0 0 235 235 235 0 173 0 173 0 173 173 0 173 0 173 173 0 173 0 173 173 0 173 0 173 235 0 235 0 235 235 0 235 0 235 173 173 0 173 173 173 173 0 173 173 173 173 0 173 173 173 173 0 173 173 173 173 0 173 173 173 173 0 173 173 Computational Thinking www.ugrad.cs.ubc.ca/~cs100

A full bitmap image specification requires • Width and height of the image (# of rows and columns) • The pixels , i.e. colour intensity values of each grid cell Computational Thinking 13 www.ugrad.cs.ubc.ca/~cs100

Fun with images Draw a grid 6 pixels wide by 7 high Fill in the colours, starting from the top row, left to right, then down to the next row, etc. Here are the bits to fill in, broken up by line: (FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF) (FFFFFF)(000000)(FFFFFF)(FFFFFF)(000000)(FFFFFF) (FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF) (FFFFFF)(FFFFFF)(000000)(000000)(FFFFFF)(FFFFFF) (FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF)(FFFFFF) (FFFFFF)(000000)(FFFFFF)(FFFFFF)(000000)(FFFFFF) (FFFFFF)(FFFFFF)(000000)(000000)(FFFFFF)(FFFFFF) Computational Thinking www.ugrad.cs.ubc.ca/~cs100

What your image should look like Computational Thinking www.ugrad.cs.ubc.ca/~cs100

That was a lot of data for a little information Not including the information about the size of the image, that took 252 hex digits (the parentheses were only there to make it easier to read) Can you represent this same information in a smaller amount of space? Computational Thinking www.ugrad.cs.ubc.ca/~cs100

In a group (no survey this time)… Describe how you might save the same information using less space Write a variable that represents white and black. assign coordinates, then list only the black squares, else it's white crop to remove white space. list runs instead of individual pixels Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Would your method work for this image? why or why not? Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Compressing Bitmap Images collapsing runs: example 1 2 3 4 5 6 Purple = (92,0,154) 1 Green = (53, 164, 160) 2 • Cells are ordered from top left to bottom right: [1,1],[1,2],…,[1,6],[2,1],…,[2,6] • Ordered list of five “maximum-length” runs: (92,0,154) 1 (53, 164, 160) 1 (92,0,154) 2 (53, 164, 160) 1 (92,0,154) 7 Clicker question: Can the matrix be reconstructed from the list of runs alone? (A – yes, B – no) Computational Thinking 19 www.ugrad.cs.ubc.ca/~cs100

Compressing Bitmap Images two techniques used by .jpg files • “Runs" of identical intensities can be collapsed (lossless compression – the image looks exactly the same) • Areas with similar colour can be modified to have the same colour (lossy compression – the image doesn't look exactly the same) Computational Thinking 20 www.ugrad.cs.ubc.ca/~cs100

JPEG Compression JPEG is capable of a 10:1 compression without detectable loss of clarity simply by keeping the regions small Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Which brings us to a scene from “The Martian” Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Great! But bitmaps are not the best choice for all images If you zoom in on images, they get “pixelated” Vector images describe images based on points and how they’re connected. University Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Clicker question Are PDF documents A. Bitmap Images B. Vector Images C. It depends Computational Thinking www.ugrad.cs.ubc.ca/~cs100

Vector Image Representation basic approach • Describe each object of the image either as • a sequence of dots (connected by lines), or • a simple shape (e.g., rectangle, circle) • Describe the colour (fill) of each closed object Computational Thinking 25 www.ugrad.cs.ubc.ca/~cs100

Vector Image Representation example Computational Thinking 26 www.ugrad.cs.ubc.ca/~cs100

Vector Image Representation example • The representation is a sequence 4 of numbers 3 • It should be possible to 2 unambiguously reconstruct the 1 image from the representation 0 0 1 2 3 4 1, 2, 1, 1, 2, 2, 3, 3, 2, 2,1 dimension first dot fifth dot third dot of the grid (in cm) second dot fourth dot Computational Thinking 27 www.ugrad.cs.ubc.ca/~cs100

Clicker Exercise Which image is represented by the following sequence? 1, 2,1, 2,3, 3,2, 1,2, 2,1 A. B. C. 4 4 4 3 3 3 2 2 2 1 1 1 0 0 0 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 Computational Thinking 28 www.ugrad.cs.ubc.ca/~cs100

Vector Image Representation extensions of basic approach • Add width and colour of lines • Use curves instead of lines • Add shading to objects • Specify which objects overlay others • Extend to 3D • … Computational Thinking 29 www.ugrad.cs.ubc.ca/~cs100

Bitmap or Vector Representation? Does the photocopier produce vector (A) or bitmap (B) representations? Computational Thinking 30 www.ugrad.cs.ubc.ca/~cs100

Bitmap or Vector Representation Does the 3D printer produce vector (A) or bitmap (B) representations? Computational Thinking www.ugrad.cs.ubc.ca/~cs100