Multimedia. Hoorcollege Webdesign 6 21 mei 2014 Christof van Nimwegen

Transcriptie

1 Multimedia Hoorcollege Webdesign 6 21 mei 2014 Christof van Nimwegen

2 Multimedia: Wat is het? 2

3 Multimedia: Welke media hebben we? Graphics Audio Bovenstaande gecombineerd en timebased: Video Animations (olfactory, haptic,.) 3

4 Graphics 4

5 Graphics: Menselijk gezichtsvermogen Zichtbare golflengten licht deel van daglicht Netvlies van oog bevat lichtreceptoren staafjes: intensiteit kegeltjes: kleur (3 typen) Gewaarwording beeld in hersenen complex proces, meer dan samen voegen signalen. Onze kleur perceptie wordt bepaald door 3 verschillende groepen golflengten. Elke kleur kan hiermee gemaakt (gezien) worden herkenning vormen, objecten: Gestaltprincipes (OIS) 5

6 Graphics: Hoe goed zien we? Staafjes bepalen gevoeligheid detail -> hogere resolutie niet meer dan 35 pixels/cm nodig voor beeldscherm computer ipad 3: ongeveer 100 pixels/cm Kegeltjes bepalen kleurgevoeligheid ca kleurnuances 6

7 Graphics: Hoe betrouwbaar is het oog?

8 Graphics: Kleur erbij verzinnen

9 Graphics: Gestalt principes Ontwikkeld 1e helft 20e eeuw (Max Wertheimer) Ordening waargenomen eenheden tot grotere gehelen Gestalt en Web design: /05/gestaltpsychologie -en-webdesign/ voor- en achtergrond gelijkenis nabijheid 9

10 Graphics: Gestal-Prägnanz

11 Graphics: Gestalt principes continuïteit voor- en achtergrond geslotenheid gelijkenis nabijheid 11

12 Graphics: Digitaal op het web Twee typen: Bitmap (raster) afbeelding als verzameling pixels Vector graphics afbeelding als verzameling geometrische vormen 12

13 Graphics: Bitmaps zijn pixels! Een pixel wordt opgeslagen als binaire code die een kleur representeert Hoe meer kleur per pixel, en hoe groter het bestand Een bitmap heeft (eigenlijk) geen fysieke dimensie Een bitmap heeft wel een pixel-dimensie 13

14 Graphics: Bitmaps zijn pixels Ministeck?

15 Graphics: Lijnen Een rechte lijn.. Bestaat als concept wel, en ook op papier, maar in het geval van pixels kan het niet altijd Anti-Aliasing Een techniek, om toch mooie graphics te krijgen bij een lagere resolutie. Bijvoorbeeld bij een lijn zie je op de computer vaak zogenaamde "trapjes". Door naast deze trapjes een tussen kleur te zetten lijkt het trapjes effect minder erg.

16 Graphics: Camera s en megapixels Wat zijn megapixels? In een camera: Een sensor legt het beeld vast 4128 * 3096 = px! 13 Megapixels! Om goede foto-afdrukken te kunnen maken (10 x 15 cm) heb je een toestel nodig met minimaal 2 Megapixels

17 Graphics: Heeft de ouderwetse film pixels? Korrels Een 100 ASA film heeft een fijne korrel Een 3200 ASA een grove. Dit wordt duidelijk op het moment dat je een foto gaat uitvergroten; een 100 ASA foto kan verder uitvergroot worden dan een foto die gemaakt is met een 3200 ASA film In het beste geval 35mm: 20 miljoen kwaliteits pixels

18 Graphics: Kleur

19 Graphics: Kleur in het dagelijks leven Basis component in visuele communicatie Denk aan de natuur Symbolismen, connotaties (Roze, Blauw) Waarschuwen Aantrekking (dieren etc) Onderscheiden Identificatie Esthetica Bv. op website: nadruk geven, aandacht trekken Stemming Smaak (kleding, autos) Emotie (warm koud)

20 Graphics: Kleurenblindheid 8 % van de mannen, 0.5% van de vrouwen

21 Graphics: The power of color

22 Graphics: Kleur RGB (red, green, blue) zijn de additieve primaire kleuren kleuren van lichtbronnen pixelkleuren bestaan uit een mix hiervan schermkleuren gespecificeerd met drie waarden Gebruikelijk: 1 byte per kleur range per kleur: 0,255 16,8 miljoen kleuren mens kan er ongeveer 10 miljoen onderscheiden 22

