Medieninformatik

• Typeofx 
  • gibt aktuell zugewiesenen Datentyp als Pop-Up Fenster aus
• var s = "Beispieltext";
  s.length
  • Länge einer Zeichenkette ausgeben lassen
• s.indexOf("t")
  • Auffinden von Teilen im Text, z.B. wann steht t im Text
  • beachte: erste Stelle zählt als 0. Stelle 
• var teil1 = 15
  var teil2 = 20
  var warenkorb = teil1 + teil2
   

• beliebige Eigenschaften (Eigenschaften zufügen, verändern, löschen)
• weitere Eigenschaften durch Komma getrennt hinzufügen
• Beachte:
  Schlüssel für Eigenschaft muss Zeichenkette sein ("name", "color")
  Wert des Schlüssels nicht ("Reeti" "3")

1. Verzweigungen (if-then-else, switch)
   1. If-then-else Verzweigung (bedingte Anweisung)
      var temperature;
      if (temperature>30) {                                          Bedingung
          window.alert("Ab in den Biergarten");            Anweisung
      } else {
          window-alert("Heute lernen");                        Anweisung
      }
   2. Switch Verzweigung
      switch (temperature) {
           case 33:
                    alert("Ab in den Biergarten!");
                    break;
           case 0:
                    alert("Warm anziehen!");
                    break; 
           default:
                    alert("Bitte lernen");
      }
      • wenn viele Fälle unterschieden werden sollen
      • pro Case ein Wert, den Variable annehmen würde
      • am Ende des Cases: break (wird Wert ausgeführt, kann Schleife beendet werden

1. Schleifen
   1. while Schleife (kopfgesteuerte Schleife)
      while (bedingung) {
            anweisung;
      }
      • solang Bedingung wahr ist, wird Anweisung ausgeführt
      • Bedingung muss innerhalb Schleife oder von außen geändert werden
   2. for Schleife
      for (startwert; abbruchbedingung; zählschritt) {
          anweisungen;
      }
      • Bedingung im Schleifenkopf geändert 
      • Anweisung so lang durchgeführt wie Bedingung wahr ist
      • selbse Funktionalität wie Whie Schleife

• Blöcke von Codes, um bestimmte Aufgaben zu beschreiben
• sinnvoll für wiederkehrende Aufgaben, die öfters benötigt werden
• Programmcode, der nicht in Funktion steht, wird sofort ausgeführt
  • mittels Eventhandler wird aufgerufen, wann Funktion ausgeführt wird
  • essentiell für Webseiteninteraktivität
• function meineFunktion (parameter1, parameter2, ...) {
       auszuführender Code;
       return ergebnis 
  }
  • parameter = Werte, die Funktion übergeben werden und zur Verfügung stehen
  • Return statement = Ergebnis, das zurückgeliefert werden soll

• revolutionäre Entwicklung (Vgl. Stummfilm -> Sprachfilm, adding Color to pictures)
  • Georg Lucas deutet sehr hohe Relevant der Digitalisierung
• Digitaisierung von Filmen = essentiell
  • Aufnahmen mit Digitalkameras
  • Komprimierung während der Aufnahme (auf Kamera)
• Prägung des Medienkonsumverhaltens
  • TV als Leitmedium mittlerweile abgelöst (ursprüngliche Faszination durch bewegte Bilder)
  • Videoportale (YouTube, MyVideo), Videoblogs und -messenger
  • digitale Videos = zentral im Medienkonsum
• Digitalisierung = Standard in vielen Bereichen (Digitalkameras statt analoge Medien)

• Videowahrnehmung = mehrdimensional (inkl. der neuen Dimension: Bewegungswahrnehmung)

1. Bildwahrnehmung
   • Licht
   • Helligkeit
   • Farbe (und Farbmodelle)
2. Audiowahrnehmung
   • Schall
   • Frequenzen
   • Lautstärke
   • Lokalisierung
   • psychoakustische Modelle
   • Maskierung
3. Bewegungswahrnehmung
   1. Objektbewegung
   2. Eigenbewegung
   3. Scheinbewegung

• Bewegungswahrnehmung von Objekten in der Welt
• einfache Translation
  • Objekte bewegen sich im Sichtfeld
  • bspw. Ball fliegt durch Saal (Ball = dynamisch, Saal = statisch)
• komplexe Translation
  • komplexe Strukturen bewegen sich
  • optischer Fluss entsteht (nicht nur Wahrnehmung von Einzelbewegungen)
  • z.B. Barber-Pole-Illusion (Säule dreht sich nach rechts, optischer Fluss geht nach oben)

• Bewegungswahrnehmung von sich selbst in der Welt
• Infos aus Eigenbewegungung u.a. aus optischen Fluss
  • nicht die Welt verändert sich, sondern man bewegt sich durch die Welt
• z.B. in Filmen: man bewegt sich durch die Welt in 3D

• Bewegungseindrücke, denen keine physikalische Bewegung von Objekten zugrunde liegt 
• insbesondere in digitalen Videos relevant
• Erzeugung von Bewegungswahrnehmung:
  • Stilmulus wird an Position angezeigt, dann ausgeblendet und woanders erneut angezeigt
    > Betrachter nimmt Bewegung wahr
  • Bewegungswahrnehmung hängt vom Zeitintervall zwischen den Stimuli ab 
  • ob/welche Bewegung stattfindet, hängt von Gestaltgesetzen ab 

1. < 30ms                   = Wahrnehmung von keiner Bewegung, sondern von zwei gleichzeitig aufleuchtenden Punkten
2. 30ms < x < 60ms   = Phi-Bewegung (unklassifiziertes Flackern)
3. ca. 60ms               = optimale Beta-Bewegung
4. 60ms < x < 200ms = partielle Bewegung ("Ruckelbewegung")
5. > 200ms                = sukzessive (keine Bewegung), sondern verschiedene Punkte, die aufleuchten 

1. Gesetz der Ähnlichkeit
2. Gesetz der Nähe

• Kreis, der zu Viereck wird (Nähe) vs. Kreis und Viereck, die Wandern (Ähnlichkeit)
  • stärkere Wahrnehmung, dass Kreis zu Viereck wird (= Gesetz der Nähe wird stärker empfunden als Gesetz der Ähnlichkeit)

• Sequenz aus Einzelbildern, die schnell nacheinander gezeigt werden 
  -> Illusion von Bewegung
• jedes einzelne Bild = Ausschnitt der Szene zum Zeitpunkt x
• vgl.: Kineograph (Daumenkino)
• Bewegungswahrnehmung ab 18-30 Bilder pro Sekunde
• Videos: schnelles Abspielen von Einzelbildern
  • Bilder dürfen nicht zu unterschiedlich sein, weil sonst keine Bewegungswahrnehmung

• Bilder pro Sekunde = frames per second 
  • bei Monitoren = Hertz, bei Video = Frames
• Kinostandard = weiterentwickelt (HFR = High Frame Rate)

Formate:

• Super-8-Film (veraltet):             18 fps
• Kinofilm (weltweit):                    24 fps
• Fernsehnorm Europa:               25 fps
• Fernsehnorm USA und Japan:  30 fps
• HFR (neues Kinoformat):          48, 72 fps

• liegende Ellipse
• rechts/links: 
  • Farbwahrnehmung bis zu 60°
  • Wahrnehmung 100°
• oben
  • Farbwahrnehmung 30°
  • Wahrnehmung 55°
• unten
  • Farbwahrnehmung 40°
  • Wahrnehmung 80°
• Bildformate passen sich menschlichem Sehfeld an

• Seitenverhältnis
  • 4:3 = analoges Fernsehen, "klassisches Bildformat" (PAL)
  • 16:9 = heutige TV (HDTV), "normales Sichtfeld"
    • Full HD = 1920+1080 Pixel
    • Ultra HD = 4k = 3840*2160 Pixel 
  • 21:9 = Cinemascope

• Breite*Höhe
• PAL-Fernsehbild
  • 768x576
• HD (High Definition)
  • HD (ready): 1280x720 Pixel
  • Full HD: 1920x1080 Pixel = max. 2 Mio Pixel
    • genannt: 2k vs. 1080p
  • Ultra HD: 3840x2160 oder 7680x4320 = ≥ 8 Mio Pixel
    • 4mal so hoch wie Full HD
    • 4k ca. 4000 Pixel 
• verschiedene Formate (Tablet, Handy etc.; Variationen je nach Hersteller)
•  

1 Frame: 720x576 = 414720 Pixel
414720*3*8Bit = 1244160 Byte 
= 1244 KB
= 1,24 MB pro Sekunde 25 Frames

1,24*25/s = 31 MB/s

• alles wird digitalisiert, gespeichert und komprimiert
• Digitalisierung = Diskretisierung + Quantisierung
  • analoge, beliebig viele und beliebig genaue Werte sollen in Raster gedrückt werden 
    Ziel: digitales, diskretes Signal erstellen

• Diskretisieren:
  • wie oft taste ich ab + wie oft speichere ich ab?
  • Bilder = 2 Dimensionen
    • Räumlich (wie viele Bildpunkte will ich) + wie viele Bits geben wir der Farbe
• Quantisieren bei Audio

• 4 Dimensionen
  • 2 Bilddimensionen (Höhe und Breite)
  • Eigenschaften der Bildpunkte (Farbtiefe und Helligkeit)
  • zeitliche Dimension: Bilder pro Zeiteinheit (Abtastrate der Kamers, fps)

1 Byte = 8 Bits

1 KB = 1.000 Bytes

1 MB = 1.000 KB 

1 GB = 1.000 MB

720*576*3*8 = 9953280 Bit = 1.244.160 Byte
= 1244 KB
= 1,24 MB 

-> Pro Sekunde 25 Frames = 1,24 MB

1,24*25 = 31MB/s

• Zur Reduktion von Speicherplatz
• bei Videos zwingend erforderlich 
• Bilder z.T. ohne Kompression (v.a. zur späteren Bildbearbeitung)

• Codierer: codiert Videodaten binär
• Decodierer: decodiert Binärcode in Video
• Codec (Coder/Decoder)
  • Algorithmenpaar für Codierer und Decodierer
  • Asymmetrie: decodieren schneller als codieren
    • Grund: Abspielen (decodieren) muss schnell gehen
    • Ausnahme: Live-Übertragung, wo beides in Echtzeit funktionieren muss

1. schnelle Kompression (Codierung)
   • falls schon bei Aufnahme komprimiert werden soll, sonst egal
   • zB. bei Smartphones: man nimmt Video auf und will es direkt abspielen
2. schnelle Decodierung
   • Videos in Echtzeit wiedergeben
   • sehr relevant
3. hohe Kompression
   • z.B. für Internet Streaming

• Klassifikation:
  • universell vs. speziell
  • verlustfrei vs. verlustbehaftet
• Bsp.: universell-verlustfrei = Huffman, LZW
  universell-verlustbehaftet ≠ sinnvoll
  speziell-verlustfrei = PNG, AIFF
  speziell-verlustbehaftet = JPEG, MP3
• mittlerweile spezielle Verfahren optimiert für Videos inkl. verlustbehafteter und verlustfreier Formate

1. zeitliche Dimension (Inter Frame)
2. Beschaffenheit der Einzelbilder (Intra Frame)
   1. Höhe*Breite
   2. Pixel-Eigenschaften (Helligkeit, Farbe)

• jede Eigenschaft = Möglichkeiten zur Kompression

• Betrachtung einzelner Bilder
• Verwendung von Verfahren wie bei Einzelbildern (vgl. JPEG)
  • Chroma-Subsampling
    • runterskalieren von Farbkanälen 
    • verlustbehaftet
  • DCT- Quantisierung (diskrete Cosinus-Formation)
    • hohe Frequenzen werden weggelassen oder mit wenigen Bits abgespeichert
    • verlustbehaftet
  • Kompression
    • wenig Bits abspeichern

• Umwandlung in YCbCr
  Abtastrate in Farbkanäle sinkt
  volle Abtastrate in Y-Kanal
  halbe Abtastrate in Cb und Cr

1 Frame y-Kanal: 720*576*1Byte = 414720 Byte
1 Frame Cb und Cr: 360*288*1Byte = 103680 Byte
414720 Byte + 2*103680 Byte * 25/s = 15,5MB/s

Datenreduktion von zuvor 31MB/s auf 15,5MB/s = um ca. 50%

• Hintergrund: aufeinanderfolgende Bilder sind sich sehr ähnlich
  • Inter-Frame nutzt Redundanz zwischen zeitlich aufeinanderfolgenden Bildern
  • Gesetz der Nähe muss eingehalten werden (Bilder müssen ähnlich sein)
• Verfahren:
  1. Differenz-Codierung (frame differencing)
  2. Bewegungskompensation (motion compensation)

• Nach Startbild pro Pixel nur noch Differenz zum Vorgänger speichern
  • Viele Pixel haben Wert 0 0der kleinen Wert
  • Bsp.: bleibt HIntergrund gleich, ist Differenz = 0
• höhere Frame-Rate = mehr Speicherplatz
  aber: geringere Unterschiede = weniger Speicher
• Möglichkeiten der Differenz-Codierung:
  • Pixelwerte der Differenzbilder mit weniger Bits speichern
  • Entropiecodierung (häufig vorkommende Werte mit wenig Bits speichern)
  • Lauflängencodierung (wiederholende Pixelwerte)
• es wird alle x Sekunden das Keyframe gespeichert, falls Startframe verloren geht
  • nicht nur EInzelbild = Startbild, sondern alle paar Sekunden = neues Keyframe

• bei vielen Videos wird ganzes Bild oder nur Teile des Bildes verschoben
  • einige Pixel sind in zwei aufeinanderfolgenden Frames identisch, aber verschoben
• Methode: Block Matching
  • Speicherung des Blockes, der sich bewegen wird + seinen 2-dimensionalen Vektor und dessen Richtung (x,y)
• Erweiterung: nicht identische Bildteile werden verschoben, sondern nur sehr ähnliche
  > z.B. Objekt fährt auf Kamera zu, wodurch nicht mehr identisch, sondern ähnlich
  • zusätzliche Codierung die Unterschiede der Blöcke

1. Suche möglichst ähnliche Blöcke, die im Vorgängerbild auftauchen
2. Codiere Verschiebungsvektor
3. Berechne Differenzbild für verschobene Blöcke und codiere diese
4. Codiere alle Bereiche, für die keine verschobenen Blöcke gefunden wurden