Übung 28
11.11.2021
Geben Sie den unten abgedruckten Sketch 1 in den P5.js-Editor ein. Der Sketch wandelt ein farbiges Pixelbild mit einem globalen Schwellwertverfahren in ein Schwarzweißbild um, indem es alle Pixel, deren Helligkeit unter einem Schwellwert w liegt, schwarz macht und alle anderen weiß. Das konvertierte Bild wird im Fenster des Editors angezeigt. In der Programmiersprache JavaScript und in vielen anderen Programmiersprachen dürfen die Werte der Farbkanäle im Intervall [0, 255] liegen. Das RGB-Tripel (0, 0, 0) entspricht Schwarz und (255, 255, 255) Weiss.
Wählen Sie ein Bitmap-Bild Ihrer Wahl und fügen es zur aktuellen Editor-Sitzung hinzu. Wie das geht, zeigt Ihnen das englischsprachige kurze Tutorial bei https://happycoding.io/tutorials/p5js/images#adding-files-to-your-sketch. Im Sketch ist dies die JPEG-Datei namens “tiger.jpg”. Das verwendete Bild wurde über eine Websuche gefunden, ist gemeinfrei und stammt von Dave Pape (Dave Pape - Eigenes Werk, gemeinfrei, https://commons.wikimedia.org/w/index.php?curid=1568744). Bitte beachten Sie, daß der P5-js-Editor Sie nur eine Datei hochladen läßt, wenn Sie sich eingeloggt haben. Vergessen Sie nicht, im Sketch ggf. den Namen Ihrer Datei anzupassen. Zeigen Sie das von Ihnen verwendete Bild vor und nach der Binarisierung in Ihrem Blog.
Machen Sie sich mit dem Code vertraut. Sie sollen in der Lage sein, die einzelnen Zeilen zu erklären.
let img,
w = 127 // Bild, Schwellwert
function preload() {
// preload() wird genau einmal vor setup() ausgeführt und abgeschlossen
img = loadImage('google-gruender.jpg') // Lade das Ausgangsbild.
}
function setup() {
// setup() wird genau einmal nach preload() ausgeführt
createCanvas(1024, 1001) // Wir erzeugen einen hinreichend großen Zeichenbereich
}
function draw() {
// draw() wird 60 Mal pro Sekunde ausgeführt
//image(img, 0, 0, img.width, img.height); // Zeichne das Originalbild an Position (0, 0)
img.loadPixels() // Lade Pixel-Array für Bild, um die Pixel manipulieren zu können
for (
let x = 0;
x < img.width;
x++ // Durchlaufe alle Pixel (x, y) des Bildes
) {
for (let y = 0; y < img.height; y++) {
// Alle Farbkanäle des Pixels (x, y) haben denselben Wert
let r = red(img.get(x, y)) // r ist der Rotkanal des Pixels (x, y)
let g = green(img.get(x, y)) // g ist der Grünkanal
let b = blue(img.get(x, y)) // b ist der Blaukanal
// Vergleiche durchschn. Helligkeit der Farbe mit Schwellwert
if ((r + g + b) / 3 < w) {
//((r+g+b)/3) ist eine Annäherung an die Helligkeit
img.set(x, y, color(0, 0, 0, 255))
} else {
img.set(x, y, color(255, 255, 255, 255))
}
}
}
img.updatePixels() // Veranlasse permanente Änderungen an Pixeln im Bild
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()
}