23 Graphics: RGB Op licht gebaseerd 3 additive primaire kleuren Rood + Groen + Blauw = Wit Elke mix van 2 is lichter dan de losse kleur

24 Graphics: RGB in monitor of TV Is een licht model

25 Graphics: RGB Complementaire kleuren: 2 kleuren samen wit Geel + Blauw = Wit Magenta + Groen = Wit Cyaan + Rood = Wit

26 Graphics: RGB RGB 3 variabelen, samen 1 kleur, bv RGB (255,201,012) Als elk van de 3 kanalen 256 waarden kan hebben, kan een pixel 256*256*256 = kleuren aannemen

27 Graphics: CMYK De 3 additive primaries (RGB) vormen wit. Waar ze overlappen ontstaan Yellow, Magenta, Cyaan. CMYK: Wit Alles = Zwart (meer kleur geabsorbeerd > donkerder) Gaat niet meer uit van direct licht, bij subtractieve mengingen wordt er steeds minder licht weerkaatst, er wordt steeds meer kleur weggehaald, geabsorbeerd. 1. Licht valt op wit papier > alle kleuren doorgelaten > Wit 2. Kleur x op papier > absorbtie bepaalde kleuren > donkerder

28 Graphics: YUV (bv. In JPEG) Afkomstig van kleurentelevisie Y = helderheid of luminantie U, V = kleurcomponenten of chrominantie Eenvoudig te berekenen uit RGB Y = R G B U = 0.492(B - Y) = R G B V = 0.877(R - Y) = R G B Gerelateerd aan gevoeligheid oog 28

