24. September 2013

Wir wurden beauftragt, in einer Animationsaufgabe einen Punkt einer Linie folgen zu lassen. Ich habe diese Aufgabe erweitert, um die Klassen PVector und PGraphics besser kennenzulernen und zu verstehen.
Auf einer Fläche werden weisse Punkte zufällig verteilt. Mit einem Klick wird ein roter Punkt bei der aktuellen Position des Mauscursors gezeichnet. Dieser Punkt kann mittels der Tastatur oder der Maus verschoben werden. Von allen weissen Punkten aus wird eine Linie zum roten Punkt gezogen. Beim weissen Punkt, welcher sich am nächsten beim roten Punkt befindet, wird die Linie stärker dargestellt sowie die Animation platziert.

PGraphics pgPoint; // bild für die punkte
PGraphics pgLine; // bild für die linien
ArrayList point = null; // weisse punkte
PVector currentPosition; // aktuelle position des roten punktes
int highlightIndex = -1; // indes des punktes, welcher am nächsten beim roten punkt ist

// animation
int curTime = 0;
int animSpeed = 25;
int animTime = 2000;
boolean drawFlag = false;
boolean animInverse = false;

void setup() {
  size(640, 360);
  smooth();

  point = new ArrayList();

  pgPoint = createGraphics(width, height);
  pgPoint.beginDraw();
  pgPoint.background(0);
  pgPoint.fill(255);
  pgPoint.noStroke();
  for (int i = 0; i < 20; i++) {     PVector vector = new PVector((int)random(0, width), (int)random(0, height));     point.add(vector);     pgPoint.ellipse(vector.x, vector.y, 10, 10);   }   pgPoint.endDraw();   pgLine = createGraphics(width, height);   pgLine.beginDraw();   pgLine.endDraw(); } void draw() {   image(pgPoint, 0, 0);    image(pgLine, 0, 0);      // animationsrichtung und aktuelle animationszeit berrechnen   if (animInverse) {     curTime -= animSpeed;   } else {     curTime += animSpeed;   }   if(curTime >= animTime) {
     animInverse = true;
  } else if (curTime <= 0) {     animInverse = false;   }   float normTime = curTime * 1.0 / animTime;      // animation update   if(highlightIndex >= 0) {
    stroke(255);

    // calculate the position of the circle on the line
    PVector dir = PVector.sub(currentPosition,point.get(highlightIndex));

    PVector pos = PVector.add(point.get(highlightIndex) , PVector.mult(dir,normTime));
    ellipse(pos.x,pos.y, 5,5);
  }
}

void mousePressed() {
  setPoint(new PVector(mouseX, mouseY));
}

void keyPressed() {
  // setPoint(mouseX, mouseY);
  PVector vector = new PVector();
  int speed = 5;
  switch (keyCode) {
  case 39:
    vector = new PVector(speed, 0);
    break;
  case 37:
    vector = new PVector(-speed, 0);
    break;
  case 40:
    vector = new PVector(0, speed);
    break;
  case 38:
    vector = new PVector(0, -speed);
    break;
  }

  vector.add(currentPosition);
  setPoint(vector);
}

void setPoint(PVector position) {

  currentPosition = position;

  // nächster punkt suchen
  float distance = 0;
  for (int i = 0; i < point.size(); i++) {
    float d = PVector.sub(point.get(i), position).mag();
    if (i == 0 || d < distance) {
      distance = d;
      highlightIndex = i;
      // println(distance);
    }
  }

  // println(highlightIndex);

  pgLine.clear();
  pgLine.beginDraw();

  // linien zeichnen
  for (int i = 0; i < point.size(); i++) {
    pgLine.strokeWeight(1);
    pgLine.stroke(255, 100);
    if (i == highlightIndex) {
      pgLine.stroke(255);
    }
    pgLine.line(position.x, position.y, point.get(i).x, point.get(i).y);
  }

  pgLine.noStroke();
  pgLine.fill(#DE1616);
  pgLine.ellipse(position.x, position.y, 10, 10);

  pgLine.endDraw();
}