I Power Multimedia Technology Graphics Higher Computing.

Slides:



Advertisements
Similar presentations
Bitmapped Graphic Data
Advertisements

A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Dale & Lewis Chapter 3 Data Representation. Representing color Similarly to how color is perceived in the human eye, color information is encoded in combinations.
Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.
Graphics CS 121 Concepts of Computing II. What is a graphic? n A rectangular image. n Stored in a file of its own, or … … embedded in another data file.
Graphics in the web Digital Media: Communication and Design
Introduction to Computer Graphics
MM Topic 2 - Bit mapped and Vector Graphics Data 1 Topic 2 – Bit mapped & Vector graphics Still images – the general name for any graphic that doesn’t.
How Images are Represented Bitmap images (Dots used to draw the image) Monochrome images 8 bit grey scale images 24 bit colour Colour lookup tables Vector.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
I Power Multimedia Technology Video Data. Video data Video is a sequence of individual pictures or frames, taken one after another. These are played back.
Nat 4/5 - Software Design and Development – Low Level Operations - 1 National 4/5 – Computing Science Information Systems Design and Development Media.
An Introduction to Scanning and Storing Photographs and Graphics Bryn Jones Aug 2002
Images you see on your screen are made up of these things called pixels. A screen will show over 1 million pixels and then a computer has to do what it.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
1 Bitmap Graphics It is represented by a dot pattern in which each dot is called a pixel. Each pixel can be in any one of the colors available and the.
CS 1308 Computer Literacy and the Internet. Creating Digital Pictures  A traditional photograph is an analog representation of an image.  Digitizing.
Higher Computing Data Representation.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
Computer Systems Nat 4.5 Computing Science Data Representation Lesson 4: Storing Graphics EXTENSION.
COMP Bitmapped and Vector Graphics Pages Using Qwizdom.
Lecture 4 - Introduction to Computer Graphics
Chapter 11 Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
 Refers to sampling the gray/color level in the picture at MXN (M number of rows and N number of columns )array of points.  Once points are sampled,
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Photoshop Software Rasterized, file formats, and printing choices.
Bit-Mapped Graphic Data: Input (Capture) Hardware Multimedia – Section 2.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
Common file formats  Lesson Objective: Understanding common file formats and their differences.  Learning Outcome:  Describe the type of files which.
Image Representation. Objectives  Bitmaps: resolution, colour depth and simple bitmap file calculations.  Vector graphics: drawing list – objects and.
Digital Cameras And Digital Information. How a Camera works Light passes through the lens Shutter opens for an instant Film is exposed to light Film is.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Data Compression. Compression? Compression refers to the ways in which the amount of data needed to store an image or other file can be reduced. This.
Information Processes and Technology Multimedia: Graphics.
Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 This presentation © 2004, MacAvon Media Productions Introduction to Computer Graphics.
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Graphics workshop Library and Information Services University of St Andrews.
Marr CollegeHigher ComputingSlide 1 Higher Computing: COMPUTER SYSTEMS Part 1: Data Representation – 6 hours.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.
Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.
Computer Systems Nat 4.5 Computing Science Data Representation Lesson 4: Representing and Storing Graphics EXTENSION.
Digital Images are represented by manipulating this…
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
Resolution The resolution of an image is determined by the number of individually addressable points that make up the image, whether it is the number.
Image File Formats By Dr. Rajeev Srivastava 1. Image File Formats Header and Image data. A typical image file format contains two fields namely Dr. Rajeev.
Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Software Design and Development Storing Data Part 2 Text, sound and video Computing Science.
BITMAPPED IMAGES & VECTOR DRAWN GRAPHICS
Data Representation.
Binary Representation in Audio and Images
Computer Science Higher
Raster Images CPSC 1030.
A computer display is made up of small squares, called pixels.
GRAPHICS Source:
Introduction to Computer Graphics
An Introduction to Scanning and Storing Photographs and Graphics
Web Design and Development
Web Programming– UFCFB Lecture 7
Multimedia System Image
Computer Systems Nat 4.5 Computing Science Data Representation
Lecture 4 - Introduction to Computer Graphics
WJEC GCSE Computer Science
Presentation transcript:

I Power Multimedia Technology Graphics Higher Computing

