U0209 Vom Punkt zur Fläche

Aufgabenstellung

Erzeuge eine Bildsequenz vom Punkt zur Fläche durch das Hinzufügen progressiv wachsender – also prozentual größer werdender – Punkte (kreisförmige, schwarze Flächen) in sechs Einzelbildern. Der Rand kann bei Bedarf angeschnitten werden.

Erstelle insgesamt zwei verschiedene Bildsequenzen Füge die Möglichkeit (Funktion) des Anschnitts den Grundflächen hinzu.

Welche neuen Fragen ergeben sich? Was ist zu beobachten? Dokumentieren sie ihr Ergebnis in MKDocs.

Umsetzung

Kommentare

Zentriert wachsend:
In der oberen Sequenz wächst ein Kreis in der Mitte des Kästchens kontinuierlich an. In jedem Einzelbild kommt ein neuer, größerer Kreis hinzu, bis im letzten Bild das komplette Kästchen mit Schwarz gefüllt ist.
Zufällig wachsend (mit Anschnitt):
In der unteren Sequenz erscheinen die Kreise an zufälligen Positionen. Dabei wird darauf geachtet, dass einige Kreise absichtlich angeschnitten sind, d. h. über den Rand hinausragen. Auch hier füllt sich im letzten Schritt das komplette Feld schwarz.

Verwandlung & Flächenwirkung:
Die Bildsequenzen zeigen anschaulich, wie aus einem einzigen Punkt durch wiederholtes Hinzufügen und Vergrößern von Kreisen eine Fläche entsteht. Besonders in der zentrierten Variante wird der Übergang von Punkt zu Fläche sehr klar, fast mathematisch nachvollziehbar.
Anschnitt-Effekt:
Durch den Anschnitt bei der zweiten Sequenz verändert sich die Bildwirkung stark: Die Komposition wirkt offener, dynamischer und teilweise auch räumlicher, da angeschnittene Kreise suggerieren, dass die Fläche über das Kästchen hinausgeht.
Letztes Bild:
Im letzten Bild verschwindet die Punktstruktur komplett; das Bild kippt zur Fläche – der einzelne Punkt ist nicht mehr identifizierbar, sondern geht in der Fläche auf.

Wahrnehmung:
Wie verändert sich die visuelle Wahrnehmung von Dichte, Gewicht und Räumlichkeit je nach Anordnung und Anschnitt?
Kompositorische Wirkung:
Inwiefern beeinflusst die Symmetrie (zentriert) versus Zufall (randomisiert mit Anschnitt) das Gefühl von Ruhe, Dynamik oder Spannung im Bild?
Design & Praxis:
Welche Rolle spielen solche Transformationen bei der Gestaltung von Logos, Icons oder anderen grafischen Anwendungen?
Methodik:
Gibt es noch weitere Übergangsformen (z.B. Kombination aus mehreren kleinen Kreisen statt einem großen)?

Code

void setup() {
  size(1440, 940); // 200*6 + 20*2, 200*2 + 20*3 + etwas mehr Höhe für Text
  background(255);
  noLoop();
}
void draw() {
  int totalFrames = 6;
  int cellSize = 200;
  int margin = 20;
  int textOffset = 50;

  fill(30);
  noStroke();
  textAlign(LEFT, TOP);
  textSize(32);
  text("Zentriert wachsend", margin, 10);

  text("Zufällig wachsend (mit Anschnitt)", margin, margin + cellSize + margin/2 + cellSize + 10);

  for (int f = 0; f < totalFrames; f++) {
    int cx = margin + cellSize/2 + f * cellSize;
    int cy = margin + cellSize/2 + textOffset;

    stroke(120);
    strokeWeight(2);
    noFill();
    rect(margin + f*cellSize, margin + textOffset, cellSize, cellSize);

    noStroke();
    if (f == totalFrames-1) {
      fill(0);
      rect(margin + f*cellSize, margin + textOffset, cellSize, cellSize);
    } else {
      fill(0);
      for (int i = 0; i <= f; i++) {
        float maxR = cellSize * 0.42;
        float r = maxR * ((float)(i+1) / totalFrames);
        ellipse(cx, cy, r*2, r*2);
      }
    }
  }

  for (int f = 0; f < totalFrames; f++) {
    int cx = margin + cellSize/2 + f * cellSize;
    int cy = margin*2 + cellSize + cellSize/2 + textOffset;

    stroke(120);
    strokeWeight(2);
    noFill();
    rect(margin + f*cellSize, margin*2 + cellSize + textOffset, cellSize, cellSize);

    noStroke();
    if (f == totalFrames-1) {
      fill(0);
      rect(margin + f*cellSize, margin*2 + cellSize + textOffset, cellSize, cellSize);
    } else {
      randomSeed(12345+f); // Für Wiederholbarkeit
      fill(0);
      for (int i = 0; i <= f; i++) {
        float maxR = cellSize * 0.32;
        float r = maxR * ((float)(i+1) / totalFrames);
        float x = random(-r*0.7, cellSize+r*0.7) - cellSize/2;
        float y = random(-r*0.7, cellSize+r*0.7) - cellSize/2;
        ellipse(cx + x, cy + y, r*2, r*2);
      }
    }
  }

  saveFrame("output/U0209_gesamt_lesbar.png");
}