19. September 2012

Programming Basics, Tag 1 Am ersten Tag haben wir eine Einführung in die Entwicklungsumgebung "Processing" erhalten. Zügig wurde der grundlegende Aufbau von JAVA in Processing erklärt und wie man per Code grafische Objekte generieren kann. Mit zwei Smiley Übungen versuchte ich das gehörte um zu setzten. 1. Übung different Smiley Moods Wir haben 4 vorgefertigte Smiley Moods erhalten, die man per Tasten ansteuern konnten. Die Aufgabe war es, die restlichen Moods, wie sleepy, astound etc. zu erstellen. Hier die Screenshots: So sieht der Code aus:

int SMILEY_DEFAULT = 1;
 int SMILEY_SAD = 2;
 int SMILEY_DRUNK = 3;
 int SMILEY_ANGRY = 4;
 int SMILEY_OLD = 5;
 int SMILEY_ASTOUND = 6;
 int SMILEY_SLEEPY = 7;
 int SMILEY_HORNY = 8;
 int SMILEY_PANIC = 9;

int smileyType = SMILEY_DEFAULT;

void setup()
 {
 size(400, 400); // def. fenstergrösse

smooth(); // aktiviere antialiasing
 strokeWeight(15); //linienbreite
 }

void draw()
 {
 background(255); // hintergrundfarbe
 strokeWeight(15); //default

pushMatrix();
 translate(width *.5, width * .5);
 smiley(smileyType); //funktion aufrufen
 popMatrix();
 }

void keyPressed()
 {
 switch(key)
 {
 case '1':
 smileyType = SMILEY_DEFAULT;
 break;
 case '2':
 smileyType = SMILEY_SAD;
 break;
 case '3':
 smileyType = SMILEY_DRUNK;
 break;
 case '4':
 smileyType = SMILEY_ANGRY;
 break;
 case '5':
 smileyType = SMILEY_OLD;
 break;
 case '6':
 smileyType = SMILEY_ASTOUND;
 break;
 case '7':
 smileyType = SMILEY_SLEEPY;
 break;
 case '8':
 smileyType = SMILEY_HORNY;
 break;
 case '9':
 smileyType = SMILEY_PANIC;
 break;
 }
 }

