U0207 Punktübung in 3 Schritten

Aufgabenstellung:

Drei Serien mit drei quadratischen Grundflächen (Schritten) pro Zeile (3x3 Matrix). 1. Gleich große Punkte, Anzahl zunehmend, kein Anschnitt. 2. Zwei Punktgrößen, Anzahl zunehmend, kein Anschnitt. 3. Drei Punktgrößen, Anzahl zunehmend, kein Anschnitt.

Mein Ergebnis:

Reflexion

Hier habe ich erneut eine Funktion programmiert, um zwischen drei verschiedenen Punktgrößen zu wechseln, mit der ich die Aufgabe umgesetzt habe.

In der ersten Reihe ist die stetig zunehmende Anzahl an Punkten zwar auffällig, fühlt sich aber nicht wirklich bedeutungsvoll an. Die Art, wie ich es dargestellt habe, war mein erster Versuch – ohne echte Intention in Bezug auf Anzahl, Dichte oder Position der Punkte – und selbst jetzt könnte ich mir kaum vorstellen, es anders zu machen.

Für die nächste Reihe mit zwei Punktgrößen habe ich versucht, die Anzahl der kleinen und großen Punkte in jeder Zelle gleich zu halten, aber das Verhältnis wirkte beim Betrachten immer falsch. Der Größenunterschied erzeugt eine Art Dissonanz zwischen den beiden Größen.

Schließlich habe ich bei den drei Punktgrößen versucht, ein Verhältnis von 2:1 für zunehmende Punktgrößen beizubehalten: In der ersten Zelle hatte ich also 8 kleine Punkte, 4 mittelgroße Punkte und 2 große Punkte. Dieses Verhältnis habe ich für die nächsten Zellen übernommen. Persönlich habe ich dabei das Gefühl, dass jede Punktgröße innerhalb jeder Zelle gleich wichtig wirkt.

Natürlich würde eine Änderung dieses Verhältnisses das Gesamtbild beeinflussen. Wie würde es mit einem 4:1-Verhältnis wirken? Wie mit einem 10:1-Verhältnis? Und so weiter…

Code

int rows = 3;
int cols = 3;

float cellPadding = 20;
float squareSpacing = 10;

ArrayList<Dot> dots = new ArrayList<Dot>();
String currentSize = "medium"; // default size

Dot selectedDot = null;

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

void draw() {
background(200);
drawMatrix();
drawDots();
}

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

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;

    float leftX = centerX - squareSize / 2 - squareSpacing / 2;
    float rightX = centerX + squareSize / 2 + squareSpacing / 2;

    fill(255);
    stroke(50);
    rect(leftX, centerY, squareSize, squareSize);
    rect(rightX, centerY, squareSize, squareSize);
    }
}
}

void drawDots() {
for (Dot d : dots) {
    d.display();
}
}

void mousePressed() {
// clicked on exisiting dot
for (Dot d : dots) {
    if (d.isHovered(mouseX, mouseY)) {
    selectedDot = d;
    return;
    }
}

// new dot
float size = getSizeFromCurrent();
dots.add(new Dot(mouseX, mouseY, size));
}

void mouseDragged() {
if (selectedDot != null) {
    selectedDot.x = mouseX;
    selectedDot.y = mouseY;
}
}

void mouseReleased() {
selectedDot = null;
}

void keyPressed() {
if (key == 'u' || key == 'U') {
    currentSize = "small";
} else if (key == 'i' || key == 'I') {
    currentSize = "medium";
} else if (key == 'p' || key == 'P') {
    currentSize = "large";
}
}

// helpers
float getSizeFromCurrent() {
switch (currentSize) {
    case "small": return 8;
    case "large": return 28;
    default: return 20;
}
}

// dots
class Dot {
float x, y, size;

Dot(float x, float y, float size) {
    this.x = x;
    this.y = y;
    this.size = size;
}

void display() {
    fill(0);
    noStroke();
    ellipse(x, y, size, size);
}

boolean isHovered(float mx, float my) {
    return dist(mx, my, x, y) < size / 2 + 2;
}
}