U0211 Balance - Quadrate

Aufgabenstellung:

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

Mein Ergebnis:

Reflexion

Hier habe ich einfach den Code aus der vorherigen Aufgabe neu programmiert, sodass statt Kreisen Quadrate verwendet werden.

Die Bilder sind alle ziemlich interessant. Für mich vermitteln sie eher ein digitales, komprimiertes Gefühl, ähnlich wie digitale Bildartefakte und Kompression.

Die achte Zelle ist wahrscheinlich meine Favoritin, obwohl mich keine der Darstellungen wirklich anspricht.

Code

int rows = 4;
int cols = 4;

float cellPadding = 20;
float squareSpacing = 10;

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

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

void drawMatrixWithSquares() {
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);

    // squares
    for (int i = 0; i < 3; i++) {
        float size = random(10, squareSize / 2);
        float offsetX = random(-squareSize / 2 + size / 2, squareSize / 2 - size / 2);
        float offsetY = random(-squareSize / 2 + size / 2, squareSize / 2 - size / 2);
        float squareX = centerX + offsetX;
        float squareY = centerY + offsetY;

        fill(0); // black
        noStroke();
        rect(squareX, squareY, size, size);
    }
    }
}
}

void keyPressed() {
if (key == 's') {
    saveFrame("######.png");
}
// re-randomize
if (key == 'r') {
    redraw();
}
}