U0200 Grundelemente - Der Punkt

Aufgabenstellung:

Programmieren Sie in Processing einen Punkt in auf einer Vollbild Grundfläche. A) Der Punkt soll so positioniert sein, dass er Ruhe ausstrahlt. B) Der Punkt soll so positioniert sein, dass er Spannung ausstrahlt.

Mein Ergebnis:

RuheSpannung

---

ReflexionCode

Für diese Aufgabe und die folgenden Aufgaben habe ich einen einfachen Schieberegler programmiert, mit dem ich steuern konnte, wie viele Punkte auf dem Bildschirm angezeigt werden. Diese Punkte konnten dann durch Klicken und Halten bewegt werden, sodass ich sie für die verschiedenen Aufgaben entsprechend positionieren konnte.

Diese Aufgabe schien anfangs recht einfach zu sein. Es war leicht, den Ruhezustand des Punktes als das Platzieren in der Mitte des Bildschirms zu definieren. Doch als es darum ging, „Spannung“ zu finden, hat es länger gedauert als erwartet. Zunächst habe ich den Punkt in die obere rechte Ecke gesetzt, aber das wirkte für mich eher wie eine natürliche „Endposition“ für einen Punkt. Da die meisten westlichen Sprachen von links nach rechts gelesen werden, fühlte es sich so an, als ob der Punkt sein „Ende“ gefunden hätte, wenn er rechts platziert war.

Den Punkt weiter unten zu platzieren, fühlte sich ebenfalls nicht ganz richtig an, da ich damit auch eine Art „Ruhe“ verbunden habe. Im Physikunterricht haben wir gelernt, dass alle Objekte nach Ruhe streben. Unser Professor hat das veranschaulicht, indem er einen Ball auf einem Hügel zeigte. Der Ball würde nach unten rollen und erst dann zur Ruhe kommen, wenn er einen Platz gefunden hat, an dem er liegen bleibt.

Somit blieb als einzige andere Position die obere linke Ecke übrig. Für andere mag diese Position ebenfalls weniger „angespannt“ wirken als die, die ich ausgeschlossen habe, aber ich denke, das ist letztlich eine Frage subjektiver Wahrnehmung.

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

ArrayList<Dot> dots;
int numDots = 1;
int minDots = 1;
int maxDots = 10;

// slider
float sliderPadding = 10;
float sliderWidth;
float sliderX;
float sliderY;
boolean sliderActive = false;
int sliderHeight = 5;
int sliderHandleRadius = 5;

// dragging
Dot selectedDot = null;
float offsetX, offsetY;

void setup() {
size(600, 400);

// initial dots
dots = new ArrayList<Dot>();
setupDots(numDots);

// slider setup
sliderWidth = width - 2 * sliderPadding;
sliderY = height - 40;
sliderX = sliderPadding + map(numDots, minDots, maxDots, 0, sliderWidth);
}

void draw() {
background(255);

// draw dots
for (Dot d : dots) {
    d.display();
}

drawSlider();
}

void drawSlider() {
float lineY = sliderY;

// draw slider line
stroke(240);
strokeWeight(1);
line(sliderPadding, lineY, sliderPadding + sliderWidth, lineY);

// draw handle
fill(230);
noStroke();
ellipse(sliderX, lineY, sliderHandleRadius * 2, sliderHandleRadius * 2);
}

void mousePressed() {
// check slider
if (dist(mouseX, mouseY, sliderX, sliderY) < sliderHandleRadius + 2) {
    sliderActive = true;
    return;
}

// check dots
for (Dot d : dots) {
    if (d.isMouseOver()) {
    selectedDot = d;
    offsetX = mouseX - d.pos.x;
    offsetY = mouseY - d.pos.y;
    break;
    }
}
}

void mouseDragged() {
if (sliderActive) {
    sliderX = constrain(mouseX, sliderPadding, sliderPadding + sliderWidth);
    int newNumDots = int(map(sliderX - sliderPadding, 0, sliderWidth, minDots, maxDots));
    if (newNumDots != numDots) {
    numDots = newNumDots;
    setupDots(numDots);
    }
}

if (selectedDot != null) {
    selectedDot.pos.x = mouseX - offsetX;
    selectedDot.pos.y = mouseY - offsetY;
}
}

void mouseReleased() {
sliderActive = false;
selectedDot = null;
}

void setupDots(int count) {
dots.clear();
float spacing = width / float(count + 1);
float y = height / 2;
for (int i = 0; i < count; i++) {
    float x = spacing * (i + 1);
    dots.add(new Dot(x, y));
}
}

class Dot {
PVector pos;
float size = 20;

Dot(float x, float y) {
    pos = new PVector(x, y);
}

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

boolean isMouseOver() {
    return dist(mouseX, mouseY, pos.x, pos.y) < size / 2;
}
}