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

▶
administrative notes october 11 2016
SMART_READER_LITE
LIVE PREVIEW

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

Dec 29, 2023 273 likes •605 views

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 Youll also have reading quizzes due the

slide-1
SLIDE 1

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

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 17th
  • You’ll also have reading quizzes due the 17th

– readings should be up later today.

slide-2
SLIDE 2

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
slide-3
SLIDE 3

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

Data Representation, Part 2: Image Representation

3

slide-4
SLIDE 4

Computational Thinking 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

4

slide-5
SLIDE 5

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

slide-6
SLIDE 6

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

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.

Red Green Blue Images

slide-7
SLIDE 7

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/

slide-8
SLIDE 8

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

8

slide-9
SLIDE 9

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

Clicker Question Illustration

slide-10
SLIDE 10

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

10

slide-11
SLIDE 11

Computational Thinking 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)

slide-12
SLIDE 12

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

  • = =

+ + =

173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 173 173 235 235 235 235 235 235 235 173 173 235 173 235 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 173 235 235 235 235 235 235 235 173 173 235 173 235 173

1 2 3 4 5 1 2 3 4

Pixel

slide-13
SLIDE 13

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

A full bitmap image specification requires

13

  • Width and height of the image (# of rows and

columns)

  • The pixels, i.e. colour intensity values of each

grid cell

slide-14
SLIDE 14

Computational Thinking 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)

slide-15
SLIDE 15

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

What your image should look like

slide-16
SLIDE 16

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?

slide-17
SLIDE 17

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

slide-18
SLIDE 18

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

Would your method work for this image? why or why not?

slide-19
SLIDE 19

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

Compressing Bitmap Images

  • 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

  • f runs alone? (A – yes, B – no)

collapsing runs: example

Purple = (92,0,154) Green = (53, 164, 160)

19

5 3 4 2 6 1 1 2

slide-20
SLIDE 20

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

Compressing Bitmap Images

two techniques used by .jpg files

20

  • “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)

slide-21
SLIDE 21

Computational Thinking 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

slide-22
SLIDE 22

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

Which brings us to a scene from “The Martian”

slide-23
SLIDE 23

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

slide-24
SLIDE 24

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

Clicker question

Are PDF documents

  • A. Bitmap Images
  • B. Vector Images
  • C. It depends
slide-25
SLIDE 25

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

Vector Image Representation

  • 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

basic approach

25

slide-26
SLIDE 26

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

Vector Image Representation

example

26

slide-27
SLIDE 27

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

Vector Image Representation

4 3 2 1 0 1 2 3 4 dimension

  • f the grid

(in cm) first dot second dot third dot fourth dot fifth dot

1, 2, 1, 1, 2, 2, 3, 3, 2, 2,1

example

  • The representation is a sequence
  • f numbers
  • It should be possible to

unambiguously reconstruct the image from the representation

27

slide-28
SLIDE 28

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

Clicker Exercise

4 3 2 1 0 1 2 3 4

1, 2,1, 2,3, 3,2, 1,2, 2,1

Which image is represented by the following sequence?

  • A. B. C.

4 3 2 1 0 1 2 3 4 4 3 2 1 0 1 2 3 4 28

slide-29
SLIDE 29

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

Vector Image Representation

  • Add width and colour of lines
  • Use curves instead of lines
  • Add shading to objects
  • Specify which objects overlay others
  • Extend to 3D
  • …

extensions of basic approach

29

slide-30
SLIDE 30

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

Bitmap or Vector Representation?

Does the photocopier produce vector (A) or bitmap (B) representations?

30

slide-31
SLIDE 31

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

Bitmap or Vector Representation

Does the 3D printer produce vector (A) or bitmap (B) representations?