Übung 30

Schreiben Sie in P5.js einen Sketch, der auf einem unbunten Farbbild (siehe unten) eine Histogrammspreizung durchführt.

Ein Graustufenbild, bei dem die Werte für R, G und B gleich sind, wird als unbuntes RGB-Farbbild bezeichnet. Um ein unbuntes RGB-Farbbild zu erhalten, wandeln Sie mit GIMP ein RGB-Farbbild in ein RGB-Graustufenbild um. Benutzen Sie dazu die Menüpunkte “Bild->Modus: Graustufen” und “Datei->Exportieren nach”.

Zeigen und erläutern Sie den Code in Ihrem Blog, und zeigen Sie das von Ihnen verwendete Bild vor und nach der Histogrammspreizung.

let img,
  h_min = 255, // Niedrigster Helligkeitswert (worst case)
  h_max = 0 // Höhster Helligkeitswert (worst case)
const w_max = 255 // Maximaler Wert des Wertebereichs der Helligkeitswerte

function preload() {
  // preload() wird genau einmal vor setup() ausgeführt und abgeschlossen
  img = loadImage('uebung-30-1.png') // Lade das Ausgangsbild
}

function setup() {
  createCanvas(535, 576) // Canvas mit Auflösung des Bildes wird erstellt
}

function draw() {
  // draw() wird 60 Mal pro Sekunde ausgeführt
  img.loadPixels() // Lade das Pixel-Array für das Bild, um die Pixel manipulieren zu können
  const d = pixelDensity() // Pixeldichte

  for (let i = 0; i < img.pixels.length / 4; i++) {
    // Durchlaufe alle Pixel des Bildes (jedes vierte Pixel im Array)
    const index = 4 * d * i // erhalte den aktuellen Index im Pixelarray (rot-Wert)
    const h = img.pixels[index] // Helligkeitswert des aktuellen Pixels (rot-Wert)

    if (h < h_min) h_min = h // Überschreibe h_min mit akutellem Helligkeitswert,
    // wenn aktueller Helligkeitswert niedriger ist als bisher gefundener niedrigster Helligkeitswert
    if (h > h_max) h_max = h // Überschreibe h_min mit akutellem Helligkeitswert,
    // wenn aktueller Helligkeitswert höher ist als bisher gefundener höchster Helligkeitswert
  }

  for (let i = 0; i < img.pixels.length / 4; i++) {
    // Zweiter Durchlauf zum Überschreiben (gleich wie oben)
    const index = 4 * d * i
    const h = img.pixels[index]

    const newH = ((h - h_min) / (h_max - h_min)) * w_max // Berechne neuen Helligkeitswert nach Formel
    img.pixels[index] = img.pixels[index + 1] = img.pixels[index + 2] = newH
    // Setze r-, g- und b-Wert des aktuellen Pixels auf neuen berechneten Helligkeitswert
  }

  img.updatePixels() // Schreibe Änderungen an den Pixeln in das Pixel-Array des Bildes zurück
  image(img, 0, 0, img.width, img.height) // Zeichne das Bild an Position (0, 0)
  noLoop() // Stoppe das Programm nach einmaliger Ausführung von draw()
}

Da die Rahmenbedingung “es muss sich um ein Graustufenbild” vorgegeben war, wird keine Berechnung des Helligkeitswertes vorgenommen, sondern vereinfacht der rot-Wert eines Pixels unter der Annahme r == g == b && a == 255 verwendet.

Originalbild (Albert Einstein) Binarisiertes Bild


Geschrieben von@Dennis Adamczyk
Matrikelnummer: 30545