Übung 29

let img,
  w = 127 // Bild, Schwellwert

function preload() {
  // preload() wird genau einmal vor setup() ausgeführt und abgeschlossen
  img = loadImage('natur.jpg') // Lade das Ausgangsbild
}

function setup() {
  // setup() wird genau einmal nach preload() ausgeführt
  createCanvas(2480, 1160) // Wir erzeugen ein hinreichend großes Fenster
}

function draw() {
  // draw() wird 60 Mal pro Sekunde ausgeführt
  //image(img, 0, 0, img.width, img.height); // Zeichne das Bild an Position (0, 0)
  img.loadPixels() // Lade das Pixel-Array für das Bild, um die Pixel manipulieren zu können
  const d = pixelDensity() // Siehe https://p5js.org/reference/#/p5/pixelDensity

  for (let x = 0; x < img.width; x++) {
    // Durchlaufe alle Pixel (x, y) des Bildes
    for (let y = 0; y < img.height; y++) {
      const index = 4 * d * (y * d * img.width + x) // Position des RGB-Tripels im Pixel-Array
      // Weise dem Tripel r, g, b die RGB-Werte des Pixels (x, y) im Bild zu
      const [r, g, b] = [
        img.pixels[index],
        img.pixels[index + 1],
        img.pixels[index + 2],
      ]

      if ((r + g + b) / 3.0 < w) {
        // Vergleiche durchschn. Helligkeit der Farbe mit dem Schwellwert
        setzePixel(x, y, d, 0) // Setze Pixel auf schwarz
      } else {
        setzePixel(x, y, d, 255) // Setze Pixel auf weiss
      }
    }
  }

  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()
}

function setzePixel(x, y, d, val) {
  // Setzt die Farbkanäle für das Pixel (x, y) auf val
  for (let i = 0; i < d; i++) {
    for (let j = 0; j < d; j++) {
      // Siehe unbedingt https://p5js.org/reference/#/p5/pixels
      let index = 4 * ((y * d + j) * img.width * d + (x * d + i))
      img.pixels[index] = val // Setzt Rotanteil
      img.pixels[index + 1] = val // Setzt Grünanteil
      img.pixels[index + 2] = val // Setzt Blauanteil
      img.pixels[index + 3] = 255 // Transparenz ist immer 255
    }
  }
}