COMPSCI 111 / 111G Mastering Cyberspace: One picture is worth more - PowerPoint PPT Presentation

COMPSCI 111 / 111G Mastering Cyberspace: “One picture is worth more than ten thousand words” An introduction to practical computing • Anonymous Digital Images Vector Graphics Learning Outcomes What is a Digital Ima mage? Students should be able to: • A digital image is a representation of a two-dimensional image as a finite set of digital values, called picture – Understand the history of digital images elements or pixels – Describe the differences between bitmap graphics and vector graphics – Calculate the size in bytes of a bitmap image – Compare and contrast different compression methods (jpeg, gif and png) 27/04/18 COMPSCI 111/111G - Digital Images 3 1

In What Form m is a Digital Ima mage Stored? What is Digital Ima mage and Video Pr Processing? • Digital image (and video) processing focuses on two major tasks – Improvement of pictorial information for human interpretation – Processing of image data for storage, transmission and representation for • Common image formats include: autonomous machine perception – 1 sample per point (grayscale) • Some argument about where image processing ends and fields – 3 samples per point (Red, Green, and Blue) such as image analysis and computer vision start ! – Video (above information plus time) What is DIP? P? (cont…) History of Digital Ima mage Pr Processing • The continuum from image processing to computer vision • Early 1920s: One of the first applications of digital can be broken up into low-, mid- and high-level processes imaging was in the newspaper industry – The Bartlane cable picture transmission service – Images were transferred by submarine cable between London and New York – Pictures were coded for cable transfer and reconstructed at the receiving end on a telegraph printer Low Level Process Mid Level Process High Level Process Input: Image Input: Image Input: Attributes Output: Image Output: Attributes Output: Understanding Examples: Noise Examples: Object removal, image recognition, Examples: Scene sharpening segmentation understanding, autonomous navigation Early digital image In this course we will stop here 2

History of DIP P (cont…) History of DIP P (cont…) • Mid to late 1920s: Improvements to the Bartlane system • 1960s: Improvements in computing technology and the resulted in higher quality images onset of the space race led to a surge of work in digital image processing – New reproduction processes based – 1964: Computers used to on photographic improve the quality of techniques images of the moon taken – Increased number by the Ranger 7 probe of tones in – Such techniques were used reproduced images in other space missions including the Apollo landings Improved digital Early 15 tone digital image image A picture of the moon taken by the Ranger 7 probe minutes before landing History of DIP P (cont…) My history with digital images • 1970s: Digital image processing begins to be used in medical applications • Got my first digital camera in 1996 – 1979: Sir Godfrey N. • Casio QV10 Hounsfield & Prof. Allan M. • Only 2000 Kilo pixels !!! Cormack share the Nobel Prize in medicine for the invention of tomography, the technology behind Computerised Axial Tomography (CAT) scans • Changed my use of photography Typical head slice CAT image 1/05/18 COMPSCI 111/111G - Digital Images 12 3

My father – Aug 1996 Bitmap Graphics Storing pictures digitally – Sample the image (divide into dots) – Image resolution (number of dots) 200 x 250 40 x 50 20 x 25 http://en.wikipedia.org/wiki/Raster_graphics 1/05/18 COMPSCI 111/111G - Digital Images 13 27/04/18 COMPSCI 111/111G - Digital Images 14 Black and White pictures Displaying images Digital Pictures consist of small dots Images are displayed on an output device – Each dot is called a picture element (pixel) – Screen / Printer – Physical devices have limitations Storing information – Black and White are only two states Screen Printer – Use bits to represent pixels (0 = OFF, 1 = ON) – One to one mapping, so known as Bitmap 1 1 1 1 1 0 0 1 1111100110011111 1 0 0 1 1 1 1 1 Very small dots Large dots http://en.wikipedia.org/wiki/Pixel 27/04/18 COMPSCI 111/111G - Digital Images 15 27/04/18 COMPSCI 111/111G - Digital Images 16 4

