11.11.2021
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.