2. Dezember 2010

Hier wird das im vorherigen Artikel beschriebene Flussdiagramm umgesetzt. Der jetzige Stand der Animation reagiert auf die Mausbewegung, durch Rotation und Skalierung. Dies ist eine Testumgebung um die Art der Animierung auszuprobieren, später soll alles automatisiert werden.

Zeichen[][] z; 
boolean stopAnimation = false;

int cols = 7;
int rows = 7;
int shift = 71;
int[] permutationsIndexList;

void setup() {
  size(500, 500);
  smooth();
  int i,j;
  
  // init zeichen
  int count=0;
  z = new Zeichen[cols][rows];
  for (i = 0; i < cols; i ++ ) {
    for (j = 0; j < rows; j ++ ) {
      z[i][j] = new Zeichen(i*shift,j*shift,shift,shift,i + j);
      count++;
    }
  }
}

void draw() {
  if(!stopAnimation) {
    background(255);
    for (int i = 0; i < cols; i ++ ) {     
      for (int j = 0; j < rows; j ++ ) {      
        z[i][j].render();
      }
    }
  }
}


void keyPressed()
{
  switch(key) {
    case 'p':
      save("permutation.jpg");
      break;
      
    case 's':
     stopAnimation = !stopAnimation;
     break;
     
  }
}

Klasse Zeichen:

class Zeichen {

  float _x;
  float _y;   
  float _w;
  float _h;
  String _name;
  float _angle;
  float _scale;
  int _type;
  
  // constructor
  Zeichen(float x, float y, float w, float h, int n) {
    _x = x;
    _y = y;
    _w = w;
    _h = h;
    _name = Integer.toString(n);
  }
   
  void render() {
    pushMatrix();
      translate(_x+_w/2,_y+_h/2);
      _angle = atan2(mouseY-_y-_h/2, mouseX-_x-_w/2);
      println(_angle);
      scale(2.8);
      rotate(_angle);
      drawZeichen();
    popMatrix();
  }
  
  void drawZeichen()
  {
    pushStyle();

      fill(0);
      noStroke();
      ellipse(0,0,24,24);
      
      fill(255);
      noStroke();
      ellipse(0,2.5* cos(2*_angle),20,20);
      
      fill(0);
      noStroke();
      ellipse(-3*cos(2*_angle),3* sin(2*_angle),13,13);
      
      fill(0);
      noStroke();
      ellipse(3* cos(2*_angle),3* sin(2*_angle),13,13);
      
      fill(255);
      noStroke();
      ellipse(-3* sin(2*_angle),0,10,10);
      
      fill(255);
      noStroke();
      ellipse(3* sin(2*_angle),0,10,10);        

    popStyle();
  }  
}

demo/code