U0207 Punktübung in drei Schritten

Aufgabenstellung

Drei Serien mit drei quadratischen Grundflächen (Schritten) pro Zeile (3x3 Matrix).

Gleich große Punkte, Anzahl zunehmend, kein Anschnitt. Zwei Punktgrößen, Anzahl zunehmend, kein Anschnitt. Drei Punktgrößen, Anzahl zunehmend, kein Anschnitt. Welche neuen Fragen ergeben sich? Dokumentieren sie ihr Ergebnis in MKDocs.

Umsetzung

Kommentare

1. Serie: Gleich große Punkte
   Schritt 1: Wenige, gleich große Punkte, viel Leerraum.
   Schritt 2: Mehr gleich große Punkte, der Leerraum wird kleiner, das Muster dichter.
   Schritt 3: Viele gleich große Punkte, die Fläche ist beinahe gefüllt, es entsteht eine gleichmäßige Streuung.
   Wirkung:
   Mit jedem Schritt wirkt die Fläche geschlossener und belebter, bleibt aber durch die Gleichförmigkeit der Punkte ruhig und harmonisch.

2. Serie: Zwei Punktgrößen
   Schritt 1: Mischung aus großen und kleinen Punkten, wenige insgesamt.
   Schritt 2: Mehr Punkte, beide Größen, die Anordnung wird komplexer.
   Schritt 3: Noch mehr Punkte, das Verhältnis zwischen groß und klein ist ausgewogen, die Komposition wird spannungsreicher.
   Wirkung:
   Durch die zwei Größen entsteht ein neues Spannungsverhältnis: Die Fläche wirkt dynamischer, der Blick springt mehr zwischen den Punkten hin und her, besonders zu den größeren.

3. Serie: Drei Punktgrößen
   Schritt 1: Erste Mischung von drei Größen, wenige Punkte, starke Dominanz der größten.
   Schritt 2: Deutlich mehr Punkte, die Komplexität steigt, viele visuelle Hierarchien entstehen.
   Schritt 3: Viele kleine, mittlere und große Punkte – die Fläche wirkt sehr lebendig, teils schon fast chaotisch.
   Wirkung:
   Die Kombination aus drei Punktgrößen bringt die größte Komplexität und auch die größte Dynamik. Der Kontrast zwischen groß und klein sorgt für viel Bewegung und Differenzierung in der Fläche.

Erkenntnisse aus der Übung
Die Steigerung der Anzahl sorgt in jeder Serie für mehr Lebendigkeit und Dichte.
Die Erweiterung der Punktgrößen macht die Kompositionen komplexer und dynamischer.
Je mehr Punktgrößen kombiniert werden, desto spannender, aber auch unübersichtlicher kann die Fläche wirken.

Neue Fragen, die sich ergeben haben:
Wie beeinflusst die genaue Platzierung die Wahrnehmung von Ordnung und Chaos?
Gibt es eine ideale Mischung aus Regelmäßigkeit und Zufall, damit die Fläche spannend, aber nicht überladen wirkt?
Wie stark sollten sich die Punktgrößen unterscheiden, um wirklich verschiedene Ebenen/Hierarchien sichtbar zu machen?
Wie verändert sich die Wirkung, wenn die Punkte (leicht) angeschnitten werden dürften?
Wäre dann die Fläche noch lebendiger oder würde sie unruhig?
Wie lassen sich ähnliche Prinzipien auf andere Grundformen (z.B. Linien, Rechtecke) übertragen?
Ab wann entsteht bei vielen Größen und Punkten eine Überforderung für das Auge?

Code

void setup() {
  size(660, 660);  // (200 + 20) * 3 = 660
  background(255);
  noStroke();
  drawMatrix(200, 20);  // cellSize, spacing
  saveFrame("output/U0207-Punktmatrix.png");
  println("Punktmatrix gespeichert.");
}
void drawMatrix(int cellSize, int spacing) {
  for (int row = 0; row < 3; row++) {
    for (int col = 0; col < 3; col++) {
      float x0 = col * (cellSize + spacing);
      float y0 = row * (cellSize + spacing);
      drawStep(x0, y0, row, col, cellSize);
    }
  }
}
void drawStep(float x, float y, int row, int col, int cellSize) {
  fill(255);
  stroke(0);
  rect(x, y, cellSize, cellSize);
  noStroke();
  fill(0);

  int numPoints = 5 + col * 5;
  float[] sizes;

  if (row == 0) {
    sizes = new float[] {12};
  } else if (row == 1) {
    sizes = new float[] {8, 16};
  } else {
    sizes = new float[] {6, 12, 18};
  }

  ArrayList<PVector> placed = new ArrayList<PVector>();
  int attemptsLimit = 300;

  for (int i = 0; i < numPoints; i++) {
    float sz = sizes[i % sizes.length];
    int attempts = 0;
    boolean placedOK = false;

    while (!placedOK && attempts < attemptsLimit) {
      float px = random(x + sz / 2 + 2, x + cellSize - sz / 2 - 2);
      float py = random(y + sz / 2 + 2, y + cellSize - sz / 2 - 2);
      boolean overlaps = false;

      for (PVector p : placed) {
        float minDist = (sz / 2) + 2;
        if (dist(px, py, p.x, p.y) < minDist * 2) {
          overlaps = true;
          break;
        }
      }

      if (!overlaps) {
        ellipse(px, py, sz, sz);
        placed.add(new PVector(px, py));
        placedOK = true;
      }

      attempts++;
    }
  }
}