1. Dezember 2010

Wie wir schon in früheren Aufgaben gelernt haben, lässt sich mit Processing auch sehr gut zeichnen. So konnte unsere Klasse die Permutationsaufgabe, für die wir im "Jürgen-Kurs" Illustrator verwendet haben nun in Processing nachgestalten. Dies hat einige Vorteile: zwar ist es ein schwieriger, Formen mit der Tastatur zu programmieren, jedoch hat man später einen wesentlich grösseren Spielraum, wenn man das ganze manipulieren möchte. Während man im Illustrator an ein fixes Bild gebunden ist, eröffnet einem Processing viele Grenzen um zu experimentieren und ausprobieren (solange man die dafür nötigen programmiersprachlichen Brocken kennt). Die Permutation Für meine Permutation wechselte ich vom Kreis zu dem Quadrat. Dieses veränderte ich innerhalb von sieben Schritten in der Grösse. Auch geändert wurde die (wahrgenommene) Outline. Zudem wurde das Zeichen be jedem Schritt ein wenig rotiert. Leider überschrieb mir Processing jedes mal, als ich einen neuen Screenshot machen wollt, den alten. Dies merkte ich erst als ich mit dem Animieren Begann. Daher habe ich keine Bilder von der ursprünglichen Permutation. 'float' Als ich nun die Permutation stehen hatte, konnte ich mich ans Animieren machen. Ich verwendete 'float' um meine Quadrate bei jedem Frame (60fps) um 0.0001° zu drehen. Zuerst verwendete ich grössere werte doch ich merkte bald, dass es bei 60fps zu hektisch wurde. Zudem baute ich eine Taste-Funktion ein, damit ich die Rotation umkehren kann, sobald man die '1' auf der Tastatur drückt. Lässt man die Animation eine Weile laufen, so entsteht ein leichter 3D-Effect, der an eine Roulade erinnert. Positive Drehung Negative Drehung wenn '1' gedrückt Der Code

int     anzahl = 7;
int     rand = 50;
boolean changeDirection = true;
float   change;
float   xStep;
float   yStep;
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++)
        {
          if(changeDirection){
            change +=0.00001;
          } else {
            change -=0.00001;
          }
          
          drawPermutationObj(permutationsIndexList[permutationsIndex], change);
          print(str(permutationsIndexList[permutationsIndex]) + "\t");

          ++permutationsIndex;

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

}

void drawPermutationObj(int type, float c)
{
  pushStyle();
  switch(type)
  {
   case 0:
    stroke(0);
    fill(255);
    rotate(c*1);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
      pushMatrix();
        rotate(c*1);
        rect(-30, -30, 60, 60);
        fill(255);
        rect(-55/2, -55/2, 55, 55);
      popMatrix();
    break;

  case 1:
    stroke(0);
    fill(255);
    rotate(c*2);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
      pushMatrix();
        rotate(c*2);
        rect(-55/2, -55/2, 55, 55);
        fill(255);
        rect(-50/2, -50/2, 50, 50);
      popMatrix();
    break;

  case 2:
    stroke(0);
    fill(255);
    rotate(c*3);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
        pushMatrix();
        rotate(c*3);
        rect(-50/2, -50/2, 50, 50);
        fill(255);
        rect(-40/2, -40/2, 40, 40);
        popMatrix();
    break;

  case 3:
    stroke(0);
    fill(255);
    rotate(c*4);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
      pushMatrix();
      rotate(c*4);
      rect(-45/2, -45/2, 45, 45);
      fill(255);
      rect(-30/2, -30/2, 30, 30);
      popMatrix();
    break;  

  case 4:
    stroke(0);
    fill(255);
    rotate(c*5);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
      pushMatrix();
      rotate(c*5);
      rect(-40/2, -40/2, 40, 40);
      fill(255);
      rect(-20/2, -20/2, 20, 20);
      popMatrix();
    break;

  case 5:
    stroke(0);
    fill(255);
    rotate(c*6);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
      pushMatrix();
      rotate(c*6);
      rect(-35/2, -35/2, 35, 35);
      fill(255);
      rect(-5/2, -5/2, 5, 5);
      popMatrix();
    break;

  case 6:
    stroke(0);
    fill(255);
    rotate(c*7);
    //rect(-75/2, -75/2, 75, 75);
    fill(0);
    pushMatrix();
      rotate(c*7);
      rect(-30/2, -30/2, 30, 30);
      fill(255);
      rect(-1, -1, 1, 1);
      popMatrix();
    break;

  default:
    break;
  }
  popStyle();
}

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

Danke Patrick!