2. Dezember 2010

This is an interactive version of my previous post (here) which shows a permutation of a given symbol. But this time, by moving the mouse in the horizontal as well as the vertical axis, you can rotate respectively scale the permutations. Also, by using the keys 1-6, you can choose between 6 different symmetry patterns. With a left-click, you can rotate some inner-circles (the circles in the main boundry circle). By right-clicking, you can set the inner-circles back to their initial position. Here some screenshots taken: And here the code:

int     anzahl = 7;
int     rand = 125;
float   xStep;
float   yStep;
float mX, mY, joker, param2;
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
};
int version;
Symbol symbol;

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

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

  mX = 1;
  mY = 1;
  joker = 0;
  symbol = new Symbol();  //initializr my symbol
  version=1;

  //noLoop();
  
}

void draw()
{
  background(255);
  noStroke();

  int permutationsIndex = 0;

  pushMatrix();
  translate(rand,rand);
  for(int y=0; y<anzahl; y++)
  {
    pushMatrix();
    for(int x=0; x<anzahl;x++)
    {
       //symmetry presets..perhaps nicer with a switch method
      if(version==1)
        param2 = mX*2*(x+y+1)*PI/(anzahl*1.0);
      else if(version==2)
        param2 = mX*2*(x+1)*PI/(anzahl*1.0);
      else if(version==3)
        param2 = mX*2*(y+1)*PI/(anzahl*1.0);
      else if(version==4)
        param2 = mX*2*(-x-y+1)*PI/(anzahl*1.0);
      else if(version==5)
        param2 = mX*2*(-x+1)*PI/(anzahl*1.0);
      else
        param2 = mX*2*(-y+1)*PI/(anzahl*1.0);
       
      //symbol is now a class and drawn via the method
      symbol.drawPermutationObj(permutationsIndexList[permutationsIndex], 75, param2, mY, joker);
      //print(str(permutationsIndexList[permutationsIndex]) + "\t");
      ++permutationsIndex;

      translate(xStep,0.0f);
    }
    println();
    popMatrix();
    translate(0.0f,yStep);
  }
  popMatrix();
  fill(0);
  text("key 1-6: symmetry presets | x-mouse: main rotation | y-mouse: scale | left click: inner-circle rotation | right click: reset inner-rotation",10, height-15, 700, 100);
}


void mouseMoved() {
  //mouse mapping
  mX = map(mouseX, 0, width, 1.0, 5.0);
  mY = map(mouseY, 0, height, 2.0, 0.25);
}
void mousePressed() {
  joker+=PI/4.0; //increment the parameter by PI/4 -->rotation
  if( mouseButton == RIGHT)  //reset
    joker = 0;
}

void keyPressed()
{
  switch(key)
  {
  case '1':
    version = 1;
    break;
  case '2':
    version = 2;
    break;
  case '3':
    version = 3;
    break;
  case '4':
    version = 4;
    break;
  case '5':
    version = 5;
    break;
  case '6':
    version = 6;
    break;
  }
}

