28. Oktober 2011
Bei dieser Aufgabe habe ich mich am Donnerstag mit Daniel zusammengesetzt, um zusammen den Code Schritt für Schritt durchzugehen und zu kommentieren. Ich hatte diese Woche Mühe, dem Unterricht zu folgen und das GUI-Beispiel enthielt bis auf die Arrays alle Funktionen, die wir bis jetzt gelernt haben (Vektoren, Klassen, Methoden, verschiedene Variablentypen wie Boolean). Wir haben also den ganzen Code durchkommentiert und uns gegenseitig die verschiedenen Punkte erklärt. Durch das gegenseitige Erklären und Aufzeichnen z.B. von Vektorfunktionen und Koordinatensystemen auf Papier konnten wir uns den Code verständlicher machen. An verschiedenen Stellen habe ich Commandline-Ausgaben einprogrammiert, um besser verfolgen zu können, was genau abläuft. Das ganze war sehr zeitaufwändig, hat sich aber gelohnt. Am Freitag haben Basil und ich dann noch herausgefunden, wie man dynamischen Text auf dem Bildschirm ausgeben kann. Man ändert einfach println in text um. Das ganze wird in der Draw-Funktion des Hauptprogramms platziert.
text("R: " + sliderR.pos() * 255, 20, 320); // gibt die aktuellen Farbwerte auf dem Bildschirm aus
text("G: " + sliderG.pos() * 255, 20, 340);
text("B: " + sliderB.pos() * 255, 20, 360);
Source code Hauptprogramm
/* ----------------------------------------------------------------------------
* codingSpace18
* ----------------------------------------------------------------------------
* GUI - Elemente
* ----------------------------------------------------------------------------
* prog: max.rheiner@zhdk.ch
* ----------------------------------------------------------------------------
*/
Slider sliderR = null;
Slider sliderG = null;
Slider sliderB = null;
void setup()
{
size(400, 400);
sliderR = new Slider(100,50,200,20,.5); // gibt Variablen an Slider-Klasse weiter. Wenn der letzte Wert auf 1 gesetzt wird, kommt der Regler mittig auf die Begrenzungslinie.
sliderG = new Slider(100,75,200,20,.5); // wenn man mit der Maus zieht, ist es aber nicht möglich, den Regler in die selbe Position zu bringen ???
sliderB = new Slider(100,100,200,20,.5); //
}
void draw()
{
background(sliderR.pos() * 255,sliderG.pos() * 255,sliderB.pos() * 255); // Über die pos()-Methode der Slider-Klasse wird der momentane Wert des Reglers ausgegeben...
// ...und mit 255 * multipliziert. So ändert sich die Hintergrundfarbe von 0 - 255.
sliderR.draw();
sliderG.draw();
sliderB.draw();
text("R: " + sliderR.pos() * 255, 20, 320); // gibt die aktuellen Farbwerte auf dem Bildschirm aus
text("G: " + sliderG.pos() * 255, 20, 340);
text("B: " + sliderB.pos() * 255, 20, 360);
}
void mousePressed()
{
sliderR.mousePos(mouseX,mouseY,true);
sliderG.mousePos(mouseX,mouseY,true);
sliderB.mousePos(mouseX,mouseY,true);
}
void mouseDragged()
{
sliderR.mousePos(mouseX,mouseY,true);
sliderG.mousePos(mouseX,mouseY,true);
sliderB.mousePos(mouseX,mouseY,true);
}
Source code Slider-Klasse
/* ----------------------------------------------------------------------------
* codingSpace18
* ----------------------------------------------------------------------------
* GUI - Slider
* ----------------------------------------------------------------------------
* prog: max.rheiner@zhdk.ch
* ----------------------------------------------------------------------------
*/
class Slider // Eröffnung der Slider-Klasse
{
PVector _p1; // Positionspunkt 1 für PVector-Funktion
PVector _p2; // Positionspunkt 2 für PVector-Funktion
int _h; // Definition von integer (ohne Kommastellen) Variable mit Name "_h" (= height). Höhe der Begrenzungslinien links und rechts
float _pos; // Floating Variable (mit Kommastellen) für Position des Reglers/"Knobs"
Slider(int x,int y,int w,int h,float pos) // Definition "Slider" Methode. Methoden sind Funktionen, die in einer Klasse enthalten sind. erhält Werte für die Variablen von der setup-Funktion im Hauptprogramm
{
_p1 = new PVector(x,y + h *.5); // Berechnung des Startpunkts der Sliderlinie. Y-Wert wird berechnet, damit die Sliderlinie immer genau in der Mitte der Begrenzungslinie liegt. Die Y-Position wird also nach unten verschoben um die Hälfte der Höhe (h) der Begrenzungslinie.
_p2 = new PVector(x+w,y + h *.5); // Berechnung des Endpunkts der Sliderlinie.
_h = h; // Die Höhe der Begrenzungslinie wird als Wert an die _h Variable übergeben. Bei der ersten Linie ist es 20.
_pos = pos; // Die Position des Sliders wird an die _pos Variable gegeben. 0.5 = Mitte der Sliderlinie, 1 = Rechts, 0 = ganz Links
if(_pos >= 1.0) // Wenn die Position des Reglers über 1 gesetzt wird,
_pos = 0.995; // dann wir die Position des Reglers zurück auf 1 gestellt.
else if(_pos < 0.0) // Wenn die Position des Reglers unter 0 gesetzt wird,
_pos = 0.0; // dann wird die Position zurück auf 0 gestellt.
}
float pos() // Definition der pos() Funktion, die eine Floatzahl ausgeben muss. Diese Funktion wird als Methode im Hauptprogramm abgerufen, um die Hintergrundfarbe zu ändern.
{
return _pos; // Der momentane Wert der Sliderposition wird ausgegeben und an die Funktion zurückgegeben (returned).
}
boolean isHit(int x,int y) // Boole'sche Funktion namens isHit wird definiert mit integer-Parametern für x und y. Der Ausgabewert einer Boole'schen Funktion muss true oder false sein.
{ // Die x und y Werte entsprechen der aktuellen Mausposition und kommen über mousePos rein.
if(x > _p1.x && x < _p2.x && // Aus PVector-Variablen können x, y und z Werte ausgelesen/abgerufen werden. x ist kein frei definierbarer Wert und kann z.B. nicht mit "shit" ersetzt werden.
// Test, ob der Mauszeiger innerhalb der Länge der Linie (zwischen den zwei Punkten p1 und p2) ist.
y > _p1.y - 5 && y < _p1.y + 5) // Test ob der Mauszeiger in einem Bereich innerhalb von 10 Pixeln ausgehend von der Mitte (Linie) ist.
return true; // Gibt True-Wert an die Funktion zurück. Die Funktion ist somit beendet
else // Wenn der Mauszeiger sich nicht in dem definierten Bereich befindet, dann...
return false; // Die Bedingung ist nicht erfüllt und es passiert dementsprechend auch nichts.
}
void draw()
{
pushStyle();
drawSlider();
drawKnob();
popStyle();
}
void drawSlider() // definiert eine Funktion, die die Linien zeichnet (Sliderlinie und Begrenzungslinien)
{
stroke(255); // Farbe der Linien (255 = weiss)
line(_p1.x,_p1.y,_p2.x,_p2.y); // eine Linie wird von _p1 zu _p2 gezeichnet. Die Werte für die Position kommen aus dem Hauptprogramm. _p1 und _p2 sind globale Variablen innerhalb der Klasse.
line(_p1.x,_p1.y + _h * .5,_p1.x,_p1.y - _h * .5); // die linke oder erste Begrenzungslinie wird gezeichnet
line(_p2.x,_p1.y + _h * .5,_p2.x,_p1.y - _h * .5); // die rechte oder abschliessende Begrenzungslinie wird gezeichnet
}
void drawKnob() // definiert eine Funktion, die den Slider-Knopf zeichnet
{
stroke(0); // Farbe der Linien (0 = schwarz)
fill(255);
PVector dir = PVector.sub(_p2,_p1);
PVector pos = PVector.add( _p1 , PVector.mult(dir,_pos));
rect(pos.x-2,pos.y-3,4,6);
}
void mousePos(int x,int y,boolean pressed) // Methodendefinition. Die x, y und pressed Werte erhält die Funktion aus dem Hauptprogramm (sliderR.mousePos(mouseX,mouseY,true)
{
if(pressed) // Wenn die Maus gedrückt ist, dann... ist eine Abkürzung für pressed == true, weil es eine Boolean-Funktion ist
{
if(isHit(x,y)) // Der mouseX und mouseY Wert wird für x und y eingesetzt. Wenn die Funktion isHit = true ist, wird die nachfolgende Funktion ausgeführt und die Mausposition weitergegeben. Ist eine Abkürzung für isHit(x,y) == true, weil Boolean.
{ // move knob
PVector dir = PVector.sub(_p2,_p1); // Definition einer PVector-Variable mit Namen "dir". Danach werden zwei Vektoren voneinander subtrahiert (z.B. 300,60 - 100,60 = 200,0). Das Resultat von _p2 - _p1 ergibt die Länge der Strecke zwischen p1 und p2.
println("Resultat von dir.mag(): " + 1.0 / dir.mag() * (x - _p1.x)); // Gibt den aktuellen Wert der dir-Variable in der Konsole aus
_pos = 1.0 / dir.mag() * (x - _p1.x); // _pos ist die Position des Sliders. Die Länge der Strecke (dir) wird ausgerechnet (.mag) und mit der (Mausposition X abzüglich der x-Position des ersten Vektorpunktes) multipliziert
// Diese Rechnung rechnet die Position des Mauszeigers in Relation zur Länge der Strecke aus und gibt einen Wert zwischen 0 und 1 aus.
println("HIT ME!!"); // Gibt jedesmal, wenn der Mauszeiger im "aktiven Bereich" (definiert durch isHit) ist, HIT ME in der Konsole aus
}
}
else
{ // Wenn die Maus ausserhalb des aktiven Bereichs geklickt wird, passiert nichts
}
}
}
