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 2: Smiley

26. Oktober 2011

Ich habe ein Smiley mit drei unterschiedliche Zuständen gezeichnet: Happy, Drunk, Crazy. Mit den Tasten 1,2,3 kann man den Zuständ auswählen. Zusätzlich verändert sich das Smiley innerhalb eines Zustandes durch die Mausbewegung. HAPPY: Die Farbe verändert sich regenbogenartig, indem die X- und Y- Position der Maus abgefragt wird. Der Smile verändert sich, je nach X Position der Maus. DRUNK: Die Position der Zunge verändert sich. Wenn man die Maus nach oben bewegt, zieht es die Zunge rein und wenn man die Maus nach unten bewegt, streckt er sie raus. CRAZY: Die Grösse der Augen hängt von der Y Position der Maus ab, die Grösse des Smile von der X Position. CODE:

static final int SMILEY_DEFAULT  = 1<<0;
static final int SMILEY_CRAZY    = 1<<1;
static final int SMILEY_DRUNK    = 1<<2;
static final int SMILEY_ANGRY    = 1<<4;

int smileyType = SMILEY_DEFAULT;

void setup()
{
  size(400, 400);      // def. fenstergroesse
  smooth();           // aktiviere antialiasing
  strokeWeight(15);    // linienbreite
}

void draw()
{
  background(255);    // def. hintergrundfarbe

  pushMatrix();
  translate(width * .5, width * .5);
  kopf(smileyType);          // funtions aufruf
  augen(smileyType);          // funtions aufruf
  mund(smileyType);          // funtions aufruf
  popMatrix();
}

void keyPressed()
{
  switch(key)
  {
  case '1': // Tastaturevent
    smileyType = SMILEY_DEFAULT;
    break;
  case '2':
    smileyType = SMILEY_DRUNK;
    break;
  case '3':
  case '9':  // So können 2 Tasten den selben case ausführen
    smileyType = SMILEY_CRAZY;
    break;
  case'4':
    smileyType = SMILEY_ANGRY;
  }
}

// funktion
void kopf (int smileyType)
{
  float ay = mouseY;
  float ax = mouseX;

  switch(smileyType)
  {
  case SMILEY_CRAZY:
  case SMILEY_ANGRY:
    stroke(0);
    fill(0, 0, 200, 50);
    ellipse(0, 0, 180, 180);
    break;

  case SMILEY_DRUNK:
    fill(200, 0, 0, 50);
    ellipse(0, 0, 200, 180);
    break;

  case SMILEY_DEFAULT:
    fill(ay, ax, ax*ay, 70); // Mit Mausbewegung verändert sich Kopffarbe
    ellipse(0, 0, 180, 180); 
    break;
  }
}

//funktion  
void augen (int smileyType)
{
  float ax = mouseX * .2;
  float ay = mouseY * .1;

  switch(smileyType)
  {
  case SMILEY_CRAZY:
    fill(0, 0, 100, 70);
    ellipse(0 - 30, 0 - 30, ay, ay);  // linkes augen, Mit Mausbewegung in Y Achse verändert sich die Augenform
    ellipse(0 + 30, 0 - 30, ay, ay);  // rechtes augen, Mit Mausbewegung in Y Achse verändert sich die Augenform
    break;

  case SMILEY_DRUNK:
    //smileyType = SMILEY_DRUNK;
    fill(200, 0, 0);
    ellipse(0 - 30, 0 - 30, 20, 35);  // linkes augen
    ellipse(0 + 30, 0 - 30, 10, 15);  // rechtes augen  
    break;

  case SMILEY_DEFAULT:
    fill(0);
    ellipse(0 - 30, 0 - 30, 20, 20);  // linkes augen
    ellipse(0 + 30, 0 - 30, 20, 20);  // rechtes augen
    break;

  case SMILEY_ANGRY:
    stroke(0);
    fill(0, 0, 100, 70);
    ellipse(0 - 30, 0 - 30, 20, 20);  // linkes augen
    ellipse(0 + 30, 0 - 30, 20, 20);  // rechtes augen
    stroke(0, 0, 200, 50);
    ellipse(0 + 30, ay, 10, 20);  //Träne mit Mausbewegung in Y Achse Verändert sich Position der Tränen
    ellipse(0 + 30, ay+30, 10, 20);  //Träne
    ellipse(0 + 30, ay+15, 10, 20);  //Träne
    break;
  }
}

//funktion
void mund(int smileyType)
{
  float mx = mouseX * .2;
  float my = mouseY * .2;
  noFill();

  switch(smileyType)
  {
  case SMILEY_CRAZY:
  case SMILEY_ANGRY:
    stroke(0);
    arc(0, 60, 100, 100, radians(180+mx), radians(360-mx)); //Mit Mausbewegung in X Achse wird CRAZY-smile grösser/kleiner
    break;

  case SMILEY_DRUNK:
    //arc(0,0,100,100,radians(ax),radians(180-ax));
    line(-50, 20, 50, 20);
    fill(255, 0, 0, 80);
    arc(-10, 20, 50, my, radians(20), radians(180-20)); //Mit Mausbewegung in Y Achse bewegt sich zunge
    break;

  case SMILEY_DEFAULT:
    stroke(0); 
    arc(0, 0, 100, 100, radians(mx), radians(180-mx)); //Mit Mausbewegung in X Achse wird smile grösser/kleiner
    break;
  }
}