// funktion
 void smiley(int smileyType)
 {
 // kopf
 noFill();
 ellipse(0, 0, 180, 180); // kopf

// augen
 fill(0);
 if (smileyType == SMILEY_SAD)
 {
 ellipse(0 - 30, 0 - 30, 20, 5); // linkes augen
 ellipse(0 + 30, 0 - 30, 20, 5); // rechtes augen
 }
 else if (smileyType == SMILEY_DRUNK)
 {
 line(-50, -40, -10, -10);
 line(-50, -10, -10, -40);

line(50, -40, 10, -10);
 line(50, -10, 10, -40);
 }
 else if (smileyType == SMILEY_ANGRY)
 {
 ellipse(0 - 35, 0 - 30, 40, 2); //linkes ausge
 ellipse(0 + 35, 0 - 30, 40, 2); // rechtes auge
 }

else if (smileyType == SMILEY_OLD)
 {
 ellipse(0 - 40, 10 - 40, 20, 5); //linkes auge
 ellipse(0 + 40, 10 - 40, 20, 5); // rechtes auge
 noFill();
 strokeWeight(3); //linienbreite
 ellipse(0 - 40, 10 - 40, 50, 50); //linke brille
 ellipse(0 + 40, 10 - 40, 50, 50); // rechte brille
 }

else if (smileyType == SMILEY_ASTOUND)
 {
 noFill();
 strokeWeight(10);
 ellipse(0 - 40, 10 - 40, 25, 25); //linkes auge
 ellipse(0 + 40, 10 - 40, 25, 25); //rechtes auge
 }

else if (smileyType == SMILEY_SLEEPY)
 {
 strokeWeight(5);
 ellipse(0 - 30, 0 - 30, 2, 2); //linke pupille
 ellipse(0 + 30, 0 - 30, 2, 2); //rechte pupille
 noFill();
 strokeWeight(15);
 ellipse(0 - 30, 0 - 30, 30, 30); //linkes auge
 ellipse(0 + 30, 0 - 30, 30, 30); //rechtes auge
 }

else if (smileyType == SMILEY_HORNY)
 {
 triangle(-20, -30, -18, -35, -16, -30); //linkes auge
 triangle(20, -30, 18, -35, 16, -30); //rechtes auge
 }

else if (smileyType == SMILEY_PANIC)
 {
 ellipse(0 - 30, 0 - 30, 20, 30); // linkes augen
 ellipse(0 + 30, 0 - 30, 20, 30); // rechtes augen
 }

else
 {
 ellipse(0 - 30, 0 - 30, 20, 20); // linkes augen
 ellipse(0 + 30, 0 - 30, 20, 20); // rechtes augen
 }

// mund
 noFill();
 if (smileyType == SMILEY_SAD)
 arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
 else if (smileyType == SMILEY_DRUNK)
 {
 line(-50, 20, 50, 20);
 arc(-10, 15, 50, 70, radians(20), radians(180-20)); // mund
 }
 else if (smileyType == SMILEY_ANGRY)
 {
 line(-50, 20, 50, 20); //mund
 }
 else if (smileyType == SMILEY_OLD)
 {
 strokeWeight(10);
 arc(0, 0, 100, 100, radians(20), radians(180-20)); //mund
 }

else if (smileyType == SMILEY_ASTOUND)
 {
 ellipse(0 + 30, 0 + 30, 30, 30); //mund
 }

else if (smileyType == SMILEY_SLEEPY)
 {
 line(-50, 40, 50, 40); //mund
 }

else if (smileyType == SMILEY_HORNY)
 {
 arc(-20, 20, 60, 60, radians(20), radians(270)); // mund
 arc(-65, 20, 80, 80, radians(PI), radians(TWO_PI));
 }

else if (smileyType == SMILEY_PANIC)
 {
 line(-45, 42, 45, 42); //mund
 arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
 }

else
 arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
 }

2. Übung rotating Smiley In der zweiten Aufgabe musste ein Programm erweitert werden. Die Ausgangslage war, dass sich ein rotierendes Smiley automatisch bei der Mausbewegung skaliert. Nun musste ein kleines Smiley so platziert und programmiert werden, dass sich dieses um das grosse Smiley dreht und sich zudem automatisch mit dem Mauszeiger skaliert. Ich fand es am Anfang schwierig zu verstehen wie man das kleine Smiley mit der passenden Geschwindigkeit zum drehen bringt. Mit Erklärungen von Studienkollegen habe ich es aber dann auch verstanden. Hier habe ich den Screenshot...

... und den Code:

int drehwinkel = 0;

void setup()
{
 size(400,400); // def. fenstergroesse

smooth(); // aktiviere antialiasing
 strokeWeight(15); // linienbreite
}

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

float radius = dist(mouseX,mouseY,width/2,height/2); // rechne die distanz vom mousecursor zum fensterzentrum aus
 radius = map(radius,0,width,1,2); // rechne aus in welchem bereich der radius am schluss sein sollte
 translate(200,200);
 rotate(calcAngle());
 scale(radius);
 smiley(); // funtions aufruf

 drehwinkel = drehwinkel +1; //gesch. der drehung
 rotate (radians(drehwinkel));
 translate(90,90);
 scale(.2);
 smiley(); // funktions aufruf

}

// funktion
void smiley()
{
 noFill();
 ellipse(0,0,180,180); // kopf

fill(0);
 ellipse(0 - 30,0 - 30,20,20); // linkes augen
 ellipse(0 + 30,0 - 30,20,20); // rechtes augen

noFill();
 arc(0,0,100,100,radians(20),radians(180-20)); // mund
}

// berechne den winkel zur fenstermitter vom mausecursor aus
// die winkel sind in radiant
float calcAngle()
{
 return atan2(mouseX - (width / 2),mouseY - (height / 2)); //arc tang
}