29 Graphics: HSV HSV (hue, saturation, brightness) Een menselijk model Zoals schilders, ontwerperd denken over kleur Non-lineaire qweergave Als het ware een andere interface Hue (pure kleur, waar op cirkelrand) Saturation (verzadigdheid, waar op straal) Value (helderheid: mengen met wit of zwart, waar op de straal

30 Graphics: belang web kleur, bv. online editing

31 Graphics: Dithering - suggereren van kleur Er moet uitgerekend worden welke combinatie van het beperkte kleurenpalet de oorspronkelijke kleur kan weergeven. Stel dat een grijs kleur getoond zou moeten worden, dan is na dithering de kleuren wit en zwart dicht tegen elkaar aan gezet, waardoor het grijs lijkt.

32 Graphics: Dithering met kleur

33 Graphics: Direct color vs. Indexed color Direct: RGB direct naar electrons 255*255*255 : kleuren Indexed: met een Palet CLUT: Color Lookup Table Bv. Gif

34 Graphics: Kleurdiepte Het aantal beschikbare kleuren (per pixel) en dus in mijn beeld 1 bit 2¹ (2 kleuren) 2 bit 2² (4 kleuren... 8 bit (256 kleuren) 16 bit ( kleuren) 24 bit (> ) True color (3 kanalen van 256)

35 Graphics: Kleurdiepte Monochrome graphics 1-bit pixel diepte. (puur zwart - wit)

36 Graphics: Kleurdiepte Grijswaarden graphics: meer pixel diepte (bv 4bit, 16 kleuren) (alleen wit, grijstinten en zwart)

37 Graphics: Kleurdiepte 8 bits per pixel: 256 kleuren

38 Graphics: Kleurdiepte 24 bits per pixel: miljoenen kleuren

39 Graphics: beeld bewerking Bitmaps op webpagina s vereisen gewoonlijk bewerking Vroeger met de hand Nu met speciale software Dus niet in output (foto) maar in de bron Op diverse niveaus, o.a. Pixel point processing Pixel group procesing Geometrische transformaties

40 Graphics: beeld bewerking Bewerking waarbij voor elke pixel een nieuwe waarde berekend wordt

41 Graphics: beeld bewerking - negatief Originele afbeelding Negatief f(p) = Wit - p

42 Graphics: beeld bewerking - helderheid Originele afbeelding Minder helder (per pixel)

43 Graphics: Pixel point processing- contrast Originele afbeelding Hoger contrast

44 Graphics: Pixel group processing De nieuwe waarde van een pixel wordt berekend niet alleen op basis van zijn oude waarde, maar ook op de waarde van omringende pixels Zwaardere berekening (blurring, speciale effecten, etc..)

45 Graphics: Pixel group processing Voorbeeld: Filter berekent pixel-waarde van pixels eromheen Nieuwe waarde: (20/9 + 21/9 + 22/9 + 19/9 + 45/9 + 48/9 + 47/9 +47/9 + 47/9) = 35.1

46 Graphics: Scaling, interpolatie Groter maken: Geen 1-op-1 mapping van pixelswaardes want er zijn er veel meer in de nieuwe afbeelding. We hebben een manier nodig om de missende waarden in te vullen bv vergroten van 10 > 15 pixels, je kunt niet gewoon alles 2X nemen Met kleiner maken hetzelfde probleem: 1 pixel correspondeert met een groter gebied van onze oude afbeelding. Nemen we het gemiddelde? Of? Het is een re-constructie probleem. Vergroten: we hebben dus te weinig info. Deze methode van invullen noemen we interpolatie

47 Graphics: Scalingmethoden Nearest neighbour Gebruik de kleur van een nieuwe pixel s dichtste buren. Snel, licht, maar vaak lelijk, blokkerig resultaat Bilineare interpolatie De waarden van meerdere aangrenzende Pixels. Beter resultaat Bicubic interpolation zachte bochten ipv rechte lijnen voor Pixelberekening betere resultaten, maar zware berekening, vaak TE geblurred

48 Graphics: Bitmap beeldformaten GIF (compuserve) slechts 256 kleuren, transparantie voor 1 kleur, prima voor simpele afbeeldingen. Lost het rectangular probleem deels op, zijn beperkt animeerbaar (animated gif) JPEG goed met foto s, kleine files PNG kwam als alternatief voor GIF, vele kleuren, vaak ondersteund door browsers, steeds meer gebruikt Buiten web: Bitmaps: TIFF, BMP, TG

49 Graphics: Compressie Waarom? Bandbreedte, Opslag Lossless compressie Geen verlies. Het bestand (beeld) kan exact gereconstrueerd worden Omkeerbaar. Bekendste voorbeeld: ZIP Essentieel in Medische beeldbestanden, Archivering, software) Lossy compressie Wanneer informatie-verlies geen probleem is. Vaak effectiever dan lossless Onomkeerbaar. bekendste voorbeeld: JPEG

50 Graphics: Lossless compression Runlength encoding (RLE), puur sequentieel IPV 12x12 = 144 pixelwaardes: Analyseer opeenvolging van dezelfde waarden Nu nog maar 37x pixelwaardes!

51 Graphics: Lossless compression LZW: dictionary based

52 Graphics: Lossless compression Variable length coding (bv Huffman) Maakt gebruik van het feit dat sommige kleuren meer voorkomen dan andere (zoals in alfabet! Q vs. E)) Dus bv: Geef de meest voorkomende kleur de korte code, 1 bit Geef de op 1 na meest voorkomende kleur bv 2-bit.etc etc. Kleur Hoe vaak Huffman-Code

53 Graphics: Lossy compression - JPEG Lossles kan eigenlijk met alles / lossy niet: Er wordt data weggehaald Bekijkt de afbeelding iets meer zoals een mens het zou beschrijven, kijkende naar gebieden, patronen en kleuren. Informatie uit hoge frequenties minder belangrijk voor perceptie Is goed met een groot scala aan en verloop van kleuren Behaalt goede compressieresultaten, kleine files.(vaak tot 5%).Maar is nooit 100% reconstrueerbaar.goed oppassen met compression artefacts

54 Graphics: Vectorafbeeldingen Een geometrische definitie: coordinaten-beschrijving Voordelen: Goed resizable: resolutie onafhankelijk Kleine files Vrije vorm: geen achtergrond Geschikt voor gebruik bij animaties Nadelen: Slecht voor fotorealistiche afbeeldingen, is cartoon-achtig Kan niet zonder meer op webpagina Minder effecten mogelijk

55 Graphics: Vectoren zijn niet goed voor foto s

56 Graphics: Vector afbeelingen moeten uiteindelijk naar pixels worden vertaald probleem: eindige grootte pixels als je een lijn tekent, wordt die hakkelig oplossing: anti-aliasing (browser-taak!) voeg grijstinten (overgangstinten) toe 56

