Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




Seminarsitzung Nr. 6




   Computergrafik         ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




                                                 1....
Auflösung


Definition


„… Dichte der Wiedergabe auf
   einem technischen Bildträger,
   die Fähigkeit eines (optischen) ...
Auflösung

Analoges Bild aus der Realwelt

Darstellung von Bildern auf dem Computermonitor
oder beim Ausdruck nicht durch ...
Auflösung

Analoges Bild aus der Realwelt




                                                           1.   Technische
 ...
Auflösung

Analoges Bild aus der Realwelt

Da im Computer Bilder jedoch in diskreten
digitalen Werten repräsentiert werden...
Auflösung




                                      1.   Technische
                                           Einführung
...
Auflösung


Je höher die Auflösung,
     desto genauer kann das analoge
     Bildsignal erfasst werden
        +
     des...
Auflösung




                                   1.   Technische
                                        Einführung

     ...
Auflösung


Auswirkungen

•   Die Höhe der Auflösung bestimmt wesentlich die
    Schärfe des Bildes und die Kontrastmöglic...
Auflösung


Auswirkungen

•   Die Höhe der Auflösung bestimmt wesentlich die
    Schärfe des Bildes und die Kontrastmöglic...
Auflösung


   Typ          Bezeichnung                 Max. Auflösung

  MDA          Monochrome                   25 Zei...
Auflösung



            Auflösung     Farbanzahl       Min. RAM
            640x480       16               256 KB
       ...
Farbtiefe
Spektralbereich




                                            1.   Technische
                                ...
Farbtiefe
RGB Modell

- 3 Grundfarben

- Jede Farbe über Anteil definiert 0-255

