​

function setup() {

  createCanvas(400, 400);

  background(220);

​

  // Anzahl der Quadrate pro Reihe und Spalte

  let quadrateProReihe = 10;

  let quadrateProSpalte = 10;

​

  // Abstand zwischen den Quadraten

  let abstand = 3;

​

  // Berechnen der kürzeren Seite (damit alle Quadrate quadratisch sind)

  let kürzereSeite = min(width, height);

​

  // Breite und Höhe eines einzelnen Quadrats mit Berücksichtigung des Abstands

  let quadratSeite = (kürzereSeite - (quadrateProReihe - 1) * abstand) / quadrateProReihe;

​

  // Farbenpalette

  let farben = ['#FAF5F5', '#274C03', '#241000'];

​

  // Erstellen der Formen

  for (let i = 0; i < quadrateProReihe; i++) {

    for (let j = 0; j < quadrateProSpalte; j++) {

      // Zufällige Farbe aus der Palette auswählen

      let zufallsFarbe = random(farben);

      // Berechnen der Ecken-Radien

      let eckenRadius = quadratSeite / 2;

      let tl = random() < 0.5 ? 0 : eckenRadius; // oben links

      let tr = random() < 0.5 ? 0 : eckenRadius; // oben rechts

      let br = random() < 0.5 ? 0 : eckenRadius; // unten rechts

      let bl = random() < 0.5 ? 0 : eckenRadius; // unten links

      // Position des aktuellen Quadrats

      let x = i * (quadratSeite + abstand);

      let y = j * (quadratSeite + abstand);

      // Speichern der Form-Daten

      formen.push({x, y, quadratSeite, tl, tr, br, bl, farbe: zufallsFarbe});

    }

  }

}

​

function draw() {

  background(220);

​

  // Mausposition abrufen

  let mouseXPos = mouseX;

  let mouseYPos = mouseY;

​

  // Form unter der Maus ermitteln

  let aktuelleForm = null;

  for (let form of formen) {

    let x = form.x;

    let y = form.y;

    let s = form.quadratSeite;

    if (mouseXPos > x && mouseXPos < x + s && mouseYPos > y && mouseYPos < y + s) {

      aktuelleForm = form;

      break;

    }

  }

​

  // Zeichnen der Formen

  for (let form of formen) {

    fill(form.farbe);

    noStroke();

    // Wenn die Maus über der aktuellen Form ist, diese Form hervorheben

    let tl = form.tl;

    let tr = form.tr;

    let br = form.br;

    let bl = form.bl;

    if (form === aktuelleForm) {

      // Die Form unter der Maus wird hervorgehoben

      tl = tr = br = bl = form.quadratSeite / 1;

    }

    rect(form.x, form.y, form.quadratSeite, form.quadratSeite, tl, tr, br, bl);

  }

}

​