U0210 Balance - Kreise

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.

Mein Ergebnis:

Ergebnis 1Ergebnis 2

---

Reflexion

Diese letzten drei Aufgaben empfand ich persönlich als die wichtigsten. Durch die Zufallsgenerierung der verschiedenen Figuren musste ich diesmal nicht zuerst eine Bedeutung überlegen und diese dann visuell umsetzen, sondern ich musste aus etwas, das nicht von mir selbst erstellt war, eine Bedeutung erschaffen.

Den Code für die Zufallsgenerierung zu schreiben, war dank der Online-Ressourcen von Processing einfacher als gedacht.

Bei den zufälligen Kreisen gefällt mir definitiv die siebte Zelle (1. Spalte, 3. Reihe) am besten. Die Variationen in den Größen und die fast gleichmäßigen Abstände zwischen den Punkten geben jedem Punkt eine Art Schwerkraft und vermitteln mir persönlich das Gefühl, dass sie voneinander abhängig sind – eine Art harmonische Beziehung.

Nachdem ich mir die Kreise angesehen hatte, habe ich mich gefragt, wie das Bild wirken würde, wenn ich auch Höhe, Breite und Drehung der Kreise randomisieren würde, um Ellipsen zu erzeugen. Das war auf jeden Fall spannend zu programmieren und hat auch sehr interessante Bilder ergeben – auch wenn sich keines so harmonisch anfühlt wie die Kreise.

Code - 1Code - 2

int rows = 4;
int cols = 4;

float cellPadding = 20;
float squareSpacing = 10;

void setup() {
size(700, 700);
rectMode(CENTER);
noLoop();
}

void draw() {
background(200);
drawMatrixWithCircles();
}

void drawMatrixWithCircles() {
float cellWidth = (width - (cols + 1) * cellPadding) / cols;
float cellHeight = (height - (rows + 1) * cellPadding) / rows;
float squareSize = min(cellWidth, cellHeight) - squareSpacing;

for (int row = 0; row < rows; row++) {
    for (int col = 0; col < cols; col++) {
    float cellX = cellPadding + col * (cellWidth + cellPadding);
    float cellY = cellPadding + row * (cellHeight + cellPadding);

    float centerX = cellX + cellWidth / 2;
    float centerY = cellY + cellHeight / 2;

    // cells
    fill(255);
    stroke(50);
    rect(centerX, centerY, squareSize, squareSize);

    // circles
    for (int i = 0; i < 3; i++) {
        float circleSize = random(10, squareSize / 2);
        float offsetX = random(-squareSize / 2 + circleSize / 2, squareSize / 2 - circleSize / 2);
        float offsetY = random(-squareSize / 2 + circleSize / 2, squareSize / 2 - circleSize / 2);
        float circleX = centerX + offsetX;
        float circleY = centerY + offsetY;

        fill(random(255), random(255), random(255), 200); // random color with slight transparency
        noStroke();
        ellipse(circleX, circleY, circleSize, circleSize);
    }
    }
}
}

int rows = 4;
int cols = 4;

float cellPadding = 20;
float squareSpacing = 10;

void keyPressed() {
// Screenshot
    if (key == 's' || key == 'S') {
        saveFrame("######.png");
    }
}

void setup() {
size(700, 700);
rectMode(CENTER);
noLoop();
}

void draw() {
background(200);
drawMatrixWithCircles();
}

void drawMatrixWithCircles() {
float cellWidth = (width - (cols + 1) * cellPadding) / cols;
float cellHeight = (height - (rows + 1) * cellPadding) / rows;
float squareSize = min(cellWidth, cellHeight) - squareSpacing;

for (int row = 0; row < rows; row++) {
    for (int col = 0; col < cols; col++) {
    float cellX = cellPadding + col * (cellWidth + cellPadding);
    float cellY = cellPadding + row * (cellHeight + cellPadding);

    float centerX = cellX + cellWidth / 2;
    float centerY = cellY + cellHeight / 2;

    // cell formatting
    fill(255);
    stroke(50);
    rect(centerX, centerY, squareSize, squareSize);

    // circles (elipses)
    for (int i = 0; i < 3; i++) {
        float circleSize = random(10, squareSize / 2);
        float offsetX = random(-squareSize / 2 + circleSize / 2, squareSize / 2 - circleSize / 2);
        float offsetY = random(-squareSize / 2 + circleSize / 2, squareSize / 2 - circleSize / 2);
        float circleX = centerX + offsetX;
        float circleY = centerY + offsetY;

        fill(0);
        noStroke();
        ellipse(circleX, circleY, circleSize, circleSize);
    }
    }
}
}