- 16,7 Mio. Farben darstellbar (256x256x2...
Farbtiefe


RGB Modell


                                  Farbe                  RGB Wert
                           Name...
Farbtiefe
HSL Farbmodell
                                  Intensität




                                               F...
Farbtiefe
CMYK




                                                      1.   Technische
                                 ...
Farbtiefe
Lab-Farbmodell
                           Helligkeit




                     2 Farbkanäle

•Farbraumkombination...
Farbtiefe




                              1.   Technische
                                   Einführung

               ...
Farbtiefe

1 Bit / 2 Farben




                   1.   Technische
                        Einführung

                   ...
Farbtiefe




                                                             1.   Technische
                               ...
Farbtiefe
8 Bit / 256 Farben




                     1.   Technische
                          Einführung

              ...
Farbtiefe




                                 1.   Technische
                                      Einführung

         ...
Farbtiefe

24 Bit / True Color




                      1.   Technische
                           Einführung

          ...
Grafik- Dateiformate   1.   Technische
                            Einführung

                       2.   Dateiformate

 ...
Grafik- Dateiformate
Grafikformate: ImageMagick (1)

•   8BIM Photoshop resource format
•   AFM TrueType font
•   APP1 Pho...
Grafik- Dateiformate
Grafikformate: ImageMagick (2)

•   DCX ZSoft IBM PC multi -page Paintbrush
•   DIB Microsoft Windows...
Grafik- Dateiformate
Grafikformate: ImageMagick (3)

•   FILE Uniform Resource Locator
•   FITS Flexible Image Transport S...
Grafik- Dateiformate

              Computergrafik
    Vektorgrafik         Pixel- /Rastergrafik

• alle Elemente die in  ...
1. Pixelgrafik

                       Pixelgrafik
    Dateigröße              Vorteile            Nachteile
•    Der Date...
1. Pixelgrafik

  Beispiel für die Dateigröße:

    • Schwarz-Weiß-Grafik mit einer
      Auflösung von 640x480 Bildpunkte...
1. Pixelgrafik
Was kann man machen um die
Nachteile zu verringern?
• Antialising

                             1.   Techni...
1. Vektorgrafik

                     Vektorgrafik
    Dateigröße              Vorteile              Nachteile
•    ist vo...
Vektor-Grafikformate
•   SVG
•   Postskript
•   PDF
•   Adobe Flash
•   …                  1.   Technische
               ...
SVG-Format
• Scalable Vector Graphics (SVG,
  Skalierbare Vektorgrafiken)
• zweidimensionale Vektorgrafik in der XML-
  Sy...
SVG- Format




              1.   Technische
                   Einführung

              2.   Dateiformate

            ...
PostScript- Format
• PostScript ist eine
  Seitenbeschreibungssprache
• unter diesem Namen seit 1984
  von der Firma Adobe...
PDF-Format
• PDF ist eine vektorbasierte
  Seitenbeschreibungssprache
• basiert auf dem gleichen Grafikmodell wie
  PostSk...
Flash- Format (SWF)
• auf Vektorgrafiken basierendes Grafik-
  und Animationsformat
• proprietäre integrierte
  Entwicklun...
Pixelgrafik- Dateiformate

Wie unterscheiden sich
Rastergrafik Formate?

•   Auflösung
•   Farbtiefe               1.   Te...
Pixelgrafik- Dateiformate

•   Bitmap
•   GIF
•   JPG
•   PNG                     1.   Technische
                        ...
Bitmap- Dateiformat
•   Bitmap-Dateien können unkomprimiert oder mit
    der verlustfreien Lauflängencodierung (RLE)
    k...
Bitmap- Dateiformat
Lauflängencodierung (RLE)
• ist eine verlustfreie Kompression
• Prinzip: eine Folge von gleichen Zahle...
GIF- Dateiformat (graphics interchange format )
•   Grafikdateiformat mit verlustfreier Kompression
    (LZW-Verfahren) fü...
GIF- Dateiformat (graphics interchange format )
LZW- Algorithmus
•   von Jacob Ziv, Abraham Lempel und Welsh 1984
    entw...
GIF- Dateiformat (graphics interchange format )
LZW- Algorithmus




                                                  1. ...
JPG- Dateiformat (joint photographics expert group)
•   JPEG ist sowohl ein
     •   Standardisierungs-Gremium
     •   Da...
JPG-Dateiformat (joint photographics expert group)
Die Stufen der JPEG-Kompression:




                                  ...
PNG- Dateiformat (portable network graphics )
• Das PNG-Dateiformat wurde vom W3C
  entwickelt und 1997 veröffentlicht
• S...
PNG- Dateiformat (portable network graphics )
• verlustfreie Kompression und wird von allen
  modernen Browsern unterstütz...
PNG- Dateiformat (portable network graphics )
LZ-Verfahren (LZ77)




                                                1.  ...
Gliederung
Animationen
  •   Was sind Animationen?
  •   Verfahren
  •   Techniken
  •   Animationsparameter
             ...
Was sind Animationen?

• Einzelbilder, die in festgelegter
  Reihenfolge nacheinander
  ablaufen
                         ...
Verfahren



• Echtzeit-Verfahren

                                1.   Technische
                                     Ei...
Techniken

• Rastergrafik

• Vektorgrafik
                            1.   Technische
                                 Ein...
Die wichtigsten Animationsparameter
• Standort des Betrachters bleibt konstant und
  das Objekt wird bewegt

• Beobachter ...
Beispiele
• http://www.fh-muenchen.de/home/
  fb/fb08/sl/projekt/dgm/multimedia/
  multimedia_darst_frames.htm


         ...
Animierte GIF‘s
• 1989 Veröffentlichung einer erweiterten GIF-
  Version

• „GIF89a“ genannt

• Speichern mehrerer Bilder ...
Animierte GIF‘s




                  1.   Technische
                       Einführung

                  2.   Dateiforma...
Adobe Flash
•   auf Vektorgrafiken basierendes Grafik- und
    Animationsformat

•   Kombination von Animation und Program...
Adobe Flash
• Flash-Dateiformate
  •   .SPL    FutureSplash-Dokument
  •   .FLA    Quelldateien
  •   .AS     ActionScript...
Adobe Flash
• Beispiel

  • http://www.lgi.geographie.uni-kiel.de
    /module-pagesetter-main-tid-6.phtml

               ...
Synchronized Multimedia Integration
Language (SMIL)
• XML-basierend

• textbasierend

• Einbindung und Steuerung von Multi...
Synchronized Multimedia Integration
Language (SMIL)




                                      1.   Technische
            ...
Virtual Reality Modeling Language
(VRML)
•   Beschreibungssprache für 3D-Szenen, deren Geometrien,
    Ausleuchtungen, Ani...
Beispiel




           1.   Technische
                Einführung

           2.   Dateiformate

           3.   Animiert...
Xtensible 3D (X3D)
•   3D-Modellierungssprache, die in der Syntax auf XML
    (XML-Encoding, Datei-Endung .x3d) oder auf V...
Xtensible 3D (X3D)




                     1.   Technische
                          Einführung

                     2. ...
QuickTime VR
• Von Apple entwickelte Technik

• Benötigt QuickTime als
  Abspielprogramm
                                 ...
QuickTime VR
• http://www.fh-muenchen.de/home/
  fb/fb08/sl/projekt/dgm/multimedia/
  multimedia_darst_frames.htm


      ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




                   Sinnvolle
            Kombinatio...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller


Projekt:

          Raumplan der Übungsräume

       ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




1.) Raumplan des GIUB:

           GIF-Datei auf d...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




1.) Raumplan des GIUB:

           GIF-Datei auf d...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:



                 ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




 2.) Dynamischer Kartenzugriff:

            ander...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




2.) Dynamischer Kartenzugriff:

           andere ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




3.) Foto-Overlay der Dozenten:



                 ...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




3.) Foto-Overlay der Dozenten:

           aufgrun...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller




3.) Foto-Overlay der Dozenten:

              aufg...
Spezialseminar: Multimedia und Webkartographie
Dozent: Dr. Moeller


Aufgabenstellung:

           Daten ab Mo, 21.05. im...
Nächste SlideShare
Wird geladen in …5
×

Computergraphik

