xxxxxxxxxx
85
let formen = []; // Array, um die Eckradien der Formen zu speichern
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);
}
}