2. Dezember 2010

Als Grundlage für die neue Aufgabe, habe ich meine ursprüngliche Permutation benutzt und weiterentwicklet. Als erstes habe ich versucht die Permutation zu animieren, indem ich die einzelnen Zeichen automatisch um die eigene Achse drehen liess. Erster Versuch: fehlgeschlagen. 2. Versuch: die Zeichen drehen zu lassen, indem man mit der Maus darüber fährt. Geglückt! Gut, nächster Schritt. Die Zeichen sollten sich vergrössern bzw. verkleinern, wenn man ebenfalls mit der Maus darüber fährt. Ja, funktioniert gleichfalls. Und nun der letzte Teil: Drehung und Skalierung in einem, plus: Skalierung abhängig machen von der Mausposition. Das heisst: je weiter weg das Zeichen von Maus-Cursor ist, desto grösser ist es. Also falls sich der Cursor in der Mitte der Zeichnung befindet, sind die Zeichen am Rand am grössten, ist der Cursor oben links in der Ecke, ist das Zeichen diagonal in der rechten unteren Ecke am grössten. Und tadaa, schon hat man seine Permutation animiert. 🙂

 


int     anzahl = 7;
int     rand = 50;
float   xStep;
float   yStep;
float   drehen; 
float   zoom;
int[]   permutationsIndexList = {0, 1, 2, 3, 4, 5, 6,
                                 1, 2, 3, 4, 5, 6, 5,
                                 2, 3, 4, 5, 6, 5, 4,
                                 3, 4, 5, 6, 5, 4, 3,
                                 4, 5, 6, 5, 4, 3, 2,
                                 5, 6, 5, 4, 3, 2, 1,
                                 6, 5, 4, 3, 2, 1, 0};

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

  xStep = (width - 2 * rand) / (float)(anzahl-1);
  yStep = (height - 2 * rand) / (float)(anzahl-1);
  //noLoop();
}

void draw()
{
  background(255);

  int     permutationsIndex = 0;

  pushMatrix();
    translate(rand,rand);
    for(int y=0; y<anzahl;y++)
    {
      pushMatrix();
        for(int x=0; x<anzahl;x++)
        {
          drawPermutationObj(permutationsIndexList[permutationsIndex], x, y);
          print(str(permutationsIndexList[permutationsIndex]) + "\t");

          ++permutationsIndex;

          translate(xStep,0.0f);
        }
        println();
      popMatrix();
      translate(0.0f,yStep);
    }
  popMatrix();

}

void drawPermutationObj(int type, int x, int y)
{
  pushMatrix();
  drehen = map(mouseX+mouseY, 0, width+height, 0, TWO_PI*2); 
  //zoom = map(mouseX+mouseY, 0, width+height, 0, 1.1); 
  
  PVector PosObject = new PVector(x, y, 0); 
  PVector PosMouse = new PVector(map(mouseX, 0, width, 0, 6), map(mouseY, 0, height, 0, 6)); 
  
  float distance = PosObject.dist(PosMouse);
  
  float zoom = map(distance, 0, sqrt(72), 0, 1.5); 
  
  
  pushStyle();
  switch(type)
  {
  case 0:
    rotate(drehen);  
    scale(zoom);
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255); 
    ellipse(0,0,72,72);
    fill(0); 
    ellipse(-3,0,65,65); 
    fill(255); 
    ellipse(-14,0,40,40);
    fill(0); 
    ellipse(-17,0,32,32);
    fill(255); 
    stroke(255);
    ellipse(-11,0,20,20);
    break;

  case 1:
    rotate(drehen);  
    scale(zoom);
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255);
    ellipse(2,0,69,69);
    fill(0); 
    ellipse(-5,0,58,58); 
    fill(255); 
    ellipse(-11,0,45,45);
    fill(0); 
    ellipse(-13,0,38,38);
    fill(255); 
    stroke(255);
    ellipse(-5,0,26,26);
    break;

  case 2:
    rotate(drehen);  
    scale(zoom);
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255);
    ellipse(4,0,65,65);
    fill(0); 
    ellipse(-5,0,56,56); 
    fill(255); 
    ellipse(-8,0,50,50);
    fill(0); 
    ellipse(-11,0,41,41);
    fill(255); 
    stroke(255);
    ellipse(-4,0,30,30);
    break;

  case 3:
    rotate(drehen); 
    scale(zoom); 
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255);
    ellipse(5,0,62,62);
    fill(0); 
    ellipse(-4,0,56,56); 
    fill(255); 
    ellipse(-6,0,55,55);
    fill(0); 
    ellipse(-9,0,46,46);
    fill(255); 
    stroke(255);
    ellipse(-3,0,38,38);
    break;  

  case 4:
    rotate(drehen);
    scale(zoom);  
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255);
    ellipse(5,0,62,62);
    fill(255); 
    stroke(255);
    ellipse(-4,0,57,57);
    fill(0); 
    ellipse(-7,0,52,52);
    fill(255); 
    stroke(255);
    ellipse(-2,0,43,43);
    break;

  case 5:
    rotate(drehen); 
    scale(zoom); 
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255);
    ellipse(5,0,62,62);
    fill(255); 
    stroke(255);
    ellipse(-4,0,61,61);
    fill(0); 
    ellipse(-6,0,58,58);
    fill(255); 
    stroke(255);
    ellipse(-1,0,51,51);
    break;

  case 6:
    rotate(drehen); 
    scale(zoom); 
    stroke(0);
    fill(0);
    ellipse(0,0,75,75);
    fill(255); 
    stroke(255);
    ellipse(0,0,66,66);
    fill(0); 
    ellipse(-4,0,60,60);
    fill(255); 
    stroke(255);
    ellipse(0,0,58,58);
    break;

  default:
    break;
  }
  popStyle();
  popMatrix();
}

void keyPressed()
{
  switch(key)
  {
  case ' ':
    save("permutation.jpg");
    break; 
  }
}