57 Graphics: Vector images - SVG Scalable Vector Graphics W3C recommendation Steeds beter ondersteund Bv voor diagrammen 57

58 Graphics: Vector afbeeldingen (Fonts) 58

59 Graphics: Resumerend Vector vs Bitmap Resizing Bitmap Resizing Vector Vrij vs rechthoekig

60 Audio ge luid (het ~, ~en) 1 zich door de lucht voortplantende trillende beweging die door het gehoor waargenomen wordt 2 bepaalde klank die door een persoon, dier of zaak wordt voortgebracht 3 mening, oordeel au dio- 1 betrekking hebbend op geluid

61 Audio: Geluid is overal

62 Audio: Het menselijk oor 1. gehoorgang 2. trommelvlies 3. hamer 4. aambeeld 5. stijgbeugel 6. ovale venster 7. buis van Eustachius 8. slakkenhuis 9. gehoorzenuw

63 Audio: Wat is uniek aan geluid Het werkt 360 graden Is op afstand waarneembaar (anders dan bv. tast) Verschillende bronnen tegelijk hoorbaar (cocktail-party problem) Altijd temporeel; het heeft een begin en een eind Lastiger (of niet!) te negeren = MIX Kan gehoord worden tijdens vele andere bezigheden Bij taal: je hoeft niet te kunnen lezen Kost minder moeite dan bv. Lezen Illusies ook auditief?

64 Audio: Wat is geluid Trillingen die zich door nagenoeg alle materialen kunnen verplaatsen Dit veroorzaakt een wisselende druk in lucht, die zich als een golf voortplant. Het medium wordt wordt verstoord door het trillende object (luidspreker, stemvork, stem, speld) De snelheid van geluid is +/- 340 m/s in lucht (1224 km/uur) m/s in water m/s in steen

65 Audio: Frequentie In geluid: toonhoogte (pitch) Het aantal trillingen per seconde en wordt uitgedrukt in Herz Lager Pure toon 300 HZ Hoger Pure toon 3000 Hz

66 Audio: Amplitude Amplitude in geluid: Geluidssterkte (Volume, db, logaritmische schaal) Luchtdeeltjes krijgen meer energie, meer druk Bv. een geluid, dezelfde frequentie (toonhoogte) Harder Zachter

67 Golflengte De golflengte is de afstand tussen twee toppen van een golf.

68 Audio: wanneer heeft het zin? Als audio het doel is als het het enige waarneembare is als er al teveel ander (bv. visuele) input is als het nodig is om iets uit te leggen functioneel in films, games, etc als de omgeving het faciliteert meer informatie communiceren gehandicapten tool eenvoudige bewerkingen op audiosignaal 68

69 Audio: Geluid digitaliseren

70 Audio: formaten Ongecomprimeerd WAV, AIFF,. Lossless compressie Lossless WMA Lossy Compression Lossy WMA, MP3, Vorbis, AAC, others 70

