Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

Lektion 13: VJ Tool

22. Dezember 2010

Die letzte Aufgabe war es ein VJ Tool zu erstellen. Ausgangslage war unsere Permutation. Nun konnte ich also mein gesamtes Wissen, welches ich mir in den letzten paar Wochen aneignete anwenden. Was dabei rauskam seht ihr hier : Hier ein Aussschnitt. Die Permutation richtet sich nach der Mausposition aus. Ich baute zuerst die Permutation, anschliessend versuchte ich ein paar Funktionen einzubauen, leider nicht immer mit Erfolg. Schritt für Schritt erarbeitete ich die nun folgenden Screenshots. Je nach Mausposition verändert sich die Permutation. Sie ist also Mausabhängig. Durch Benutzung der Maus werden die verschiedenen Parameter der einzelnen Zeichen verändert und es werden neue Zeichen generiert. Dieser Screenshot zeigt wie der Vorangegangene, wie sich die Zeichen nach der Maus ausrichten. Durch drücken der Taste „1“ wird die Permutation in einen neuen Modus geschaltet. Nun richten sich die Zeichen nicht mehr nach der Mausposition aus, sondern drehen sich in Abhängigkeit zur Maus. Dies bedeutet, je weiter ein Zeichen von der Maus entfernt liegt, desto einen grösseren Drehwinkel hat das Zeichen. So entsteht eine Art Wobbeln. Ich habe mir eine „Invert“ Funktion eingebaut. sodass ich die ganze Permutation invertieren kann. Ansonsten wird der Modus der vorangegangenen Beispiele verwendet. CODE


int     anzahl = 15;
int     rand = 50;
int     zeichenfarbe1;
int     zeichenfarbe2;

float   xStep;
float   yStep;
float   verschiebungswertx;
float   verschiebungswerty;
float   rotationswert;
float   maxdistance = sqrt(sq(1000)+sq(900));
float   objScale = 1;
float   rotationswertglobal;
float   wert;
float   mausrot;

//TASTENBELEGUNG
boolean keyone = false;
boolean key2 = false;
boolean keya = false;
boolean keyq = false;
boolean key3 = false;
boolean keyblackscreen = false;
boolean keyw = false;

// EFFEKTE

boolean keyeon = false;
boolean keyeoff = false;
boolean keyrotate = false;
boolean keyzoom = false;
boolean keystopp = false;

// PERMUTATIONSANORDNUNGEN


