19. September 2012
Design Diary Anhand von zwei Smiley-Übungen haben wir heute die Grundlagen erlernt, wie man durch programmieren einfache Bilder zeichnen kann. Dazu haben wir die Umgebung von "Processing" mit der Programmiersprache Java verwendet. Aufgabe 1 Die erste Aufgabe war, verschiedene Launen/Gesichtsausdrücke mit einem Smiley darzustellen. Dabei werden die einzelnen Bilder mit den Tasten 1-9 angesteuert. Der Programmiercode dazu sieht folgendermassen 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. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
// teste welche Taste gedrückt ist
if (key == '2')
smileyType = SMILEY_SAD;
if (key == '1')
smileyType = SMILEY_DEFAULT;
if (key == '4')
smileyType = SMILEY_ANGRY;
if (key == '6')
smileyType = SMILEY_ASTOUND;
if (key == '3')
smileyType = SMILEY_DRUNK;
if (key == '5')
smileyType = SMILEY_OLD;
if (key == '7')
smileyType = SMILEY_SLEEPY;
if (key == '8')
smileyType = SMILEY_HORNY;
if (key == '9')
smileyType = SMILEY_PANIC;
pushMatrix();
translate(width * .5, width * .5);
smiley(smileyType); // funtions aufruf
popMatrix();
}
// funktion
void smiley(int smileyType)
{
noFill();
ellipse(0, 0, 180, 180); // kopf
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_ANGRY)
{
ellipse(0 - 30, 0 - 30, 30, 3); // linkes augen
ellipse(0 + 30, 0 - 30, 30, 3); // rechtes augen
line(-40, -55, -10, -45); // Augenbraue
line(10, -45, 45, -55); // Augenbraue
}
else if (smileyType == SMILEY_HORNY)
{
ellipse(0 - 30, -25, 35, 3); // linkes augen
ellipse(0 + 30, -25, 35, 3); // rechtes augen
noFill();
arc(-50, -100, 40, 100, radians(90), radians(180)); //Horn links
arc(50, -100, 40, 100, radians(1), radians(90)); //Horn rechts
}
else if (smileyType == SMILEY_DRUNK)
{
line(-40, -40, 40, -10); // gekreuzte augen
line(-40, -10, 40, -40);
}
else if (smileyType == SMILEY_ASTOUND)
{
ellipse(0 - 30, 0 - 30, 15, 10); // linkes augen
ellipse(0 + 30, 0 - 30, 15, 10); // rechtes augen
pushStyle();
noFill();
strokeWeight(5);
arc(-30, -55, 20, 20, radians(180+20), radians(360-20)); // augenbraue links
arc(30, -50, 20, 20, radians(180+20), radians(360-20)); // augenbraue rechts
popStyle();
}
else if (smileyType == SMILEY_OLD)
{
pushStyle();
strokeWeight(5);
line(-30, -60, 30, -60);
line(-30, -40, 30, -40);
noFill();
arc(-30, 0, 40, 20, radians(0), radians(180)); // augengrube links
arc(30, 0, 40, 20, radians(0), radians(180)); // augengrube rechts
popStyle();
ellipse(0 - 30, 0 - 20, 20, 5); // linkes augen
ellipse(0 + 30, 0 - 20, 20, 5); // rechtes augen
}
else if (smileyType == SMILEY_SLEEPY)
{
ellipse(0 - 30, 0 - 30, 5, 5); // linkes augen
ellipse(0 + 30, 0 - 30, 5, 5); // rechtes augen
line(-50, -35, 50, -35);
}
else if (smileyType == SMILEY_PANIC)
{
ellipse(0 - 30, 0 - 30, 50, 50); // linkes augen
ellipse(0 + 30, 0 - 30, 50, 50); // rechtes augen
fill(255);
ellipse(5 - 30, 0 - 30, 30, 30); // linkes augen
ellipse(-5 + 30, 0 - 30, 30, 30); // rechtes augen
}
else
{
ellipse(0 - 30, 0 - 30, 20, 20); // linkes augen
ellipse(0 + 30, 0 - 30, 20, 20); // rechtes augen
}
noFill();
if (smileyType == SMILEY_SAD)
arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
else if (smileyType == SMILEY_ANGRY)
line(50, 20, 20, 50);
else if (smileyType == SMILEY_HORNY)
line(50, 20, 20, 50);
else if (smileyType == SMILEY_DRUNK)
arc(0, 60, 50, 40, radians(180), radians(360)); //Mund angry
else if (smileyType == SMILEY_ASTOUND)
ellipse(0 - 20, 0 + 30, 25, 25); // mund erstaunt
else if (smileyType == SMILEY_OLD)
arc(0, 0, 100, 100, radians(70), radians(180-70)); // mund
else if (smileyType == SMILEY_SLEEPY)
arc(0, 0, 100, 100, radians(70), radians(180-70)); // mund
else if (smileyType == SMILEY_PANIC)
{ fill(0);
arc(0, 60, 100, 100, radians(180+20), radians(360-20));
} // mund
else
arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
noFill();
}
Und so sehen die Gesichter aus:
Aufgabe 2
Bei Aufgabe zwei musste ein Programm (ein Smiley rotiert und skaliert sich automatisch bei Mausbewegung) so erweitert werden, dass ein kleiner Smiley um den bereits bestehenden grossen Smiley herumkreist und gleichzeitig auch dem Mauszeiger folgt. Gelöst wurde die Aufgabenstellung, indem das Zentrum, um das der kleine Smiley herumkreist, auf den gleichen Punkt gesetzt wurde wie das Zentrum des grossen Smiley. Zudem musste eine Variable definiert werden, die jedes Mal grösser wird, damit sich das Objekt "bewegt" (--> eigentlich rotiert es nur, aber es sieht aus als würde sich der kleine Smiley in einer Umlaufbahn befinden).
Hier der Quellcode dazu:
void setup()
{
size(400,400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
float rot = 9;
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,4); // rechne aus in welchem bereich der radius am schluss sein sollte
pushMatrix();
translate(200,200);
rotate(calcAngle());
scale(radius);
smiley(); // funtions aufruf
//popMatrix();
// pushMatrix();
rotate(rot);
rot = rot +0.01;
translate(90,90);
scale(.2);
smiley(); // funtions aufruf
popMatrix();
}
// 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));
}
Screenshot dieser Aufgabe:
- Screenshot Aufgabe 2