Resizing bitmap images Resizing images Image information with given resolution – 8 x 6 pixels Sampled at higher Sampled at lower resolution resolution 16 x 12 4 x 3 27/04/18 COMPSCI 111/111G - Digital Images 17 27/04/18 COMPSCI 111/111G - Digital Images 18 Printing Bitmaps Exercises Imagine you have taken a picture with a 4 megapixel digital Printer and Screen have different sized dots camera. For ease of calculation, assume that the picture is – Scale (resample) the bitmap to ensure it looks good on both square, not rectangular. Printer resolution 4 million pixels 600 or 1200 dpi Assume that you are printing this picture out on a printer that has approximately 4000 dots per inch. How many inches across would the picture be when it was printed? • 4,000,000 = 2000 * 2000 Printer Therefore the picture would take up 0.5 by 0.5 inches. Screen resolution On disk If you viewed this image on a screen that had 1000 dots across, 72 dpi what portion of the image would be visible? • You would see ½ the width and ½ the height. • Therefore you would see: ½ * ½ = ¼ of the image On screen 27/04/18 COMPSCI 111/111G - Digital Images 19 27/04/18 COMPSCI 111/111G - Digital Images 20 5

Colour Bitmaps How much memory is required? Colours One binary number used for each pixel – Use more than 1 bit per pixel – 1 bit 2 colours – Map the binary number to a colour – 2 bits 4 colours – 4 bits 16 colour – 8 bits 256 colours – 16 bits 65536 colours Bits Colour – 24 bits 16,777,216 colours 1100 0010 1111 1111 0000 Black 1010 0101 0010 1111 0001 Red 1000 0111 0000 1101 How many bits are required for a 16 colour image 100 pixels wide x 0010 Green 0110 1111 1110 1010 8 pixels high? 0011 Blue Each pixel uses 4 bits – 100x8x4 = 3200 bits = 400 bytes 0100 Yellow … … An image using 24 bit colour, 1000 wide x 1000 high (1 Megapixel)? Colour table used for display – 3 MB 27/04/18 COMPSCI 111/111G - Digital Images 21 27/04/18 COMPSCI 111/111G - Digital Images 22 Exercises Exercises • How many colours can be represented by 3 bits? • How much memory (in bytes) would be required to store an image that has 256 different colours and is 3 pixels high and 5 • 2 3 = 8 colours pixels wide? Show your working. • How many bits are required to represent 128 different colours? • Number of colours = 256 = 2 8 . Therefore 8 bits or 1 byte are • 128 = 2 7 . Therefore 7 bits are required. required per pixel. Number of pixels = h * w = 3 * 5 = 15 • How much memory would be required to store a black and white Memory needed = 15 * 1 = 15 bytes image that is 10 pixels high and 5 pixels wide? Show your working. • Number of colours = 2 1 . Therefore 1 bit is required per pixel. Number of pixels = h * w = 10 * 5 = 50 Memory needed = 50 * 1 = 50 bits 27/04/18 COMPSCI 111/111G - Digital Images 23 27/04/18 COMPSCI 111/111G - Digital Images 24 6

Displays Compressing Images Screens use a combination of Red, Green and Blue lights Simply reducing number of colours – RGB colour A single pixel A single pixel at distance close up 16 colours Use one byte (8 bits) for each colour 31,942 colours 256 colours 20 KB 75 KB 40 KB – 256 different levels of red brightness – 256 different levels of green brightness Image is 200 pixels wide, 200 pixels high – 256 different levels of blue brightness = 40,000 pixels 27/04/18 COMPSCI 111/111G - Digital Images 25 27/04/18 COMPSCI 111/111G - Digital Images 26 Compression Algorithms Compression Algorithms Graphics Interchange Format (GIF) Portable Network Graphics (PNG) – Lossless method – Replacement to GIF – 256 colours – Lossless method – Good for graphics, poor for photos – 16 million colours (24 bit) – Uses an algorithm that was patented – Good for graphics, poor for photos Image Size: 200x100 Image Size: 200x200 Image Size: 200x100 Image Size: 200x200 Original (256 colours): 20KB Original (256 colours): 40KB Original (256 colours): 20KB Original (16M colours): 120KB GIF (256 colours): 3KB GIF (256 colours): 32KB PNG (16M colours): 4KB PNG (16M colours): 68KB http://en.wikipedia.org/wiki/Gif http://en.wikipedia.org/wiki/Png 27/04/18 COMPSCI 111/111G - Digital Images 27 27/04/18 COMPSCI 111/111G - Digital Images 28 7