U0203 Position mehrerer Punkte

Aufgabenstellung:

Positionieren Sie mehrere Punkt so, dass folgende Anmutungen entstehen (die Größe des Punktes bleibt gleich): * leicht * schwer * schwebend * lastend * froh * traurig * bewegt * statisch * unruhig * ruhig * nah * fern

Mein Ergebnis:

• Leicht
• Schwer
• Schwebend
• Lastend
• Froh
• Traurig
• Bewegt
• Statisch
• Unruhig
• Ruhig
• Nah
• Fern

ReflexionCode

Für diese Aufgabe hat die größere Anzahl an Punkten definitiv dazu geführt, dass ich mir bei jedem Adjektiv mehr Gedanken gemacht habe als bei der vorherigen Aufgabe. Bei den letzten paar Adjektiven habe ich dazu geneigt, immer wieder das gleiche Muster zu verwenden, nur mit unterschiedlicher Dichte und Position. Bei den eher „beschwingten“ Adjektiven wie „leicht“, „schwebend“ und „froh“ habe ich die Punkte im Vergleich zu den anderen Adjektiven tendenziell unregelmäßiger angeordnet.

//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;
}
}