U0210 Balance - Circles

Aufgabenstellung

Erzeuge sechzehn Bilder (Vollbild) mit je drei Kreisen. Position sowie die Größe der Kreise soll per Zufall definiert werden. Beurteile jedes Bild nach seiner Balance.

Welche neuen Fragen ergeben sich? Was ist zu beobachten? Welche Parameter sind sinnvoll? Stehen diese in einem Bezug? Markieren dein schönstes Bild. Dokumentieren sie ihr Ergebnis in MKDocs.

Lernziel: Gewichte und Schwerpunkte gezielt einsetzen

Umsetzung

Schwerpunkt stark im rechten unteren Bereich, Bild wirkt nach rechts/unten gewichtet und etwas unausgeglichen.

Die Kreise verteilen sich gleichmäßig, das Bild wirkt ausgewogen und ruhig – eine balancierte Komposition.

Schwerpunkt unten links, das Bild wirkt etwas nach unten/links gewichtet, aber die diagonale Anordnung erzeugt Spannung.

Schwerpunkt im rechten Bereich, nach rechts/unten gewichtet, die linke/untere Bildhälfte bleibt leer – insgesamt eher unausgewogen.

Sehr linkslastig und unten gewichtet, der kleine Kreis rechts reicht nicht für einen Ausgleich – eher unausgewogen.

Schwerpunkt deutlich unten links, Kreise bilden eine kompakte Gruppe – Bild wirkt insgesamt unausgewogen.

Sanfte Diagonale, insgesamt relativ ausgewogen, spannungsreiche und ruhige Bildwirkung trotz des großen Kreises.

Unten rechts stark gewichtet, Balance ist nach rechts/unten verschoben, Bild wirkt dynamisch, aber wenig ausgewogen.

Sehr große Kreise unten dominieren, oben links etwas Ausgleich, aber das Bild wirkt unten schwer und insgesamt nicht optimal balanciert.

Großer Kreis unten rechts dominiert das Bild, die kleinen Kreise oben links reichen nicht zum Ausgleich – insgesamt sehr einseitig gewichtet.

Große Kreise rechts oben, kleiner Kreis unten schafft etwas Ausgleich – insgesamt aber leicht nach oben/rechts gewichtet.

Großer Kreis unten rechts dominiert, kleine Kreise oben links und auf dem großen Kreis bringen nur wenig Ausgleich – insgesamt stark nach rechts/unten gewichtet und wenig balanciert.

Relativ ausgewogen, oben rechts etwas betont durch die Gruppierung, aber insgesamt eine harmonische, luftige Komposition.

Kompakte Gruppe mit diagonaler Anordnung, leicht nach rechts unten gewichtet, aber insgesamt recht ausgewogen und harmonisch

Vertikale Gruppierung, Schwerpunkt unten, aber insgesamt recht ausgewogen und ruhig durch die zentrale Anordnung. -> dieses Bild gefällt mir am besten

Massive Ballung und Überlagerung unten rechts, Bild wirkt schwer und sehr unausgewogen – Schwerpunkt stark in einer Ecke.

Kommentare

Position der Kreise: beeinflusst, wie die Fläche wahrgenommen wird.
Größe der Kreise: gibt das „Gewicht“ der jeweiligen Fläche vor.
Überlappung: verstärkt die visuelle Gewichtung im Überlappungsbereich.
Abstand zum Bildrand: Ein großer Kreis am Rand wirkt oft instabil, in der Mitte ruhiger.

Neue Fragen:
Welche Rolle spielt die Farbe für die Balance-Wahrnehmung? Wirkt ein Bild anders, wenn der größte Kreis auch farblich am dominantesten ist?
Gibt es eine mathematische Methode, die Balance objektiv zu messen, oder bleibt es letztlich eine subjektive Einschätzung?
Wie würden weitere Kreise (z.B. 4 oder 5) die Balance beeinflussen?

Code

void setup() {
  size(800, 800); // Größe als feste Zahl, nicht mit Variablen!
  noLoop();
  generateAll();
}
void draw() {
}
float balanceScore(float[] xs, float[] ys, float[] rs) {
  float area1 = PI * sq(rs[0]);
  float area2 = PI * sq(rs[1]);
  float area3 = PI * sq(rs[2]);
  float totalArea = area1 + area2 + area3;
  float centerX = (xs[0]*area1 + xs[1]*area2 + xs[2]*area3) / totalArea;
  float centerY = (ys[0]*area1 + ys[1]*area2 + ys[2]*area3) / totalArea;
  float dx = centerX - width/2;
  float dy = centerY - height/2;
  return sqrt(dx*dx + dy*dy);
}
void generateAll() {
  int totalImages = 16;
  int w = width;
  int h = height;
  int minR = 60;
  int maxR = 220;
  int bestIndex = -1;
  float bestBalanceScore = 999999;
  PImage[] imgs = new PImage[totalImages];
  float[] balanceScores = new float[totalImages];

  for (int i = 0; i < totalImages; i++) {
    PGraphics pg = createGraphics(w, h);
    pg.beginDraw();
    pg.background(255);
    pg.noStroke();

    float[] xs = new float[3];
    float[] ys = new float[3];
    float[] rs = new float[3];

    for (int k = 0; k < 3; k++) {
      rs[k] = random(minR, maxR);
      xs[k] = random(rs[k], w - rs[k]);
      ys[k] = random(rs[k], h - rs[k]);
    }

    for (int k = 0; k < 3; k++) {
      pg.fill(0, 100 + k*60, 200 - k*80, 180);
      pg.ellipse(xs[k], ys[k], rs[k]*2, rs[k]*2);
    }

    float score = balanceScore(xs, ys, rs);
    balanceScores[i] = score;
    if (score < bestBalanceScore) {
      bestBalanceScore = score;
      bestIndex = i;
    }

    pg.endDraw();
    imgs[i] = pg;
    pg.save("output/U0210_Circles_" + nf(i+1,2) + ".png");
  }
  image(imgs[bestIndex], 0, 0);
  noFill();
  stroke(255,0,0);
  strokeWeight(20);
  rect(0, 0, w, h);

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