21. September 2012
Die Einführung in Java hat mit einem zügigen Tempo angefangen wirkt aber sehr logisch, gut aufgebaut und sehr gut rübergebracht. Es wurden grundlegende Konzepte und Begriffe geklärt. Am Nachmittag konnte man das gehörte und gelernte dann selbst umsetzten. Hier zeigte sich, dass nicht von heute auf morgen programmiert werden kann. Ich werde sicher noch ein paar Stunden investieren müssen um eine gewisse Sicherheit zu bekommen. Es war zwar der erste Tag aber er hat gezeigt in welche Richtung der Kurs weiterzieht. Für mich muss ein umdenken kommen, dass alles Schritt für Schritt geschieht und vom PC so gelesen wird, also ein algorithmisches Denken. Wenn dies einmal gelernt ist, wird sich der Code einfacher und schneller lesen lassen und Probleme und Aufgaben können schneller gelöst werden. Auch dies geschieht sicher nicht von heute auf morgen. Übung macht den Meister. Am Nachmittag haben wir eine Übung mit Smileys gemacht. Folgendes ist dabei herausgekommen:
Code:
</div>
<div>
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
pushMatrix();
translate(width * .5, width * .5);
smiley(smileyType); // funtions aufruf
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 auge
ellipse(0 + 30, 0 - 30, 20, 5); // rechtes auge
}
else if (smileyType == SMILEY_DRUNK)
{
line(-50, -40, -10, -10); // linkes auge
line(-50, -10, -10, -40); // linkes auge
line(50, -40, 10, -10); // rechtes auge
line(50, -10, 10, -40); // rechtes auge
}
else if (smileyType == SMILEY_ANGRY)
{
line(-50, -30, -10, -10); // linkes auge
line(50, -30, 10, -10); // rechtes auge
}
else if (smileyType == SMILEY_OLD)
{
pushStyle(); //style für brille
strokeWeight(2); // dicke brille
noFill();
ellipse(0 - 30, 0 - 30, 50, 50); // linke brille
ellipse(0 + 30, 0 - 30, 50, 50); // rechte brille
line(-90,-30,-55,-30); //gestell links
line(90,-30,55,-30); //gestell rechts
line(-5,-30,+5,-30); //gestell mitte
popStyle();
}
else if (smileyType == SMILEY_ASTOUND)
{
noFill();
ellipse(-30, -30, 40, 40); // linkes auge
ellipse(+30, -30, 40, 40); // rechtes auge
}
else if (smileyType == SMILEY_SLEEPY)
{
noFill();
arc(-30, -30, 30, 30, radians(20), radians(180-20)); // linkes augen
arc(+30, -30, 30, 30, radians(20), radians(180-20)); // rechtes auge
}
else if (smileyType == SMILEY_HORNY)
{
noFill();
arc(-30, -15, 30, 30, radians(180+20), radians(360-20)); // linkes augen
ellipse(+30, -30, 40, 40); // rechtes aug
}
else if (smileyType == SMILEY_PANIC)
{
line(-50, -40, -10, -10); // linkes auge
line(-50, -10, -10, -40); // linkes auge
line(50, -40, 10, -10); // rechtes auge
line(50, -10, 10, -40); // rechtes auge
}
else
{
ellipse(0 - 30, 0 - 30, 20, 20); // linkes auge
ellipse(0 + 30, 0 - 30, 20, 20); // rechtes auge
}
// 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)
{
arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
}
else if (smileyType == SMILEY_OLD)
{
pushStyle(); //style bart
stroke(150,150,150); //farbe bart
arc(0, 30, 45, 200, radians(30), radians(180-30)); // bart
popStyle();
arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
}
else if (smileyType == SMILEY_ASTOUND)
{
ellipse(0, 45, 30, 30);
}
else if (smileyType == SMILEY_SLEEPY)
{
line(-30, 30, 30, 30);
}
else if (smileyType == SMILEY_HORNY)
{
line(-30, 30, 30, 30); // mund
pushStyle(); //style zunge
stroke(255,0,0); //fabe zunge
arc(-10, 15, 20, 100, radians(30), radians(180-30)); // zunge
popStyle();
}
else if (smileyType == SMILEY_PANIC)
{
ellipse(0, 45, 30, 30);
}
else
arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
}
</div>
<div>
Es wurde in dieser Übung praktisch alles was vorher gezeigt und gelernt wurde nochmal umgesetzt. Neben der Programmierung konnte und musste man sich überlegen wie die einzelnen Emotionen dargestellt werden können. Auch dieser Schritt macht viel Spass was dann auch an den Resultaten ersichtlich war. Jeder interpretierte die Darstellung anders und daher kamen sehr viele verschiedene Smileys zum Vorschein.
Im speziellen der Umgang mit dem Koordinatensystem braucht am Anfang sehr viel Aufmerksamkeit. Teilweise halt mit „Trial and Error“. Code kann kopiert werden aber muss dann halt wieder individuell angepasst werden.
Die zweite Übung war dann ein zacken härter für mich. Eventuell liegt es auch daran, dass man ein nach paar Stunden nicht mehr so fit ist und die Energie ein bisschen nachlässt J
Die Aufgabe habe ich dann mit Hilfe von dem Mitstudenten gelöst. Wie ich schon geschrieben habe, muss ein algorithmisches Denken trainiert werden damit solche Aufgaben gelöst werden können. Das Smiley ausserhalb zu positionieren war weniger das Problem, sondern das die Rotation richtig ist und das Kleine um das Grosse kreist. Nachdem die Lösung gezeigt wurde konnte ich es auch für mich logisch nachvollziehen. Ich habe anschliessend noch ein bisschen mit den Parametern gespielt und gesehen was sich wie verändert.
Code:
float rot=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,4); // rechne aus in welchem bereich der radius am schluss sein sollte
pushMatrix();
translate(200,200);
rotate(calcAngle());
scale(radius);
smiley();
// funtions aufruf
rotate (rot);
translate(130,0);
scale(.2);
smiley(); // funtions aufruf
popMatrix();
rot += 0.01;
}
// 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));
}
Ich denke, dass das heute gelernt in den nächsten Lektionen noch vertieft werden muss.