16 kanäle je leitung, general midi channel messages: note ... · © h.-d. wuttke 2004 websichere...

© H.-D. Wuttke 2004

Zusammenfassung MIDI

Metasprache16 Kanäle je Leitung, General MIDIchannel messages: Note on (9x), Note off (8x)system messages: Start (FA), Stop (FC)

ProtokollRS 232 asynchron, 31,25kBaud, 10Bit je InfobyteZeitbasis: PPQ oder SMPTE


VERGLEICH (Sampling MIDI)

Originalklänge MetadatenSamples KommandosInstrumente SynthesizerReproduktion Interpretation 10,5 Mio Byte/Min 20 kByte/MinSamplerate KommandofolgeNyquist, Aliasing Seriell => ParallelRauschen (SNR) Standard (GMIDI)Mischen Komponieren- Editieren


Graphik

Farbsehen

Farbmodelle

Ausgabegeräte

Auflösung

Formate


FARBSEHEN - Retina

Stäbchen (rod)Rezeptoren für Helligkeit (sehr empfindlich)

Zapfen (cone)Rezeptoren für Farbe 3 Arten mit unterschiedlicher Empfindlichkeit für Rot, Blau, Grün


FARBSEHEN - Spektrum

Rot, Grün, Blau


FARBSEHEN

Rot, Grün, Blau (Spektrum)


Licht als Welle

Wellenlängen maxRot: 500 – 780 nm 560 nmGrün: 450 – 650 nm 530 nmBlau: 380 – 500 nm 430 nm

Verteilung der ZapfenRot: 64%Grün: 32%Blau: 4%


FARBSEHEN

Empfindlichkeit für Rot, Grün, Blau (Spektrum)

Quelle: Ze-Nian Li : Script Multimedia Systems, Simon Fraser University, Canada


FARBSEHEN

Sonnenlicht im Tagesverlauf

15° rot (langer Weg => langwelliges Licht => rot)

45° weiß

60° blau (kurzer Weg => kurzwelliges Licht => blau)

☺

☺☺


FARBSEHEN

Farbe als Überlagerung von drei Farbanteilen

Gesucht sind Modelle, die durch alleinige Addition oder Subtraktion alle Farben des sichtbaren Lichts erzeugen können

Problem: Manche Farben erfordern „+“ und „-“z.B. Wellenlänge 500nm


FARBSEHEN

RGB Kurven zur Erzeugung aller Farben

0,05B + 0,06G – 0,09R ~ 500nmQuelle: Ze-Nian Li : Script Multimedia Systems, Simon Fraser University, Canada


FARBMODELLE

