8. Dezember 2010

Ich habe mich nochmals daran gemacht und versucht die beiden Varianten 12a und 12b zu vereinen. Hierzu habe ich als erstes die Permutation ganz normal dargestellt. Anschliessend habe ich begonnen mit Hilfe eines Vektors die verschiedenen Zeichen festzulegen. Je näher die Zeichen beim Cursor sind, desto heller sind sie. Umso weiter sie entfernt liegen, desto dunkler sind sie. Als ich dies so verwirklichen konnte fügte ich noch einen Scale hinzu. Dieser bewirkt, dass die Zeichen, welche näher beim Cursor sind kleiner dargestellt werden, als diese, die weiter entfernt liegen. Zu guter letzt habe ich noch eine Rotation hinzugefügt. Diese Rotation richtet die einzelnen Zeichen auf meine Mausposition aus. Hier mein Resultat: In einem weiteren Schritt werde ich das Zeichen als Klasse hinterlegen sodass ich das Zeichen nur noch durch Parameter verändern kann.

int     anzahl = 7;
int     rand = 50;
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++)
        {
          int objType = permutationsIndexList[permutationsIndex];
          
          float objScale = 1;
          
          float objStroke = 1;
          
          PVector posObject = new PVector(x, y, 0);
          
          PVector posMouse = new PVector(map(mouseX, 0, width, 0, 6), map(mouseY, 0, height, 0, 6));
          
          PVector _mousePos = new PVector();
          _mousePos.set(mouseX,mouseY,0);
          
          
          PVector _position = new PVector(); // vector set with xy of current element
          _position.set(x*xStep,y*yStep,0);
          
          // Winkel der einzelnen Zeichen für die Rotation
          float angleMouse = atan2(_mousePos.y - _position.y, _mousePos.x - _position.x);
          
          //Distanz vom Objekt zur Maus
          float distance = posObject.dist(posMouse);
          
          // Wert für den Typ des Zeichens
          objType = (int)map(distance, 0, sqrt(72), 0, 6);
          
          // Wert für den Scale
          objScale = map(distance,0, sqrt(72), 0.5, 1.5);
          
          //Wert um die Strichstärke zu berechnen
          objStroke = map(distance,0, sqrt(72), 0, 50);
          
          drawPermutationObj(objType,objScale,objStroke,angleMouse);
          //print(str(permutationsIndexList[permutationsIndex]) + "\t");

          ++permutationsIndex;

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

}

void drawPermutationObj(int type,float objScale, float objStroke, float angleMouse)
{
  pushStyle();
  pushMatrix();
  scale(objScale);
  rotate(angleMouse);
  switch(type)
  {
case 0:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-35,0,17,17);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(20/2),0,20,20);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(25/2),0,25,25);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(10);
    noFill();
    ellipse(2,0,28,28);
    popStyle();
    popMatrix();
    
    break;

  case 1:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-33,0,19,19);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(3);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(25.5/2),0,25.5,25.5);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(32.5/2),0,32.5,32.5);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(14);
    noFill();
    ellipse(4,0,28,28);
    popStyle();
    popMatrix();
    break;

  case 2:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-30,0,23,23);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(4);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(31/2),0,31,31);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(37/2),0,37,37);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(12);
    noFill();
    ellipse(6,0,28,28);
    popStyle();
    popMatrix();
    break;

  case 3:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-29,0,25.5,25.5);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(5);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(35/2),0,35,35);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(41/2),0,41,41);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(10);
    noFill();
    ellipse(8,0,28,28);
    popStyle();
    popMatrix();
    
    break;  

  case 4:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-28,0,28,28);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(6);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(38/2),0,38,38);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(45/2),0,45,45);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(8);
    noFill();
    ellipse(10,0,28,28);
    popStyle();
    popMatrix();
    break;

  case 5:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-26,0,31,31);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(7);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(40/2),0,39,39);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(49/2),0,47,47);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(6);
    noFill();
    ellipse(12,0,28,28);
    popStyle();
    popMatrix();
    break;

  case 6:
    pushMatrix();
    pushStyle(); //Aussenlinie
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(0,0,75,75);
    popStyle();
    
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(255);
    ellipse(-24,0,34,34);
    popStyle();
    
    pushStyle(); // innere Kreislinie
    stroke(0);
    strokeWeight(8);
    noFill();
    ellipse(0,0,60,60);
    popStyle();
    
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(-30+(44/2),0,44,44);
    popStyle();
    
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(0);
    ellipse(30-(52/2),0,52,52);
    popStyle();
    
    pushStyle(); // weisse innere Kreislinie
    stroke(255);
    strokeWeight(4);
    noFill();
    ellipse(14,0,28,28);
    popStyle();
    popMatrix();
    break;

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

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