Higher Digital Cameras: CCD Array In digital still cameras and video cameras, a CCD array is used to capture the image. CCD is short for charge-coupled device. A CCD is basically a series of photo sensors that are connected together. The sensors turn the light levels into analogue signals. Int. 2

Higher Scanners: linear CCD Uses a CCD, a row of photo sensors linked together, in a similar way to a digital camera but they are not in arrays but set in a row. This is known as linear CCD. The scanner uses a moving scan head, with a row of photo sensors, taking in the width of document at a single pass. Some scanners will have more than one row.

Higher Analogue to Digital Convertors (ADCs) The analogue signals from the array of CCDs is fed to analogue to digital convertors (ADCs). These ADCs receive continuous streams of analogue current which they convert to digital data representing the image.

Higher Digital to Analogue Converter (DAC) The digital to analogue converter (DAC) reverses the process which is carried out by the ADC. The DAC takes a series of discrete digital values and converts them to a signal whose amplitude varies according to the digital data. An example of a DAC in action is turning a digital music file into sound output to speakers.

Higher Colour LookUp Table (CLUT) A colour lookup table is a facility available in graphics applications which enables the user to specify a subset of colours to be used in the creation of graphics. A user may specify a CLUT which meets the need of printers or of displaying web pages. For example, in web design a CLUT would be used to specify a set of colours that would be easily handled by different systems and browsers.

Higher 24-bit Bitmap 24-bit bitmap will give true colour: 2 24 colours. Each pixel will need 3 bytes to encode. File sizes get very big and storage/transmission can be a problem. Int. 2

Higher Compressed Bitmap (RLE) Because of the large file sizes involved in bitmaps, some image formats have built in compression called run length encoding (RLE). RLE takes advantage of the fact that, in many images, large stretches of pixels are exactly the same uses a keybyte which tells the software whether the next byte represents several pixels or only one.

Higher RLE (Cont.) Let us take a single line in a graphic with B representing a black pixel and W representing white: WWWWWWWWWWWWBWWWWWWWWWWWW BBBWWWWWWWWWWWWWWWWWWWWWW WWBWWWWWWWWWWWWWW If we apply a simple Run-Length Code to the above graphic line, we get the following: 12WB12W3B24WB14W Interpret this as twelve W's, one B, twelve W's, three B's, etc. The run-length code represents the original 67 characters in only 16.

Higher RLE (Cont.) Ideal for RLE Compression Poor for RLE Compression

Higher GIF A graphics file format which uses lossless compression techniques. The graphics interchange format supports 256 colours and needs 1 byte per pixel to encode a graphic. Int. 2

Higher GIF Animation An animation is a series of graphics that are displayed in rapid sequence in a web browser to appear as a moving picture. In animation software each still image is called a frame. GIF animation is a common way of creating animated graphics. Frames

Higher GIF Animation (Cont.) To get a good realistic level of animation the system has to process around 24 frames per second. This means that the files storing the animations can be very large. To compress the files a technique known as LZW is commonly used.

Higher LZW A method of compression which makes use of repeated strings of data. Lempel-Ziv Welch compression stores the repeated patterns of data in a dictionary and then uses pointers to point to the dictionary.

Higher LZW (Cont.) This pattern is repeated throughout the picture. The pattern is stored in a dictionary. When it is used again we can just tell the computer that it was the same pattern as before.

Higher Joint Photographic Experts Groups (JPEG) This is a graphics file format which uses a lossy technique. That means it cuts out aspects of the graphic that won't be noticed by the human eye. The level of compression in a JPEG file can be varied. The higher the degree of compression, the lower the graphic quality. At a compression ratio of 100:1 a file will be considerably smaller, for example a 100 MB file would be reduced to 1 MB in size, but the quality of the graphic would be noticeably downgraded. A compression rate of 20:1 produces little noticeable loss. Int. 2

Higher JPEG (Cont.) Once an image is compressed using JPEG compression, data is lost and you cannot recover it from that image file. Always save an uncompressed original file of your graphics or photographs as backup. Int. 2

Higher PNG This is short for Portable Network Graphics: a file format for bit-mapped graphic images, designed to replace GIF. Like GIF it uses a lossless compression technique. PNG has the following features that are available in GIF format: a range of 256 colours; Interlaced images; supports data streaming; has a transparency feature; parts of an image can be marked as transparent; allows text comments to be stored within the image file.