2.729 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.729
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
44
Aktionen
Geteilt
0
Downloads
16
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Computergraphik

  1. 1. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller Seminarsitzung Nr. 6 Computergrafik 1. 2. Technische Einführung Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten Gruppe: 5. Übung Gregor Kuhnert, Adrian Pfahlsberger, Uwe Schollän, Peter Welter , Julian Zemke 1 von 88 Seiten
  2. 2. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 1. Technische Wie entsteht Graphik im Computer? Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 2 von 88 Seiten
  3. 3. Auflösung Definition „… Dichte der Wiedergabe auf einem technischen Bildträger, die Fähigkeit eines (optischen) 1. Technische Geräts, sehr feine Details zu Einführung 2. Dateiformate unterscheiden.“ 3. Animierte Computergrafik STRAUSS (1992) 4. Kombination von Formaten 5. Übung 3 von 88 Seiten
  4. 4. Auflösung Analoges Bild aus der Realwelt Darstellung von Bildern auf dem Computermonitor oder beim Ausdruck nicht durch ein analoges Signal, sondern durch einzelne Bildpunkte die in so genannten Bitmaps angeordnet sind 1. Technische Einführung Pixelorientierte Programme können gespeicherte 2. Dateiformate Bildpunkte 1:1 auf dem Monitor abbilden. 3. Animierte Computergrafik Objektorientierte Programme müssen dagegen 4. Kombination gespeicherte Funktionen (Objekte) für die Darstellung von Formaten am 5. Übung Monitor optimal in Bitmaps umrechnen 4 von 88 Seiten
  5. 5. Auflösung Analoges Bild aus der Realwelt 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination Abb. 1: Helligkeitsverteilung einer Zeile eines Fotos von Formaten 5. Übung 5 von 88 Seiten
  6. 6. Auflösung Analoges Bild aus der Realwelt Da im Computer Bilder jedoch in diskreten digitalen Werten repräsentiert werden müssen, wird die Bildzeile in gleichmäßige Abschnitte unterteilt und an den jeweiligen Punkten 1. Technische gemessen Einführung 2. Dateiformate 3. Animierte Diese Unterteilung nennt man 4. Computergrafik Kombination Auflösung des Bildes. von Formaten 5. Übung 6 von 88 Seiten
  7. 7. Auflösung 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten Abb. 2: Auflösung des Bildes 5. Übung 7 von 88 Seiten
  8. 8. Auflösung Je höher die Auflösung, desto genauer kann das analoge Bildsignal erfasst werden + desto höher ist die Qualität des gescannten Bildes 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung Abb 3: verschiedene Auflösungen eines Kreises 8 von 88 Seiten
  9. 9. Auflösung 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten Abb. 4: Siemensstern 5. Übung 9 von 88 Seiten
  10. 10. Auflösung Auswirkungen • Die Höhe der Auflösung bestimmt wesentlich die Schärfe des Bildes und die Kontrastmöglichkeiten beim Ausdruck 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik Abb. 5: Huhn mit Küken in 72 dpi / 36dpi / 10 dpi 4. Kombination von Formaten 5. Übung 10 von 88 Seiten
  11. 11. Auflösung Auswirkungen • Die Höhe der Auflösung bestimmt wesentlich die Schärfe des Bildes und die Kontrastmöglichkeiten beim Ausdruck 1. Technische • Das Schlüsselelement bleibt Einführung jedoch das Ausgabegerät !!! 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 11 von 88 Seiten
  12. 12. Auflösung Typ Bezeichnung Max. Auflösung MDA Monochrome 25 Zeilen x Display Adapter 80 Zeichen CGA Color Graphic 640x200 / 2 Farben Adapter 320x200 / 4 Farben MCGA Multi Color Graphic 320x200 / 256 Farben 1. Technische Adapter Einführung EGA Enhanced Graphic 640x350 / 16 Farben 2. Dateiformate Adapter VGA Video Graphics 640x480 / 256 Farben 3. Animierte Computergrafik Array XGA Extended Graphic 1024x768 / 4. Kombination Array 256 Farben von Formaten 5. Übung Tabelle 1: Typenüberblick der traditionellen Grafikkartentypen 12 von 88 Seiten
  13. 13. Auflösung Auflösung Farbanzahl Min. RAM 640x480 16 256 KB 640x480 256 512 KB 800x600 65536 1024 KB 1024x768 16,7 Millionen 2560 KB 1. Technische 1280x1024 65536 3072 KB Einführung 1280x1024 16,7 Millionen 4096 KB 2. Dateiformate Tabelle 2: Auflösung und Speicherbedarf (Auswahl) 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 13 von 88 Seiten
  14. 14. Farbtiefe Spektralbereich 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination Quelle: weblab.uni-lueneburg.de von Formaten 5. Übung - Farbwahrnehmung ist subjektiv - 3 Arten von Zapfen 14 von 88 Seiten
  15. 15. Farbtiefe RGB Modell - 3 Grundfarben - Jede Farbe über Anteil definiert 0-255 - 16,7 Mio. Farben darstellbar (256x256x256) 1. Technische Einführung - Geeignet für Geräte die Licht aussenden 2. Dateiformate - Besondere Kompatibilität mit Röhren Monitoren 3. Animierte Computergrafik 4. Kombination - Kein negativer Farbanteil von Formaten 5. Übung 15 von 88 Seiten
  16. 16. Farbtiefe RGB Modell Farbe RGB Wert Name Farbton Rot Grün Blau Rot 255 0 0 1. Technische Blau 0 0 255 Einführung Grün 0 255 0 2. Dateiformate Cyan 0 255 255 Gelb 255 255 0 3. Animierte Computergrafik Magenta 255 0 255 Quelle:Bender, 2006 4. Kombination von Formaten 5. Übung http://www.prismaprint.ch/farben/farbenlehre.htm 16 von 88 Seiten
  17. 17. Farbtiefe HSL Farbmodell Intensität Farbton 1. Technische Einführung Farbsättigung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung Quelle:www.prismaprint.ch 17 von 88 Seiten
  18. 18. Farbtiefe CMYK 1. Technische Einführung Quelle:Bender, 2006 2. Dateiformate 3. Animierte -Keine Lichter die Strahlen Computergrafik -Verluste bei mehrmaligen Umwandeln von CMYK / RGB 4. Kombination von Formaten -Negativer Farbanteil möglich 5. Übung 18 von 88 Seiten
  19. 19. Farbtiefe Lab-Farbmodell Helligkeit 2 Farbkanäle •Farbraumkombination von RGB / CMYK 1. Technische Einführung 2. Dateiformate •Internes Farbformat von 3. Animierte Photoshop Computergrafik Quelle:www.tu-dresden.de 4. Kombination von Formaten 5. Übung 19 von 88 Seiten
  20. 20. Farbtiefe 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination •1 Pixel = 1 Bit von Formaten 5. Übung •Schwarz / Weiß Darstellung 20 von 88 Seiten
  21. 21. Farbtiefe 1 Bit / 2 Farben 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 21 von 88 Seiten
  22. 22. Farbtiefe 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination • 1 Pixel = 8 Bit von Formaten • Jeder Pixel kann eine von 256 (2 hoch 8) Farben annehmen 5. Übung • Max. 256 verschiedene Displayfarben 22 von 88 Seiten
  23. 23. Farbtiefe 8 Bit / 256 Farben 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 23 von 88 Seiten
  24. 24. Farbtiefe 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination • 1 Pixel = 24 Bit von Formaten 5. Übung • 2 hoch 24 = 16,7 Mio. Farben 24 von 88 Seiten
  25. 25. Farbtiefe 24 Bit / True Color 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 25 von 88 Seiten
  26. 26. Grafik- Dateiformate 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 26 von 88 Seiten
  27. 27. Grafik- Dateiformate Grafikformate: ImageMagick (1) • 8BIM Photoshop resource format • AFM TrueType font • APP1 Photoshop resource format • ART PF1: 1st Publisher • AVI Audio/Visual Interleaved • AVS AVS X image • BIE Joint Bi-level Image experts Group interchange format • BMP Microsoft Windows bitmap image 1. Technische Einführung • CAPTION Caption (requires separate size info) • CMYK Raw cyan, magenta, yellow, and black samples 2. Dateiformate (8 or 16 bits, depending on the image depth) 3. Animierte • CMYKA Raw cyan, magenta, yellow, black, and matte Computergrafik samples (8 or 16 bits, depending on the image depth) 4. Kombination • von Formaten CUT DR Halo • DCM Digital Imaging and Communications in Medicine image 5. Übung 27 von 88 Seiten
  28. 28. Grafik- Dateiformate Grafikformate: ImageMagick (2) • DCX ZSoft IBM PC multi -page Paintbrush • DIB Microsoft Windows bitmap image • DPS Display PostScript • DPX Digital Moving Picture Exchange • EPDF Encapsulated Portable Document Format • EPI Adobe Encapsulated PostScript Interchange format • EPS Adobe Encapsulated PostScript 1. Technische • EPS2 Adobe Level II Encapsulated PostScript Einführung • EPS3 Adobe Level III Encapsulated PostScript 2. Dateiformate • EPSF Adobe Encapsulated PostScript 3. Animierte • EPSI Adobe Encapsulated PostScript Interchange Computergrafik format 4. Kombination • EPT Adobe Encapsulated PostScript with TIFF preview von Formaten • FAX Group 3 FAX 5. Übung 28 von 88 Seiten
  29. 29. Grafik- Dateiformate Grafikformate: ImageMagick (3) • FILE Uniform Resource Locator • FITS Flexible Image Transport System • FPX FlashPix Format • FTP Uniform Resource Locator • G3 Group 3 FAX • GIF CompuServe graphics interchange format • GIF87 CompuServe graphics interchange format 1. Technische (version 87a) Einführung • GRADIENT Gradual passing from one shade to another 2. Dateiformate • GRANITE Granite texture 3. Animierte • GRAY Raw gray samples (8 or 16 bits, depending on Computergrafik the image depth ) 4. Kombination von Formaten 5. Übung ABCDEFGHIJ K L M N O P Q R S T U V W X Y Z http://www.imagemagick.org/script/index.php 29 von 88 Seiten
  30. 30. Grafik- Dateiformate Computergrafik Vektorgrafik Pixel- /Rastergrafik • alle Elemente die in • bestehen aus einer der Grafik festen Anzahl von 1. Technische Einführung vorkommen werden gitterförmig 2. Dateiformate als geometrische angeordneten 3. Animierte Figuren in ihrer Bildpunkten (Pixel, Computergrafik mathematischen Picture Elements) 4. Kombination von Formaten Beschreibung 5. Übung gespeichert 30 von 88 Seiten
  31. 31. 1. Pixelgrafik Pixelgrafik Dateigröße Vorteile Nachteile • Der Datenumfang • enorme Vielfalt • meist relativ errechnet sich an Farben und hoher Speicher- 1. Technische aus: Texturen verbrauch Einführung • Fotorealistische • Alias-Effekt 2. Dateiformate 1. der vertikalen und der Darstellungen (Treppeneffekt) 3. Animierte horizontalen möglich • Bei der Computergrafik Auflösung Vergrößerung 4. Kombination 2. multipliziert mit kommt es zu einer von Formaten der Quantisierung „pixeligen“ oder 5. Übung unscharfen Darstellung 31 von 88 Seiten
  32. 32. 1. Pixelgrafik Beispiel für die Dateigröße: • Schwarz-Weiß-Grafik mit einer Auflösung von 640x480 Bildpunkten und einer Farbtiefe von 1 Bit 1. Technische Einführung • Dateigröße von 38 KB 2. Dateiformate 3. Animierte Computergrafik • Bei einer Auflösung von 2.048x1.536 bei 4. Kombination QXGA und einer Farbtiefe von 24 Bit von Formaten • unkomprimierte Dateigröße von 9,5 MB 5. Übung 32 von 88 Seiten
  33. 33. 1. Pixelgrafik Was kann man machen um die Nachteile zu verringern? • Antialising 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik • Komprimierungsverfahren 4. Kombination von Formaten (Dateigröße) 5. Übung 33 von 88 Seiten
  34. 34. 1. Vektorgrafik Vektorgrafik Dateigröße Vorteile Nachteile • ist von der • kann verlustfrei • erreicht nicht mathematischen rekonstruiert und die Vielfalt an Komplexität der dazustellenden kompakt Farben und 1. Technische Objekte abhängig gespeichert Texturen wie Einführung werden Pixelgrafiken 2. Dateiformate • Kann beliebig skaliert werden 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 34 von 88 Seiten
  35. 35. Vektor-Grafikformate • SVG • Postskript • PDF • Adobe Flash • … 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 35 von 88 Seiten
  36. 36. SVG-Format • Scalable Vector Graphics (SVG, Skalierbare Vektorgrafiken) • zweidimensionale Vektorgrafik in der XML- Syntax • SVG wurde im September 2001 vom W3C als Empfehlung veröffentlicht 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 36 von 88 Seiten
  37. 37. SVG- Format 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 37 von 88 Seiten
  38. 38. PostScript- Format • PostScript ist eine Seitenbeschreibungssprache • unter diesem Namen seit 1984 von der Firma Adobe entwickelt • PostScript hat sich über die Jahre zu einem Standard in der Druckindustrie entwickelt 1. Technische Einführung • wird aber teilweise vom Portable Document 2. Dateiformate Format (PDF) verdrängt 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 38 von 88 Seiten
  39. 39. PDF-Format • PDF ist eine vektorbasierte Seitenbeschreibungssprache • basiert auf dem gleichen Grafikmodell wie PostSkript • PDF erlaubt gegenüber PostScript 1. Technische zahlreiche zusätzliche Funktionen Einführung • freie Skalierbarkeit der Darstellung 2. Dateiformate 3. Animierte • beschreibt das Layout in einer vom Drucker Computergrafik und von Voreinstellungen unabhängigen Form 4. Kombination von Formaten • weitgehend originalgetreu 5. Übung • kann mit PlugIn direkt im Webbrowser 39 von 88 Seiten
  40. 40. Flash- Format (SWF) • auf Vektorgrafiken basierendes Grafik- und Animationsformat • proprietäre integrierte Entwicklungsumgebung zur Erstellung multimedialer Inhalte • Flash findet heutzutage auf vielen 1. Technische Webseiten Gebrauch Einführung • als Werbebanner oder in Form 2. Dateiformate kompletter Flash-Seiten 3. Animierte Computergrafik • Für vektorisierte, interaktive Animationen 4. Kombination von Formaten im Web ist Flash derzeit fast alternativlos 5. Übung • Vergleich mit SVG 40 von 88 Seiten
  41. 41. Pixelgrafik- Dateiformate Wie unterscheiden sich Rastergrafik Formate? • Auflösung • Farbtiefe 1. Technische Einführung • Farbtabelle 2. Dateiformate 3. Animierte • (Kompression) Computergrafik 4. Kombination von Formaten 5. Übung 41 von 88 Seiten
  42. 42. Pixelgrafik- Dateiformate • Bitmap • GIF • JPG • PNG 1. Technische Einführung • TIFF 2. Dateiformate • … 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 42 von 88 Seiten
  43. 43. Bitmap- Dateiformat • Bitmap-Dateien können unkomprimiert oder mit der verlustfreien Lauflängencodierung (RLE) komprimiert sein • Jedes einzelne Pixel, des in Spalten und Zeilen aufgelösten Bildes, hat seine eigenen RGB- Werte 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 43 von 88 Seiten
  44. 44. Bitmap- Dateiformat Lauflängencodierung (RLE) • ist eine verlustfreie Kompression • Prinzip: eine Folge von gleichen Zahlen, Zeichen oder Buchstaben wird durch ein einziges Symbol und die Angabe über die Anzahl der gleichen Symbole ersetzt 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 44 von 88 Seiten
  45. 45. GIF- Dateiformat (graphics interchange format ) • Grafikdateiformat mit verlustfreier Kompression (LZW-Verfahren) für den Austausch von Bilddate • Farbauflösung von 256 Farben • wird von links oben nach rechts unten zeilenweise gespeichert • Transparenz möglich • 2D-Animationen können mit Animated GIF 1. Technische aus einer Sequenz von Einzelbildern Einführung erzeugt werden 2. Dateiformate • Stufenweiser Aufbau des 3. Animierte Computergrafik Bildes (Interlacing) 4. Kombination von Formaten 5. Übung 45 von 88 Seiten
  46. 46. GIF- Dateiformat (graphics interchange format ) LZW- Algorithmus • von Jacob Ziv, Abraham Lempel und Welsh 1984 entwickelt • Annahme: in einer Datenfolge wiederholen sich bestimmte Datensequenzen • beispielsweise bestimmte Farbmuster • Daten werden in Abschnitte zerlegt und in eine Codetabelle eingetragen 1. Technische Einführung • dazu wird ein Datenblock fester Länge abgetastet 2. Dateiformate • daraus werden Pointer gewonnen und ein Wörterbuch abgeleitet 3. Animierte • Den zu übertragenden Zeichen werden über eine Computergrafik Zuordnungstabelle LZW-Codes zugewiesen, die auch 4. Kombination übertragen werden von Formaten • wesentlich höhere Datenreduktion als bei 5. Übung Lauflängencodierung (RLE) 46 von 88 Seiten
  47. 47. GIF- Dateiformat (graphics interchange format ) LZW- Algorithmus 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 47 von 88 Seiten
  48. 48. JPG- Dateiformat (joint photographics expert group) • JPEG ist sowohl ein • Standardisierungs-Gremium • Datenkompressionsverfahren • als auch ein grafisches Dateiformat • verlustbehaftete Kompression zu Komprimierung von Farbbildern und Digitalfotos • Anwender hat die Möglichkeit, reproduzierte Bilder in verschiedenen Qualitätsstufen darzustellen 1. Technische Einführung • Weist keine Beschränkungen in Bezug auf die Bildgröße, Farbtiefe, Pixelformat oder Komplexität und Farbvielfalt auf 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 48 von 88 Seiten
  49. 49. JPG-Dateiformat (joint photographics expert group) Die Stufen der JPEG-Kompression: 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 49 von 88 Seiten
  50. 50. PNG- Dateiformat (portable network graphics ) • Das PNG-Dateiformat wurde vom W3C entwickelt und 1997 veröffentlicht • Standardisierung erfolgt durch ISO/IEC • lizenzfreie Format • ist ähnlich dem GIF-Dateiformat und gilt als dessen Nachfolger 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 50 von 88 Seiten
  51. 51. PNG- Dateiformat (portable network graphics ) • verlustfreie Kompression und wird von allen modernen Browsern unterstützt • Die Dateien sind bedingt durch die hohe Auflösung und die verlustfreie Kompression nach dem LZ-Verfahren (LZ77) größer als die von JPEG • Beim Laden einer Grafik erscheint diese zuerst in Grobstruktur, bevor sie detailliert aufgelöst wird 1. Technische • PNG hat einen Alphakanal für transparente Einführung Darstellungen und kann zusätzlich zur Grafik 2. Dateiformate Schlüsselwörter und Text speichern 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 51 von 88 Seiten
  52. 52. PNG- Dateiformat (portable network graphics ) LZ-Verfahren (LZ77) 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 52 von 88 Seiten
  53. 53. Gliederung Animationen • Was sind Animationen? • Verfahren • Techniken • Animationsparameter 1. Technische • Animationsformate Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 53 von XX Seiten 53 von 88
  54. 54. Was sind Animationen? • Einzelbilder, die in festgelegter Reihenfolge nacheinander ablaufen 1. Technische Einführung 2. Dateiformate • Eindruck einer kontinuierlichen 3. Animierte Computergrafik Bewegung 4. Kombination von Formaten 5. Übung 54 von XX Seiten 54 von 88
  55. 55. Verfahren • Echtzeit-Verfahren 1. Technische Einführung 2. Dateiformate • Offline-Rendering-Verfahren 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 55 von XX Seiten 55 von 88
  56. 56. Techniken • Rastergrafik • Vektorgrafik 1. Technische Einführung • Kombination Raster- und 2. Dateiformate Vektorgrafik 3. Animierte Computergrafik 4. Kombination von Formaten • Farbpalettenrotation 5. Übung 56 von XX Seiten 56 von 88
  57. 57. Die wichtigsten Animationsparameter • Standort des Betrachters bleibt konstant und das Objekt wird bewegt • Beobachter (und damit die Kamera) bewegt sich auf einer vorgegebenen Bahn • Temporale Animation (Objekt und Kamera 1. Technische Einführung stehen still und das Objekt verändert seine 2. Dateiformate Form oder Kamerastandpunkt und Objektform 3. Animierte werden gemeinsam animiert) Computergrafik 4. Kombination von Formaten • Animierung externer Parameter (z.B. 5. Übung Sonneneinstrahlung) 57 von XX Seiten 57 von 88
  58. 58. Beispiele • http://www.fh-muenchen.de/home/ fb/fb08/sl/projekt/dgm/multimedia/ multimedia_darst_frames.htm 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 58 von XX Seiten 58 von 88
  59. 59. Animierte GIF‘s • 1989 Veröffentlichung einer erweiterten GIF- Version • „GIF89a“ genannt • Speichern mehrerer Bilder in einer GIF-Datei 1. Technische Einführung • Standbilder, die nacheinander in eine Datei 2. Dateiformate eingebettet sind 3. Animierte Computergrafik 4. Kombination • Einmalige, einige Male ablaufende oder von Formaten ständig wiederholende Animationen 5. Übung 59 von XX Seiten 59 von 88
  60. 60. Animierte GIF‘s 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 60 von XX Seiten 60 von 88
  61. 61. Adobe Flash • auf Vektorgrafiken basierendes Grafik- und Animationsformat • Kombination von Animation und Programmierung • Multimediale Möglichkeiten (Einsatz von Video- und Sounddateien) 1. Technische • Flash-Player als Abspielprogramm nötig Einführung 2. Dateiformate • Für vektorisierte, interaktive Animationen im Web ist 3. Animierte Computergrafik Flash fast alternativlos 4. Kombination von Formaten • GIF-Ersatz (filmtauglich) 5. Übung 61 von XX Seiten 61 von 88
  62. 62. Adobe Flash • Flash-Dateiformate • .SPL FutureSplash-Dokument • .FLA Quelldateien • .AS ActionScript-Dateien • .SWF kompilierte Dateien (Small Web Format / Shockwave Flash) • .FLV Flash Video-Dateien • .ASC Serverseitige ActionScript-Dateien (Flash Communication Server) 1. Technische • .ASR Serverseitige ActionScript-Dateien (ActionScript Einführung Remote / Flash Remoting) 2. Dateiformate • .JSFL Flash-JavaScript-Dokument • 3. Animierte .FLP Flash-Projekt-Dokument Computergrafik • .ASO ActionScript Objektcode • .SWD Flash-Debugger-Dokument 4. Kombination • von Formaten .SWC vorkompilierte Flash MX 2004 Komponenten-Dateien • .ASI ActionScript-Intrinsic-Dateien (seit Flash MX 2004 5. Übung Komponenten) • .SOL Local Shared Object (Flash-Cookie) 62 von XX Seiten 62 von 88
  63. 63. Adobe Flash • Beispiel • http://www.lgi.geographie.uni-kiel.de /module-pagesetter-main-tid-6.phtml 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 63 von XX Seiten 63 von 88
  64. 64. Synchronized Multimedia Integration Language (SMIL) • XML-basierend • textbasierend • Einbindung und Steuerung von Multimedia- Elementen wie Audio, Video, Text und Grafik in Webseiten 1. Technische Einführung 2. Dateiformate • Verknüpfung mit Java-Applets und -Servlets 3. Animierte oder CGI-Skripten möglich Computergrafik 4. Kombination von Formaten • Erstellung mit jedem Texteditor möglich 5. Übung 64 von XX Seiten 64 von 88
  65. 65. Synchronized Multimedia Integration Language (SMIL) 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 65 von XX Seiten 65 von 88
  66. 66. Virtual Reality Modeling Language (VRML) • Beschreibungssprache für 3D-Szenen, deren Geometrien, Ausleuchtungen, Animationen und Interaktionsmöglichkeiten • ursprünglich als 3D-Standard für das Internet entwickelt • Ergänzung zu HTML • komplett interaktiv 1. Technische Einführung • Echtzeitgenerierung 2. Dateiformate • Dateierweiterung „.wrl“ (world) 3. Animierte Computergrafik 4. Kombination • Klartext (ASCII bzw. UTF-8) von Formaten 5. Übung • Erstellung in einem einfachen Texteditor 66 von XX Seiten 66 von 88
  67. 67. Beispiel 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 67 von XX Seiten 67 von 88
  68. 68. Xtensible 3D (X3D) • 3D-Modellierungssprache, die in der Syntax auf XML (XML-Encoding, Datei-Endung .x3d) oder auf VRML (Classic-Encoding, Datei-Endung .x3dv) aufbauen kann • Realisierung von dreidimensionalen virtuelle Welten, Spiele, wissenschaftliche Visualisierungen und interaktive Lernanwendungen in Echtzeit 1. Technische • mehr standardisierte Möglichkeiten und Schnittstellen Einführung als VRML 2. Dateiformate 3. Animierte • offiziellen Nachfolger des VRML-Standard Computergrafik 4. Kombination von Formaten • seit Dezember 2004 als ISO-Standard spezifiziert 5. Übung 68 von XX Seiten 68 von 88
  69. 69. Xtensible 3D (X3D) 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 69 von XX Seiten 69 von 88
  70. 70. QuickTime VR • Von Apple entwickelte Technik • Benötigt QuickTime als Abspielprogramm 1. Technische Einführung • Darstellung von Panoramabildern, 2. Dateiformate in denen man navigieren kann 3. Animierte Computergrafik (Zoomen, drehen etc.) 4. Kombination von Formaten 5. Übung • Virtuelle Rundgänge 70 von XX Seiten 70 von 88
  71. 71. QuickTime VR • http://www.fh-muenchen.de/home/ fb/fb08/sl/projekt/dgm/multimedia/ multimedia_darst_frames.htm 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 71 von XX Seiten 71 von 88
  72. 72. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller Sinnvolle Kombinationsmöglichkeiten der Formate & Scripte 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 72 von 88 Seiten
  73. 73. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller Projekt: Raumplan der Übungsräume mit Dynamischem Kartenzugriff 1. Technische und Foto-Overlay der Dozenten Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 73 von 88 Seiten
  74. 74. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 1.) Raumplan des GIUB:  GIF-Datei auf der Homepage 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 74 von 88 Seiten
  75. 75. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 1.) Raumplan des GIUB:  GIF-Datei auf der Homepage 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 75 von 88 Seiten
  76. 76. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff: 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 76 von 88 Seiten
  77. 77. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 77 von 88 Seiten
  78. 78. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 78 von 88 Seiten
  79. 79. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung <script type="text/javascript"> 2. Dateiformate var d = new Date() var time = d.getHours() 3. Animierte Computergrafik var wochentag = d.getDay() </script> 4. Kombination von Formaten 5. Übung 79 von 88 Seiten
  80. 80. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung <script type="text/javascript"> 2. Dateiformate var d = new Date() var time = d.getHours() 3. Animierte Computergrafik var wochentag = d.getDay() </script> 4. Kombination von Formaten 5. Übung  Variablen für Tag und Datum werden gelesen 80 von 88 Seiten
  81. 81. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung if (time >=8 && time < 10 && wochentag 2. Dateiformate == 1) { 3. Animierte window.open ('mo810.html','_self'); Computergrafik } 4. Kombination von Formaten 5. Übung 81 von 88 Seiten
  82. 82. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung if (time >=8 && time < 10 && wochentag 2. Dateiformate == 1) { 3. Animierte window.open ('mo810.html','_self'); Computergrafik } 4. Kombination von Formaten 5. Übung  Einfache „Wenn... dann“ Struktur 82 von 88 Seiten
  83. 83. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung 2. Dateiformate  Innerhalb des Raumplanes sollen Räume klickbar sein 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 83 von 88 Seiten
  84. 84. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 2.) Dynamischer Kartenzugriff:  andere Raumbelegung je nach Tag und Zeit  möglich durch JavaScript 1. Technische Einführung 2. Dateiformate  Innerhalb des Raumplanes sollen Räume klickbar sein 3. Animierte <area shape="rect" coords="446,184,479,260" Computergrafik onClick="window.alert('Montag, 14 - 16 Uhr: Keine Veranstaltung')" 4. Kombination alt="Übungsraum I" title="Übungsraum I"> von Formaten 5. Übung  Möglich durch Kombination von JavaScript und CSS 84 von 88 Seiten
  85. 85. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 3.) Foto-Overlay der Dozenten: 1. Technische Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 85 von 88 Seiten
  86. 86. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 3.) Foto-Overlay der Dozenten:  aufgrund der besseren Farbunterstützung bietet sich PNG an 1. Technische  zusätzlich Vorteil von Transparenz Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 86 von 88 Seiten
  87. 87. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller 3.) Foto-Overlay der Dozenten:  aufgrund der besseren Farbunterstützung bietet sich PNG an 1. Technische  zusätzlich Vorteil von Transparenz Einführung 2. Dateiformate  Einbindung durch CSS 3. Animierte <div style="position:absolute; top:0px; left:288px; z-index:1; border:0px"> Computergrafik <img src="bilder/og.gif" width="550" height="434" border="0" alt="Karte" usemap="og"></div> 4. Kombination von Formaten <div style="position:absolute; top:0px; left:288px; z-index:2; border:0px"> <img src="bilder/mo1820/png_overlay.png" width="550" height="434" border="0" alt="Karte" 5. Übung usemap="og"></div> 87 von 88 Seiten
  88. 88. Spezialseminar: Multimedia und Webkartographie Dozent: Dr. Moeller Aufgabenstellung:  Daten ab Mo, 21.05. im eCampus  Die Dozenten wollen früher nach Hause, und haben die Karte für Freitag Abend verändert! 1. Technische Programmiere die Raumbelegung neu! Einführung 2. Dateiformate 3. Animierte Computergrafik 4. Kombination von Formaten 5. Übung 88 von 88 Seiten

×