U0209 Vom Punkt zur Fläche

Aufgabenstellung:

Erzeuge eine Bildsequenz vom Punkt zur Fläche durch das Hinzufügen progressiv wachsender – also prozentual größer werdender – Punkte (kreisförmige, schwarze Flächen) in sechs Einzelbildern. Der Rand kann bei Bedarf angeschnitten werden.

Erstelle insgesamt zwei verschiedene Bildsequenzen Füge die Möglichkeit (Funktion) des Anschnitts den Grundflächen hinzu.

Mein Ergebnis:

Reflexion

Für diese Aufgabe habe ich erneut die Anzahl der Punktgrößen von 3 auf 6 erhöht, wobei jede Größe durch einen Tastendruck aktiviert werden konnte.

In der ersten Reihe hatte ich nicht nur zunehmende Punktgrößen, sondern auch eine zunehmende Anzahl an Punkten. Ich finde, erst ab der fünften Zelle entsteht eine Art „Fläche“. Es scheint so, als würde die Verbundenheit der Punkte eine Fläche erzeugen, mehr als die reine Anzahl an Punkten selbst.

Für die zweite Reihe habe ich in jeder Zelle nur 9 Punkte verwendet und die Dichte in jeder Spalte erhöht. Selbst mit den kleinen Lücken in der letzten Zelle wirken die Punkte für mich immer noch wie eine Fläche. Noch höhere Dichte würde dieses Gefühl vermutlich verstärken.

Code

int rows = 2;
int cols = 6;

float cellPadding = 20;
float squareSpacing = 10;

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

Dot selectedDot = null;

void setup() {
size(700, 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, 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;

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

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

void mousePressed() {
// clicked on existing 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 == 't' || key == 'T') {
    currentSize = "tiny";
} else if (key == 'z' || key == 'Z') {
    currentSize = "small";
} else if (key == 'u' || key == 'U') {
    currentSize = "medium-small";
} else if (key == 'i' || key == 'I') {
    currentSize = "medium";
} else if (key == 'o' || key == 'O') {
    currentSize = "large";
} else if (key == 'p' || key == 'P') {
    currentSize = "huge";
}

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

// check size
float getSizeFromCurrent() {
switch (currentSize) {
    case "tiny": return 6;
    case "small": return 10;
    case "medium-small": return 14;
    case "medium": return 20;
    case "large": return 28;
    case "huge": return 36;
    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;
}
}