Skip to content

U0200 Die Grundfläche

Aufgabenstellung:

Erstellen Sie sich in Processing eine „Arbeitsfläche“, die mehrere Grundflächen wie die im Beispiel rechts in einem Raster anordnen.Versuchen Sie diese so flexibel wie möglich zu programmieren, um verschiedene Raster später realisieren zu können.

Mein Ergebnis:

U200-1

U200-2

U200-3

Das war das erste Mal, dass ich Processing benutzt habe, und am Anfang hatte ich ein paar Schwierigkeiten, die verschiedenen Methoden und Funktionen zu verstehen. Zum Glück konnte ich mit genug Hilfe aus Online-Foren und reichlich googeln die Grundlagen schnell begreifen, was mir bei den nächsten Aufgaben geholfen hat.

Am Ende habe ich etwas Code gefunden und benutzt, um zwei Schieberegler zu erstellen: einen für die Anzahl der Zeilen und einen für die Anzahl der Spalten. Damit konnte ich Zellen mit unterschiedlichen Breiten und Höhen erstellen – nicht nur Quadrate.

Lustigerweise habe ich dabei das bekannte „Black Dot Illusion“- oder „Scintillating Grid Illusion“-Phänomen in den Ecken der Zellabstände bemerkt. Dieser Effekt wurde verstärkt, je kleiner oder zahlreicher die Zellen in der Matrix waren.

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

// matrix variables
int cols = 5;
int rows = 5;
int minCells = 1;
int maxCells = 20;

// slider bar
int sliderHeight = 10;
int sliderPadding = 20;
float sliderWidth;

float slider1X, slider2X;
boolean slider1Active = false;
boolean slider2Active = false;

int circleRadius = 5;

void setup() {
size(800, 800);
sliderWidth = width - 2 * sliderPadding;
slider1X = sliderPadding + map(cols, minCells, maxCells, 0, sliderWidth);
slider2X = sliderPadding + map(rows, minCells, maxCells, 0, sliderWidth);
}

void draw() {
background(255);

// slider space
int sliderSpace = 3 * sliderHeight + 30;
int matrixHeight = height - sliderSpace;

// cells
float padding = 10;
float cellWidth = width / float(cols);
float cellHeight = matrixHeight / float(rows);

for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
    float x = i * cellWidth + padding / 2;
    float y = j * cellHeight + padding / 2;
    float w = cellWidth - padding;
    float h = cellHeight - padding;

    fill(50);
    rect(x, y, w, h);
    }
}

drawSliders();
}

void drawSliders() {
stroke(200);
strokeWeight(2);

float y1 = height - 2 * sliderHeight - 20;
float y2 = height - sliderHeight - 10;

// sliders
line(sliderPadding, y1, sliderPadding + sliderWidth, y1);
line(sliderPadding, y2, sliderPadding + sliderWidth, y2);

// slider handles
fill(180);
noStroke();
ellipse(slider1X, y1, circleRadius * 2, circleRadius * 2);
ellipse(slider2X, y2, circleRadius * 2, circleRadius * 2);

}

void mousePressed() {
float y1 = height - 2 * sliderHeight - 20;
float y2 = height - sliderHeight - 10;

if (dist(mouseX, mouseY, slider1X, y1) < circleRadius + 2) {
    slider1Active = true;
}
if (dist(mouseX, mouseY, slider2X, y2) < circleRadius + 2) {
    slider2Active = true;
}
}

void mouseDragged() {
if (slider1Active) {
    slider1X = constrain(mouseX, sliderPadding, sliderPadding + sliderWidth);
    cols = int(map(slider1X - sliderPadding, 0, sliderWidth, minCells, maxCells));
}
if (slider2Active) {
    slider2X = constrain(mouseX, sliderPadding, sliderPadding + sliderWidth);
    rows = int(map(slider2X - sliderPadding, 0, sliderWidth, minCells, maxCells));
}
}

void mouseReleased() {
slider1Active = false;
slider2Active = false;
}