71 Audio: MP3 Fraunhofer IIS ( MPEG: Groep audio- / videoprofessionals die de standaard samenstellen Layer: Mate van complexiteit van de compressie Muziek delen via internet Voorheen MP3 sites, later P2P netwerken, en Itunes Kleinere bestanden sneller verzonden

72 Audio: MP3 Perceptuele compressie: maakt gebruik van karakteristieken menselijk oor Minimum gehoordrempel: Zachte geluiden worden niet geheel verwijderd, maar ze hoeven er ook niet zo nauwkeurig op te staan als de hardere geluiden. Masking: Op basis van het principe dat onze oren geen zachte geluiden kunnen horen op het moment dat er een harder geluid klinkt dat erop lijkt. Joint stereo: Bezuinigen op bitratio door te veronderstelt links en rechts vele identieke frequenties > als mono gecodeerd Huffman coding veel voorkomende geluiden: krijgen kortere bitcodes (lossless, niet perceptueel)

73 MP3: parameters kies de parameters goed (minimaal). analoog digitaal digitaal 40kbps, 8000Khz 128kbps, 44.1Khz bitrate: tussen 128 en 192 Kbps volstaat (cd heeft 1400kbps) te laag:.40kbps >>> TUNNEL/ONDERWATER GELUID, frequentie: 44.1kHz volstaat te laag: Hz >>> RUIS, KRAAK, BLIKKERIG 73

74 Audio: MP3 Voordelen Goede compressie X Defacto standaard (zelfs autoradios spelen het) Laagdrempelige verspreiding Nadelen Voldoet niet aan de hoogste eisen Stereo niet zo goed De platen-business ain t happy Let op hoe je converteert

75 MP3: parameters Kies de parameters goed (minimaal). Analoog digitaal digitaal 40kbps, 8000Khz 128kbps, 44.1Khz Bitrate (cd 1400kbps): 192 Kbps OK (mate compressie, wat weggehaald wordt) Te laag:.40kbps >>> TUNNEL/ONDERWATER GELUID, Frequentie: 44.1kHz volstaat (44100 X per seconde!) Te laag: Hz >>> RUIS, KRAAK, BLIKKERIG

76 MIDI (Musical Instruments Digital Interface) Een standaard communicatie protocol om muziek- data uit te wisselen tussen synthesizers, computers, software apps, e.a. Geen gesampelde data, alleen performance data: een beschrijving Definieert: Kanalen met midi-messages Welke instrument hoelang, stereo effecten, duur, aanslag etc. Een wavetable wordt aangeroepen, een geluidenbank op je geluidskaart

77 Video 77

78 Video Registratie van de beweging in de werkelijkheid Sequentie van afzonderlijke beelden (still images, stills) vastgelegd in frames (24 beelden per seconde) 78

79 Video: hoe betrouwbaar kijken we? In het echt Video kijkend We nemen extreem grote verandering in de bijzaken soms niet waar heeft te maken met Gestaltprincipe voorgrond-achtergrond interessant voor compressie 79

80 Video: formaten op WWW FLV (Flash Video) WMV (Windows Media Video) MPEG-4 MOV (Quicktime) Shockwave RV (RealVideo ) others, more offline (AVI, MKV, ASF..) 80

81 Video compressie: Niet: 24 keer een jpeg comprimeren Gebruikt redundantie veel overlap tussen opeenvolgende beelden inter-frame compressie slaat verschillen tussen frames op zwarte pixels: waarde 0 => efficiënte compressie Inder frames Zoals bij JPEG: maak gebruik van kennis over menselijke perceptie Ook hier geluid comprimeren 81

82 Video: Compressie met MPEG Difference frame, compressie door opslaan verschil

83 Video: (1 van de) Compressiestandaards MPEG 1 1,86 Mbps; motion compensation; matige kwaliteit MP3 MPEG 2 DVD, digitale TV MPEG 4 part 2: verbetert MPEG 1 part 10 (H.264): sterk geoptimaliseerd (192 kbps->redelijke kwaliteit) default standaard YouTube meer info over MPEG: 83

84 Animatie 84

85 Animatie Menu s Transities? Cartoons letterlijk Reclame Games on the web 85

86 Animatie beweging simuleren snel achter elkaar tonen van een serie afbeeldingen (frames) elk frame toont een afzonderlijke fase van de beweging 86

87 Animatie 87

88 Animatie Animatie frames beweging kunstmatig geproduceerd Video beweging -> frames registratie via camera Animatieprincipes veranderen, traditioneel bepaald door film zie artikel Lasseter op website (voor de liefhebber) Animatieconcept uitgebreid door webtoepassingen Kort, niet-lineair, interactief, variabele afspeeltijd 88

89 Animaties: Animated GIF Sequentie van bitmapped images in 1 file 256 kleuren (custom palette) Beweging eenmalig of als loop Afspelen op website zonder plug-in img element, embedded zoals alle images 89

90 Animatie: formaten op WWW GIF (!) Flash (& Shockwave) Games Video Animaties Menus HTML5 + CSS3 In development, it ain t easy! SVG is ook animeerbaar!! 90

91 Animatie: Motion compensation bepaalde objecten veranderen alleen van plaats difference frame difference frame met motion compensation 91

92 Animatie: Compressie- Predicitive motion compensation je kunt ook informatie uit de toekomst gebruiken hier: ontbrekende stukken achtergrond kleine visje B-frame: bi-directionally predictive frame relaties:

93 Vragen? 93