class Symbol {
  //parameter: [switch type, diameter, all-rotation, inner-circles scale, inner-circles rotation]
  void drawPermutationObj(int type, float d, float angle, float growY, float joker)
   {
    float r = d/2;  //radius
    pushStyle();
    switch(type)
    {
    case 0:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
     //calculate the radius at each angle using cosinus & sinus and draw my beautiful circles..
      ellipse(((r-37.5*growY) * cos(angle-PI)), ((r-37.5*growY) * sin(angle-PI)),75/growY, 75/growY);
      fill(0);
      ellipse(((r-5*growY) * cos(angle+joker)), ((r-5*growY) * sin(angle+joker)), 10/growY, 10/growY);    
      ellipse(((r-5*growY) * cos(angle-PI)), ((r-5*growY) * sin(angle-PI)), 10/growY, 10/growY);
      fill(255);
      ellipse(((r-7*growY) * cos(angle-PI)), ((r-7*growY) * sin(angle-PI)), 6/growY, 6/growY);
      break;

    case 1:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-10*growY) * cos(angle+joker)), ((r-10*growY) * sin(angle+joker)),20/growY, 20/growY);
      ellipse(((r-35*growY) * cos(angle-PI)), ((r-35*growY) * sin(angle-PI)),70/growY, 70/growY);

      fill(0);
      ellipse(((r-10*growY) * cos(angle-PI)), ((r-10*growY) * sin(angle-PI)), 20/growY, 20/growY);    
      ellipse(((r-8*growY) * cos(angle+joker)), ((r-8*growY) * sin(angle+joker)), 16/growY, 16/growY);
      fill(255);
      ellipse(((r-14*growY) * cos(angle-PI)), ((r-14*growY) * sin(angle-PI)),14/growY,14/growY);    
      break;

    case 2:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-15*growY) * cos(angle+joker)), ((r-15*growY) * sin(angle+joker)), 30/growY, 30/growY);
      ellipse(((r-30*growY) * cos(angle-PI)), ((r-30*growY) * sin(angle-PI)),60/growY, 60/growY);
      fill(0);
      ellipse(((r-15*growY) * cos(angle-PI)), ((r-15*growY) * sin(angle-PI)),30/growY, 30/growY);
      ellipse(((r-12*growY) * cos(angle+joker)), ((r-12*growY) * sin(angle+joker)),24,24); 
      fill(255);
      ellipse(((r-20*growY) * cos(angle-PI)), ((r-20*growY) * sin(angle-PI)),20/growY, 20/growY);    
      break;

    case 3:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-20*growY) * cos(angle+joker)), ((r-20*growY) * sin(angle+joker)), 40/growY, 40/growY);
      ellipse(((r-25*growY) * cos(angle-PI)), ((r-25*growY) * sin(angle-PI)), 50/growY, 50/growY);
      fill(0);
      ellipse(((r-20*growY) * cos(angle-PI)), ((r-20*growY) * sin(angle-PI)), 40/growY, 40/growY);
      ellipse(((r-17*growY) * cos(angle+joker)), ((r-17*growY) * sin(angle+joker)), 34/growY, 34/growY);
      fill(255);
      ellipse(((r-30*growY) * cos(angle-PI)), ((r-30*growY) * sin(angle-PI)), 30/growY, 30/growY);    
      break;  

    case 4:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-25*growY) * cos(angle+joker)), ((r-25*growY) * sin(angle+joker)), 50/growY, 50/growY);
      ellipse(((r-20*growY) * cos(angle-PI)), ((r-20*growY) * sin(angle-PI)), 40/growY, 40/growY);
      fill(0);
      ellipse(((r-25*growY) * cos(angle-PI)), ((r-25*growY) * sin(angle-PI)), 50/growY, 50/growY);
      ellipse(((r-21*growY) * cos(angle+joker)), ((r-21*growY) * sin(angle+joker)), 42/growY, 42/growY);
      fill(255);
      ellipse(((r-38*growY) * cos(angle-PI)), ((r-38*growY) * sin(angle-PI)), 38/growY, 38/growY);   
      break;

    case 5:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-30*growY) * cos(angle+joker)), ((r-30*growY) * sin(angle+joker)), 60/growY, 60/growY);
      ellipse(((r-15*growY) * cos(angle-PI)), ((r-15*growY) * sin(angle-PI)), 30/growY, 30/growY);
      fill(0);
      ellipse(((r-30*growY) * cos(angle-PI)), ((r-30*growY) * sin(angle-PI)), 60/growY, 60/growY);
      ellipse(((r-20*growY) * cos(angle+joker)), ((r-20*growY) * sin(angle+joker)), 40/growY, 40/growY);
      fill(255);    
      ellipse(((r-48*growY) * cos(angle-PI)), ((r-48*growY) * sin(angle-PI)), 48/growY, 48/growY);
      break;

    case 6:
      fill(0);
      ellipse(0,0,d,d);
      fill(255);
      ellipse(((r-35*growY) * cos(angle+joker)), ((r-35*growY) * sin(angle+joker)), 70/growY, 70/growY);
      ellipse(((r-10*growY) * cos(angle-PI)), ((r-10*growY) * sin(angle-PI)), 20/growY, 20/growY);
      fill(0);
      ellipse(((r-35*growY) * cos(angle-PI)), ((r-35*growY) * sin(angle-PI)), 70/growY, 70/growY);
      ellipse(((r-19*growY) * cos(angle+joker)), ((r-19*growY) * sin(angle+joker)), 38/growY, 38/growY);
      fill(255);    
      ellipse(((r-56*growY) * cos(angle-PI)), ((r-56*growY) * sin(angle-PI)), 56/growY, 56/growY);    
      break;

    default:
      break;
    }
    popStyle();
  }
}