Digit al M u l t i m e d i a 3 rd e d i t i o n

Po c ke t P D F Key Po i nt S l i d e s

digital

multimedia

2
Fundamentals
M a c Avo n M e d i a

nigel chapman and jenny chapman

Graphics and Colour Video and Animation Sound Text and Typography Hypermedia Flash and DOM Scripting Multimedia and Networks

Third Edition

Digit al M u l t i m e d i a 3 rd e d i t i o n

Po c ke t P D F Key Po i nt S l i d e s

Based on material from Digital Multimedia, 3rd edition published by John Wiley & Sons, 2009 2009 Nigel Chapman and Jenny Chapman These lecture slides 2009 Nigel Chapman and Jenny Chapman All figures MacAvon Media Productions

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

21

Digital Data

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

22

Bits are units of data that can only have one of two values. A byte is eight bits.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

23

Groups of bits can be interpreted as numbers to base 2, but can also be treated as characters, colours, etc.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

24

Analogue data must be converted to digital form before it can be manipulated by a computer program. Digitization comprises two operations: sampling and quantization.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

25

Analogue and digital representations

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

26

An analogue signal
Ex Libris

Sampling and quantization

M a c Avo n M e d i a

[email protected]................................................

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

27

The sampling rate is the number of samples in a fixed amount of time or space.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

28

The quantization levels are the set of values to which a signal is quantized.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

29

Spatial and temporal signals are made up of pure sine wave components at different frequencies. The Fourier Transform operation can be used to compute a signals representation in the frequency domain.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

30

y = sin(x)

y = sin(x) + sin(3x)/3

y = sin(x) + sin(3x)/3 + sin(5x)/5

y = sin(x) + sin(3x)/3 + sin(5x)/5 + sin(7x)/7

y = sin(x) + sin(3x)/3 + sin(5x)/5 + sin(7x)/7 + sin(9x)/9

-9f -7f -5f -3f -f

y = sin(x) + + sin(101x)/101

0 f 3f 5f 7f 9f

Frequency components of a Square wave transformed square wave into the frequency domain
Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

31

Higher-frequency components are associated with abrupt transitions.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

32

The Sampling Theorem states that, if the highest-frequency component of a signal is at fh, the signal can be properly reconstructed if it has been sampled at a frequency greater than the Nyquist rate 2 fh.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

33

Undersampling leads to aliasing.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

34

Sampling and undersampling

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

35

Using too few quantization levels leads to posterization and Moir effects in images, or quantization noise in sound.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

36

256, 128, , 2 grey levels

Ex Libris
[email protected]................................................

Moir patterns
M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

37

Posterization
Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

38

Compression must often be applied to media data. Compression may be lossless or lossy.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

39

original data

original data

compress decompress compressed data

compress

compressed data decompress

decompressed data

Lossless compression
Ex Libris

Lossy compression
M a c Avo n M e d i a

[email protected]................................................

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

40

Different compression algorithms are applicable to different types of media data. Their effectiveness depends on the characteristics of the data itself.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

41

Digital Representation of Media

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

42

There are established ways of representing images, video, animation, sound and text in bits.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

43

Media data may be represented as a textual description in a suitable language, or as binary data with a specific structural form.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

44

Images are displayed as arrays of pixels and represented using an internal model. Generating the pixels from the model is called rendering.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

45

An image made up of pixels

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

46

Images may be modelled as bitmaps or vector graphics.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

47

A bitmap is an array of logical pixels (stored colour values) that can be mapped directly to the physical pixels on the display.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

48

logical pixels
9BB5FF 86B5F9 7AACEB 74A8E2 6698D3 B1CFFF B0DBFF A0CCFF 87B7F9 6491D5 B0D2FF ADD9FF A6D3FF 99C4FF 7AA6EF A9CFFF A9D6FF A1D0FF A3D0FF A1CEFF 9FCBFF 9FD3FF A0D0FF A2D0FF A5D2FF

physical pixels

Simple bitmapped image representation

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

49

In vector graphics, the image is stored as a mathematical description of a collection of individual lines, curves and shapes making up the image, which requires computation to render it.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

50

<?xml version=1.0 encoding=utf-8?> <!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd> <svg xmlns=http://www.w3.org/2000/svg> <path fill=#F8130D stroke=#1E338B stroke-width=20 d=M118,118H10V10h108V118z/> </svg>

A simple vector graphic image

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

51

Vector graphics are often smaller than bitmaps, are resolution-independent and can be scaled without loss of quality, but they are only suitable for certain sorts of synthetic image, not photographs.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

52

A vector drawing and a digital photograph

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

53

Transforming the vector image and applying effects to the bitmap

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

54

Scaling a vector image (left) and a bitmap (right)

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

55

Moving pictures can be created as live-action or animation.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

56

Live-action must be stored as video. Animation may be represented in other more flexible or efficient ways.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

57

Frames from an animation

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

58

Video frames require a lot of storage so video is invariably compressed for delivery.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

59

Sound can be represented as a sequence of samples after digitization.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

60

CD audio is sampled at 44.1 kHz, higher sampling rates are sometimes used. Audio delivered over the Internet is compressed, often using the MP3 codec.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

61

A character set is a mapping from characters to character codes. Unicode is a character set capable of representing text in all known languages.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

62

A font is a set of character shapes, called glyphs.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

63

ABCDEFGHIJKLMNOP QRSTUVWXYZ abcdefghijklmnopqr stuvwxyz 1234567890 ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnopqrs tuvwxyz 1234567890

ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnopq rstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRS TUVWXYZ abcdefghijklmnopqrst uvwxyz 1234567890

A small selection of fonts

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

64

Many aspects of layout must be controlled when text is displayed.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

65

MOLOREET VOLOREET EXEROS Etum adionse feuis non henim ipsusting etum iriure magna feu feummy nis augiam, quat. Minit nibh exer aut augait wisim autpat. Ut irilit pratisci blamconse min ullaorper il deliquamet, volorer ostrud te magna at. Uptatie dolore doluptat nim velisci psuscidui tat. Lum veniatum vel init lum velit am dolutat, sissequis numsandreet at.

Moloreet Voloreet Exeros

Etum adionse feuis non henim ipsusting etum iriure magna feu feummy nis augiam, quat. Minit nibh exer aut augait wisim autpat. Ut irilit pratisci blamconse min ullaorper il deliquamet,volorer ostrud te magna at. Uptatie dolore doluptat nim velisci psuscidui tat. Lum veniatum vel init lum velit am dolutat, sissequis numsandreet at.

Layout and typography

Ex Libris
[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

66

Interactivity is produced by executing a program in response to user input. In multimedia, programs are often written in a scripting language, such as JavaScript or ActionScript.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a

F u n damen t a l s

Po c ke t P D F Key Po i nt S l i d e s

67

Metadata is structured data about data, which may be attached to media files to help with searching and classifying them.

Ex Libris

[email protected]................................................

M a c Avo n M e d i a