void setup()
{
  size(1000, 900);
  smooth();

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

void draw()
{
  if (key2)
  {
    background(0);
  }
  else
  {
  background(255);
  }
  
  int     permutationsIndex = 0;
  int     zaehler = 0;
  
  pushMatrix();
    translate(rand,rand);
    for(int y=0; y<anzahl;y++)
    {
      pushMatrix();
        for(int x=0; x<anzahl;x++)
        {
          
          // ZÄHLER
          zaehler ++;
          //float objScale = 1;

          float objStroke = 1;

          PVector posObject = new PVector(x, y, 0);

          PVector posMouse = new PVector(map(mouseX, 0, width, 0, anzahl), map(mouseY, 0, height, 0, anzahl));

          PVector _mousePos = new PVector();
          _mousePos.set(mouseX,mouseY,0);

          PVector _position = new PVector(); // vector set with xy of current element
          _position.set(x*xStep+rand,y*yStep+rand,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);
          
          float _distance = _position.dist(_mousePos);
          
          // MAUSWERT FÜR DIE ROTATION
          mausrot = map(distance,0, 500, 0, 360);
          
          // Funktion der Tastenbelegung e
          if(keyeon){
          objScale+= wert;
          
          }
         
          else if(keyeoff){
            objScale-=wert;

          }
          
          else if (keystopp){
           
          // Wert für den Scale
          objScale = map(distance,0, sqrt(72), 0.5, 1.0);
          
          }
        
          //println(objScale);
          //println(wert);
          // Basseffekt erzeugen

            if (objScale < 0.2){
            
             keyeon = true;
             keyeoff = false;
             
            } else if (objScale > 1.0){
            
             keyeon = false;
             keyeoff = true;
            }
           
           
    
          
          //------------Funktion Tastenbelegung e ENDE-------------
          
          
          //------------Funktion Tastenbelegung r START-------------
          
          if(keyrotate)
          {
            rotationswertglobal += 0.1;
          }
          else
          {
            rotationswertglobal = 0;
          }
          //------------Funktion Tastenbelegung r START-------------
          
          //------------Funktion Tastenbelegung w START-------------
          
          if(keyw)
          {
            if(distance >= sqrt(60))
            {
              distance = sqrt(60);
            }
            objScale = map(distance,0, 12, 1.8, 0.5);
          }
          else
          {
            
          }
          //------------Funktion Tastenbelegung r START-------------

          
           //FUNKTIONSAUFRUF
           
           if (zaehler%2 == 0 && key3) // gerade Zeichen werden gezeichnet
           {
            drawPermutationObj2(_distance,objScale,rotationswertglobal,objStroke,angleMouse,mausrot);
           }
            if (key3 == false)
           {
             drawPermutationObj2(_distance,objScale,rotationswertglobal,objStroke,angleMouse,mausrot);
           }
           
           if (keyblackscreen)
           {
             background(0);
           }

           
          //print(str(permutationsIndexList[permutationsIndex]) + "\t");

          ++permutationsIndex;

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

}


void keyPressed()
{
  
if (key == CODED) {
    if (keyCode == UP) {
      wert += 0.0001;
    } else if (keyCode == DOWN) {
      wert -= 0.0001;
    } 
  } else {
    wert += 0;
  }

    
  switch(key)
  {
  case ' ':
    save("permutation.jpg");
    break;
        
   //TASTE 1   
   case '1':
    if (keyone){
      keyone = false;

    }
    else {
    keyone = true;
    key3 = false;
    keyblackscreen = false;
    }    
     break;
     
   //TASTE 2  
   case '2':
    if (key2){
      key2 = false;

    }
    else {
    key2 = true;
    key3 = false;
    keyone = false;
    keyblackscreen = false;
    
    }    
     break;

   //TASTE 3  
   case '3':
    if (key3){
      key3 = false;    
    }
    else {
    key3 = true;
    keyblackscreen = false;
    }    
     break; 

   //TASTE 4  
   case '4':
    if (keyblackscreen){
      keyblackscreen = false;
      key3 = false;    
    }
    else {
    keyblackscreen = true;
    }    
     break; 
  
     //TASTE q  
   case 'q':
    if (keyq){
      keyq = false;
    
    }
    else {
    keyq = true;
   
    }    
     break;
  
     //TASTE w  
   case 'w':
    if (keyw){
      keyw = false;
      objScale =1;
    
    }
    else {
    keyw = true;   
    }    
     break; 
     
   case 'a':
    if (keya){
      keya = false;
      //objScale =1;
    
    }
    else {
    keya = true;   
    }    
     break; 
     
    
    //BUMPING EFFECT 
    case 'e':
    if (keyeon){
      keyeon = false;
      keyeoff = true;
    
    }
    else {
    keyeon = true;
    keyeoff = false;   
    }    
     break;
    
    // STOPP 
    case 's':
      objScale = 1;
      
      if(keystopp){
        keystopp = false;
        keyeon = false;
        keyeoff = false;
        wert = 0;
      }
      else{
        keystopp = true;
      }
      
     
     break;
     
        // ROTATE 
    case 'r':
 if (keyrotate){
      keyrotate = false;
    
    }
    else {
    keyrotate = true;
   
    }    
     break;
     
  }
  
}


ZEICHEN CODE

void drawPermutationObj2(float distance,float objScale,float rotationswert, float objStroke, float angleMouse,float mausrot)

{
  if(keya)
    
    {
     rotationswert = radians(mouseX);
    }
  
  pushMatrix();
  objScale = objScale*(6.0/anzahl);
  scale(objScale);
  
  if(keyone)
  {
    rotate(mausrot);
  }

  else
  {
    rotate(angleMouse);
  }
  
  /*if(keya)
    
    {
     rotationswert = radians(mouseX);
     
     rotate(rotationswert);
    }
    else
    {
      rotate(0);
    }*/
        
    if(keyq)
    
    {
     rotationswert = 0;//radians(mouseX);
     
          if (mousePressed)
          {
            verschiebungswertx += 0.08;
            
          }
          else
          {
           verschiebungswertx = mouseX*0.05;
          }
     verschiebungswerty = mouseY*0.05;
     rotate(rotationswert);
    }
    else
    {
      rotate(0);
    }
    
    
      if(keyw)
    
    {
     scale(objScale);
     rotationswert = 0;//radians(mouseX);
     rotate(rotationswert);
     //println("rotationswert" + rotationswert);
    }
    else
    {
      rotate(0);
    }
    
    // INVERTIEREN
    
    if(key2)
    {
      zeichenfarbe1 = 255;
      zeichenfarbe2 = 0;
    }
    else
    {
      zeichenfarbe1 = 0;
      zeichenfarbe2 = 255;
    }
  
    //AUSSENLINIE
    pushStyle(); //Aussenlinie
    stroke(zeichenfarbe1);
    strokeWeight(2+(verschiebungswertx));
    noFill();
    ellipse(0+verschiebungswertx,0,75,75);
    popStyle();
    
    // UNTERBRUCH WEISS
    pushStyle(); // Weisser Unterbruch in Aussenlinie
    noStroke();
    fill(zeichenfarbe2);
    ellipse(map(distance,0,maxdistance,-35,-24),0,map(distance,0,maxdistance,17,34),map(distance,0,maxdistance,17,34));
    //ellipse(-35,0,17,17);
    //ellipse(-24,0,34,34);
    popStyle();
    
    //INNERE KREISLINIE
    pushStyle(); // innere Kreislinie
    stroke(zeichenfarbe1);
    strokeWeight(map(distance,0,maxdistance,2,8)+(verschiebungswertx/2));
    //strokeWeight(2);
    //strokeWeight(8);
    noFill();
    ellipse(0,0,60,60);
    //ellipse(0,0,60,60);
    popStyle();
    
    //LINKER KREIS
    pushStyle(); // linker schwarzer Kreis
    noStroke();
    fill(zeichenfarbe1);
    ellipse(map(distance,0,maxdistance,-30+(20/2),-30+(44/2))-verschiebungswerty,0,map(distance,0,maxdistance,20,44),map(distance,0,maxdistance,20,44));
    //ellipse(-30+(20/2),0,20,20);
    //ellipse(-30+(44/2),0,44,44);
    popStyle();
    
    //RECHTER SCHWARZER KREIS
    pushStyle(); // rechter schwarzer Kreis
    noStroke();
    fill(zeichenfarbe1);
    ellipse(map(distance,0,maxdistance,30-(25/2),30-(52/2))+verschiebungswerty,0,map(distance,0,maxdistance,25,52),map(distance,0,maxdistance,25,52));
    //ellipse(30-(25/2),0,25,25);
    //ellipse(30-(52/2),0,52,52);
    popStyle();
    
    //WEISSE KREISLINIE
    pushStyle(); // weisse innere Kreislinie
    stroke(zeichenfarbe2);
    strokeWeight(map(distance,0,maxdistance,10,4));
    //strokeWeight(10);
    //strokeWeight(4);
    noFill();
    ellipse(map(distance,0,maxdistance,2,14),0,28+(verschiebungswertx),28+(verschiebungswertx));
    //ellipse(2,0,28,28);
    //ellipse(14,0,28,28);
    popStyle();
   
   popMatrix();
    
 
}