Kreativität durch Algorithmen: Generative Gestaltung
Die Verschmelzung von Kunst und Programmierung zur Schaffung dynamischer Designs

let circleSize, circleCount;
let fixedColor = 'rgb(255, 0, 0)'; // Feste Farbe (Rot)

function setup() {
  createCanvas(900, 1200); // Erstelle eine Leinwand
  background(0); // Setze den Hintergrund auf Schwarz
  strokeWeight(3); // Linienstärke für die Bögen
  strokeCap(SQUARE); // Eckige Enden für Linien
  noLoop(); // Keine automatische Wiederholung
}

function draw() {
  generatePattern(); // Generiere das Muster
}

function generatePattern() {
  circleCount = int(random(3, 5)); // Anzahl der Kreise pro Block
  circleSize = int(random(20, 40)); // Größe der Blöcke

  fill(fixedColor); // Fülle mit der festen Farbe
  rect(0, 0, width, height); // Zeichne den Hintergrund

  // Iteriere über die y-Positionen
  for (let y = circleSize / 2; y < height + circleSize / 2; y += circleSize) {
    // Iteriere über die x-Positionen
    for (let x = circleSize / 2; x < width + circleSize / 2; x += circleSize) {
      drawRotatedPattern(x, y); // Zeichne ein rotiertes Muster an jeder Position
    }
  }
}

// Zeichnet ein rotiertes Muster an einer bestimmten Position
function drawRotatedPattern(x, y) {
  push(); // Speichert den aktuellen Zustand des Koordinatensystems
  translate(x, y); // Verschiebe Ursprung zum aktuellen Block
  rotate(HALF_PI * int(random(4))); // Rotiere zufällig um 0, 90, 180 oder 270 Grad
  drawArcs(-circleSize / 2, -circleSize / 2); // Zeichne die ersten Viertelkreise
  drawArcs(-circleSize / 2 + circleSize, -circleSize / 2 + circleSize, PI); // Zeichne die gegenüberliegenden Viertelkreise
  pop(); // Wiederherstellen des ursprünglichen Zustands des Koordinatensystems
}

// Zeichnet Viertelkreise an der angegebenen Position
function drawArcs(x, y, startAngle = 0) {
  for (let layer = circleCount; layer > 0; layer--) {
    let diameter = (circleSize * 2 * layer) / (circleCount + 1); // Durchmesser basierend auf der Ebene
    fill(fixedColor); // Fülle mit der festen Farbe
    arc(x, y, diameter, diameter, startAngle, startAngle + HALF_PI); // Zeichne den Viertelkreis
  }
}