Higher PNG (Cont.) PNG also has: compression between 5-25% more than the equivalent GIF file; bit depth of 48 bits per pixel, giving a range of 248 colours; greyscale encoding up to 16 bits per pixel; Opacity, giving control of the degree of transparency of a graphic; support for automatic display of images with correct brightness/contrast despite variations in hardware between the systems creating and those displaying the graphic; a file corruption detection mechanism Here is a comparison of the files

Higher RGB colour codes The RGB colour model defines the different amounts of red, green and blue (the primary colours) present in an image and is ideal for use in display. This colour code can be used to produce a palette of 224 colours (true colour): the amount of colours which are recognised by the human eye. Here is an animation

Higher Calculating File Sizes You need to be able to perform calculations using the relationship: File Size = Resolution (Dots per inch) Size (no of Sq inches) X Colour Depth (no of bits) X 1600 x 1200 X 8 x 10 X 8 E.g. = bits = bytes = Megabytes Divide by 8 to get answer in Bytes Divide by 1024 twice to get answer in Mb. Int. 2

Higher Dithering Dithering is a technique used by GIF graphics. It is used to soften jagged edges in lines and curves at low resolution. The human eye tends to blur spots of different colours. Dithering takes advantage of this by identifying groups of dots or pixels that have a pattern then merging them into a single shade or colour. Using this technique it can create an illusion of varying shades of grey or colour based on its own 256 colour palette. Dithering works well in graphics where there are few colours. It is not so successful when dealing with photos with, for example, thousands of colours.

Higher Dithering (Cont.) When there aren't enough colours in a display system to render an image properly, an infinite palette can be created by dithering. Quite often, a 24-bit colour image is dithered to 256 colours (8bits). This is a 24-bit colour picture which has been dithered to 2 colours (1 Bit).

Higher Anti-aliasing Aliasing refers to the jagged appearance of curves or diagonal lines on low resolution displays. Anti-aliasing is a software technique for smoothing these edges. Techniques used include surrounding pixels with intermediate shades and manipulating the size and horizontal alignment of pixels. If the image you have scanned in is of poor quality Anti- Aliased then one solution is to rescan the image at a higher resolution. This will increase the density of pixels, give a clearer image but increase the file size.

Higher Aliased Anti-aliasing Example Anti-Aliasied The higher resolution will get rid of the problem of aliasing since this occurs only at low resolutions.

Higher Vector Graphics Vector graphics (object-oriented graphics) contain a number of individual objects grouped together to make an image. These objects are described mathematically in the computer. These are resolution independent. The images are drawn to the best possible resolution of the output device. This also means the objects can be rescaled without loss of quality. Int. 2

Higher Vector Graphics (Cont.) Each object is independent of the others. They all exist within their own layer of the drawing and can be individually edited, moved, overlapped or deleted. Int. 2

Higher Vector Graphics (Cont.) The files are merely a list of the objects on the screen and the blank area takes up no space at all, unlike a bitmap! The scale of the drawing will have no effect on the size of the file. E.g. the Japanese flag will be the same file size for a flag the size of a stamp or a flag the size of a football pitch. Int. 2

Higher Vector Graphics (Cont.) The size of a vector graphic file increases the amount of objects in the image, not the physical size. Therefore a very complicated drawing the size of an A4 page may be converted to a bitmap before being stored or transferred. This is why many graphics are converted to GIF or JPEG before being put into web pages. Int. 2

Higher Vector Graphics File Formats Most vector graphics packages have their own way of storing objects and their attributes, but a few standard formats exist. SVG (Scalable Vector Graphics) is a language for 2D vector graphics. VRML (Video Reality Modelling Language) is used for animations and 3D imaging by describing a scene by attributes.

Higher Graphics Processing Unit (GPU) The GPU is a processor specifically aimed at supporting 3-D graphics. When processing complex graphics a whole range of operations have to be performed by the system such as transferring bitmaps, resizing and repositioning graphic objects, drawing lines, scaling and rescaling objects such as polygons.

Higher GPU (Cont.) The GPU deals with all of this processing, freeing the main processor from this demanding task. Navidia and Geforce are two companies which make this type of microprocessor. This involves performing millions of calculations that have to be processed each time a complex 3-D graphic is drawn.

Higher Digital signal processor (DSP) The DSP is an integrated circuit designed for high speed data manipulation used in image manipulation (as well as audio and other applications, for example communications).