CIE-Modell • 1931: CIE (Commission Internationale de L'Eclairage)

E

Illuminate

λQuelle: Ze-Nian Li : Script Multimedia Systems, Simon Fraser University, Canada


FARBMODELLE

CIE chromaticity diagramxyz als 3D- Anordnung oder Projektion in 2D(Hufeisen-Modell) (Annahme: x+y+z=1)



FARBMODELLE

L*a*b (Lab) Color Model

Verfeinertes CIE Modell 1976L: Luminanza: Grün (-a) bis Rot (+a)b: Blau bis Gelb

genutzt in PhotoshopQuelle: Adobe® Photoshop Elements


FARBMODELLE (HSB)

QuelleAdobe® Photoshop Elements

Chrominanz: H: Hue (°) Farbton (B)S: Saturation (%) Sättigung (A)

(Grauanteil im Verhältnis zum Farbton 0%=Grau)Luminanz: B: (Brightness) (%) Helligkeit (C)

(0%: Schwarz, 100%: Weiß) Farbton (Rad) (D)

Farb-Kreis


FARBMODELLE (HSB)

Chrominanz: H: Hue (°) Farbton (B)S: Saturation (%) Sättigung (A)

Luminanz: B: (Brightness) (%) Helligkeit (C)

Menschliches Sehvermögen:H: 128 FarbtöneS: 130 Stufen (Levels)B: 16 ... 26 Stufen (blau...gelb)

=> 21 * 128 * 130 ~ 350 000 verschiedene Farben


FARBMODELLE (RGB)

Farbwürfel(diagonal: Komplementfarben)

Komplement(Ergänzung zu (FF,FF,FF))

3 x 8 = 24 Bit 2^24 = 16 777 216 Farben „True Color“(zur Erinnerung: unterscheidbar: 350 000!)=> 3 x 6 = 18 Bit => 2^18 = 262 144

(00,FF,FF)

(FF,FF,00)

R:(FF,00,00)

B:(00,00,FF)G:(00,FF,00)

(FF,00,FF)


FARBMODELLE (RGB)

Komplementfarbe(10s Konzentration auf roten Kreis)

R:(FF,00,00)


FARBMODELLE (RGB)

Komplementfarbe(10s Konzentration auf Kreis)

R:(FF,00,00)


FARBMODELLE (RGB)

Komplementfarbe(10s Konzentration auf Kreis)


Websichere Farben

Abbildung beliebiger Farben auf Rastermöglicher Farben.

Bei gleichmäßiger Stufung von RGB:Kubikzahlen (8, 27, 64, 125 oder 216)2, 3, 4, 5 oder 6 Stufen je Farbanteil

6 Stufen entsprechen 20%iger Stufung⇒ (00, 33, 66, 99, CC, FF)Hex⇒ 6 x 6 x 6 = 216 Farben in Farbpalette


Websichere Farben

⇒ 6 x 6 x 6 = 216, Auswahl über 8 Bit-Adresse

⇒ 216 Farben, die Plattform-unabhängig von allen Browsern verwendet werden. Teilsatz der 8-Bit-Farbpaletten unter Mac OS.

Durch die ausschließliche Verwendung dieser Farben wird gewährleistet, dass Bilder, die für das Internet bestimmt sind, auch auf Systemen mit 256 Farben korrekt angezeigt werden.


FARBMODELLE (RGB)

Beamer(„Lichtfarben“)

Addition(von „Helligkeit“)


FARBMODELLE (CMY)

Cyan Magenta YellowDrucker(„Körperfarben“)

Subtraktion(von „Helligkeit“)


FARBMODELLE (RGB CMY)

RGB CMY



FARBMODELLE (CMY RGB)

Umrechnung:

Komplement

C =1 – R

R =1 – C

CMYK: K Black



FARBMODELLE (Vergleich)

L a b umfassend

RGB und CMYKnur Teilbereich

z.B. Kein reines Gelb


Bild - Auflösung Monitor - Auflösung

Bild - Auflösung: (ppi)Bildelemente: Pixel (Kunstwort: Picture Elements)

Pixelanzahl = Pixel pro Zoll (pixels per inch, ppi)

= Bit-Map – Elemente im Graphikspeicher

Monitor / Drucker- Auflösung: (dpi)Bildpunkte pro Zoll (dots per inch, dpi) Farbpunkte pro Zoll


Bildschirm-Auflösung

1x1 Zoll Bild mit 144ppi

auf Bildschirm mit 72dpi

wird auf 2x2 Zoll Fläche dargestellt.

Faktor 2 in jede Richtung!

=> 4-fache Größe, 4-facher Speicherbedarf


Bild - Auflösung, Bildgröße (ppi)

Anzahl der Elemente im Graphikspeicher => Eigenschaft des Bildes

Beispiel:

1x1 Zoll benötigt bei

72 ppi => 5 184 Pixel (72^2)300 ppi => 90 000 Pixelx 4 => x 16 => quadratische Abhängigkeit

200 %

72ppi 300ppi


Bild - Auflösung, Bildgröße

13 x 9 Bild mit 600 dpi gescannt: (3152 x 2128) Pixel x 3 Byte/Pixel

gespeichert als BMP 19 651 kByte 6,7 Mio PixelJPEG 417 kByteGIF 2 200 kByte => BMP => 6,5 MByte


BMP 19 651 kByte


BMP 6 500 kByte


JPEG 417 kByte


Monitor - Auflösung

Gesichtsfeld: Bereich des scharfen SehensSeitenverhältnis (aspect ratio) ~ 4:3

z.B. 640 x 480 VGA (video graph. array)Beamer: 1024 x 768 XGA (1024 x ¾ = 768) 15‘ Monitor: 800 x 600 S-VGA

Bildschirmauflösung: Punkte pro Zoll, dots per inch (dpi)

Einstellbar, üblich 72 ... 96 dpi15‘ Monitor: 12‘ : 9‘ 152 = 122 + 92

12 x 72 = 864 9 x 72 = 64812‘

9‘15‘


Monitor - Auflösung

Gesichtsfeld: Bereich des scharfen SehensSeitenverhältnis (aspect ratio) ~ 4:3

z.B. 640 x 480 VGA (video graph. array)Beamer: 1024 x 768 XGA (1024 x ¾ = 768) 15‘ Monitor: 800 x 600 S-VGA

Bildschirmauflösung: Punkte pro Zoll, dots per inch (dpi)

20‘ Monitor: 16‘ : 12‘16 x 72 = 1152 12 x 72 = 864

20‘ 12‘

16‘


Varianten

Monochrom (Schwarz/Weiß)1Pixel=1Bit 640x480 => 37,5kByte

Graustufen (Gray Scale)1Pixel=1Byte 640x480 => 300kByte

True Color 1Pixel=3Byte 640x480 => 900kByte

Auch mit 4Byte (1für α)



Varianten

True Color 1Pixel=3Byte (+1Byte α)640x480 => 900kByte(JPEG)

8-Bit Farbe256 aus 16777216 Farben640x480 => 300kByte

Color Look-Up Table(GIF)



Drucker-Auflösung

Ebenfalls in dpi

Üblich: Laser 600 ... 1200 dpiTintenstrahl 300 ... 4800 dpi

Gute Qualität bis zu 150 ppi

Interpolation

Bis zu 32 Tröpfchen pro Pixel, 1,2 Mio Farben


FARBMODELLE (RGB CMY)

Monitor: Addition Drucker: SubtraktionRGB CMY

zu dunkler Fläche von heller Fläche wirdwird Helligkeit addiert Helligkeit entfernt

Lichtfarben KörperfarbenPrisma auch in Fotographie


ZUSAMMENFASSUNG

Farbe: Überlagerung von FarbwertenRGB AdditivCMY Subtraktiv

Auflösung: Kompromiss zwischen Qualität und Speicherbedarf

ppi Bild im Speicherdpi Ein-/Ausgabegerät


Graphik - Formate

Vektorgraphikgeometrische Figuren, exakte Berechnung auf beliebige Größe (ppi)

Rastergraphikfeste Anzahl von Bildpunkten (ppi)Wiedergabe durch Interpolation (dpi)z.B. 1 ppi => 2 dpi


Raster- und Vektorformate• Vektorformate

- Mathematische Beschreibung der Objekte- Jedes Bildelement (Primitive) wird durch

seine Parameter gespeichert

- Postscriptsprachen

- Vektordaten werden nur verlustfrei komprimiert

- Darstellung von Grafiken, Buchstaben

• Vorteile- frei skalierbar- Kompakte Darstellung des Bildes

• Nachteile- nicht für komplexe Bilder (Fotos)

- Darstellung plattformabhängig

- Verschiedene Programme -

verschiedene Algorithmen zur Konstruktion der Vektorobjekte

Typische Vektorformate WMF, EPS


WMF (Windows Meta File)

• Vektorformat

• eng mit dem System Windows von Microsoft verknüpft

• für den Austausch von Grafiken über die Zwischenablage (Clipboard)

• speichert Grafiken als eine Folge von Funktionsaufrufen(Konstruktionsanweisungen) mit den dazugehörigen Parametern.

• "Graphic Device Interface" (GDI) für die Ausgabe auf dieentsprechende Hardware.

• GDI enthält Bibliotheken von grafischen Objekten (Kreise, Rechtecke, Ellipsen, Kreisbögen usw.)


Aufbau der WMF-Datei

1 bis n mal wiederholen

Maßeinheit der WMF-Objekte ist ein twip (twentieth of a point = 1/1440 Zoll)

1440 / 20 =72 => 72ppi Header (18 byte)

Record

Record

.

.

.

00


Aufbau der WMF-Datei

Header:

• Speicherort der WMF-Datei (1= Hauptspeicher, 2=Platte) • Länge des Headers in Words (1 Word = 2 Byte)• die benutzte Windows-Version • die Gesamtlänge der WMF-Datei in Words • die Anzahl der in der Datei gespeicherten Objekte • die Länge des längsten vorhandenen Objektsatzes

Record:

• die Länge des Records in Words • die Nummer der GDI-Funktion (definiert in windows.h) • die Parameter der Funktion


Raster- und Vektorformate• Rasterformate

- Rechteckige Matrix mit kleinen Bildelementen (Pixel)- Jedem Bildelement entspricht ein Farbwert- Je ein Farbwert wird in Bilddatei gespeichert

(Farbpalette)

- Speicherung: sowohl verlustfrei als auch verlustbehaftet komprimiert

- Darstellung von Fotos

Typische Rasterformate sind GIF, JPEG, PNG, TIFF, BMP

• Vorteile- Plattformunabhängig

- Detaillierte Darstellung der Bildobjekte

- Viel größere Datenmenge als im Vektorbild

• Nachteile- Rasterbilder werden schlecht skaliert

• Zwei Typen der Raster- und Vektordateien- Bildschirmabbildung und Druck


GIF (Graphics Interchange Format)

• Entwicklung- 1987: GIF87a - 1989: GIF89a

• ZielRasterbilder in Netzen

• Eigenschaften- Plattformunabhängig- Interlacing

Bild wird in bis zu 4 Schichten abgespeichert

Ladezeit erscheint kürzer, der Ladevorgang wird sichtbar gemacht- Transparenz

Eine Farbe des Bildes kann man als transparent definierenDurch zusätzlichen Alpha-Kanal, der zusammen mit der Datei gespeichert ist, gewährleistet

- Animationaufeinander folgende GIF-Bilder in einer Datei (GIF-Animation)

Interl

acing


GIF (Graphics Interchange Format)

• Vorteile- Kleine Datei - Größe

- Viele Möglichkeiten für Webseitengestaltung

• Nachteile- nur 256 Farben- feine Schattierungen als Streifen mit verschiedenen Farbdichten

- Lizenzgebühren für LZW-Algorithmus

- gut für Logos, Schemata, Graphiken• Verwendung


GIF (Datei-Format)

GIF-Terminator

…

[GIF-Erweiterungsblock]

…

Bilddaten

[Lokale Farbtabelle]

Image Descriptor

…

[Globale Farbtabelle]

Screen Descriptor

GIF-SignaturGIF-Signatur- GIF-Kennung und VersionScreen Descriptor- Informationen über das GesamtbildGlobale Farbtabelle- RGB-Modell- kann fehlen, falls lokale PalettenBeliebig viele Teilbilder - Bestehend aus:

Bildinformationsblock (Image Descriptor)optionale lokale Farbtabelle (RGB)Rasterdaten (Bilddaten)

GIF-Erweiterungsblock- für spätere Erweiterungen der Spezifikation

GIF-Terminator- Beendet die GIF-Datei

Beliebig oft wiederholbar

Beliebig oft wiederholbar


JPEG (Joint Photographic Experts Group)

• Entwicklung- JPEG: Expertengremium- Seit 1988 erarbeitet international gültige Standards auf ISO und ITU-Basis für JPEG

• Ziel- Austausch von Fotos im WWW- Anzeigen von Fotos in Präsentationen

• Eigenschaften- Plattformunabhängig

• Vorteile- 16,8 Mio. Farben- Kleine Größe einer Datei

• Nachteile- Verlustbehaftete Komprimierung

- Wiederherstellung des Original-Bildes unmöglich


JPEG (Joint Photographic Experts Group)• Komprimierungsmethode

- Verlustbehaftete Komprimierung- Nicht auf der Suche der identischen Elemente, wie in LZW, sondern auf dem Unterschied zwischen Bildelementen gegründet

Y=f(R,G,B), U=f(R,G,B), V=f(R,G,B)

- Die Daten werden in den Farbenraum Y U V (Y Cb Cr) konvertiert

Y - Helligkeit (Luminanz) U - Chrominanz

V - Chrominanz Y Y

YY

U V

4:1:1

Y Y

YY

U V

4:2:2

U V

8*8

DC AC AC

AC

AC AC

- Diskrete Cosinus Transformation (DCT)

Für jeden Block wird der Satz der Zahlen gebildet (DC- und AC-Koeffizienten)

Erste einige Zahlen stellen die Farbe des Blocks insgesamt dar

Nachfolgende Zahlen stellen feine Details dar

- Quantisierung (Normalisierung)

Ein bestimmter Teil der Zahlen, die feine Details darstellen, entfernt

- ½ oder ¾ der Information über die Farbe entfernt

- Dann werden die Blöcke 8*8 Pixel analysiert


JPEG (Joint Photographic Experts Group)• Komprimierungsmethode

- Im letzen Schritt wird die Huffman-Codierung verwendet

Entwicklung: 1952

Der Zeichensatz analysiert wird, um die Frequenz jedes Symbols zu bestimmen

Für die am meisten sich treffenden Symbole eine Darstellung als minimal mögliche Anzahl der Bits verwendet

Die Huffman-Codierung im JPEG baut auf der Tatsache auf, dass in der Sequenz der AC-Koeffizienten sehr viele Nullwerte existieren

• Verwendung- Eignet sich gut für Fotos

• Unterformate des JPEG-Formats- „Baseline Optimized“

Die Dateien werden ein bisschen besser komprimiert

- „Progressive JPEG“

Unterstützung des Fade-In-Effekts (Interlacing)

Nicht alle Programme unterstützen


JPEG (Joint Photographic Experts Group)

End of Image (EOI)Scan n Data

Start of Scan nTables m

…Scan 1 Data

Start of Scan 1Tables1

Start of FrameTables

Optional APPO JFIF Extensiion Header

APPO JFIF MarkerStart of Image (SOI)

Start of Image- Anfang der JPEG-Datei

APPO JFIF Marker- Definiert einen Informationsblock

Länge des Informationsblocks

- Besteht aus:Zeichenkette „JFIF“

Version Einheit der Auflösung (dpi, dots per cm)

Auflösung in X- und Y-RichtungThumbnail in X- und Y-Richtung

Thumbnail Image (RGB-Werte) (optional)

• JPEG-Datei (JFIF-Datei)

- JFIF- JPEG File Interchange Format

Extension Header- Definiert zusätzliche BildinformationTables- Quantisierungstabellen

Tables 1…Tables m- Huffmantabellen

Start of Frame- Definiert das Frame

Start of Scan- Anfang der komprimierten Daten

End of Image- Ende der JPEG-Datei


PNG (Portable Network Graphics)

• Entwicklung- 1994, 1995- Vermeidung von Lizenzgebühren (Firma Unisys)

• Ziel- Alternative für GIF und JPEG- Darstellung verschiedener Typen von Rasterbildern

• Eigenschaften-Plattformunabhängig

- keine deutliche Teilung zwischen verschiedenen Typen von Paletten- Verlustfreie Komprimierung

- Vorhergehende Filterung der Information

- Interlacing

- Transparenz (Alpha-Kanal mit 254 Schichten)

- Gamma-Korrektion



Verwendet eine Variante der LZ77-Komprimierung (Grundlage für die LZW-Komprimierung)

Verwendet 32-Kbyte gleitendes Fenster ( „slide Window“) für DekomprimierungKomprimierte Daten enthalten die Zeichen und Kodes für eine Dekomprimierung

• Komprimierungsmethode- Verlustfreie Komprimierung

• Vorteile- Unterstützt 8-, 24-, 48-bit Farben - Lizenzfrei

• Nachteile- Dateigröße nicht immer geringer als im GIF- und JPEG-Format

- Nicht von allen Programmen unterstützt

- Huffman-Codierung

• Verwendung- Eignet sich sowohl für Fotos, als auch für Logos, Signete



IEND Chunk

IDAT Chunk n

…

IDAT Chunk 1

PLTE Chunk

IHDR Chunk

PNG Signature

Chunks haben folgendes Format:Länge (Bytes) Typ Daten CRC

• Aufbau einer PNG-Datei- Besteht aus Chunks- Es gibt Basischunks und andere werden von der

Applikationen ergänzt

PNG Signature- Die PNG-Datei als solche kennzeichnet

IHDR Chunk- Definiert eine Bildinformation (Höhe, Breite usw.)

PLTE Chunk- Definiert eine Bildpalette- Es kann nur eine Palette sein

IDAT Chunk- Enthält die komprimierten Daten - Alle IDAT Chunks müssen aufeinander folgen

Basic chunkcs

Chunk=Block

IEND Chunk- Ende der PNG-Datei


GIF oder JPEG?

Formate auf Webseiten:

• Fotos

• Logos

• Text als Bild


• FotosOptimalFarbenanzahl ≥ 256

GIF (200x270 Pixel) 14,8Kb JPEG (200x270 Pixel) 11,9Kb


• FotosFarbenanzahl < 256

Optimal

JPEG (unkomprimiert)GIF (32 Farben)66,0 KB12,0 KB


• Logos

GIF 16 Farben GIF 4 Farben

JPEG Qualität 20 % 3,53 Kb

1,35 Kb2,18 Kb

OPTIMAL


•Text als Bild GIF ist bessere Wahl

GIF 16 Farben 2,51 Kb GIF 3 Farben 1,54 Kb

JPEG Qualität 20% 3.07Kb


Zusammenfassung Graphik - Formate

Vektorgraphik - PS, EPS, WMFgeometrische Figuren, exakte Berechnung auf beliebige Größe

Rastergraphik - BMP, GIF, JPEG, PNGfeste Anzahl von Bildpunkten (ppi)Wiedergabe durch Interpolation (dpi)

Problem: Mac-Entwurf (Vektor) => PC (GIF)

16 kanäle je leitung, general midi channel messages: note ... · © h.-d. wuttke 2004 websichere...

Documents