28. Oktober 2011
Nachdem ich den ganzen Code durchkommentiert habe, habe ich mich den einzelnen Aufgaben gewidmet.Mach einen vertikalen Slider
- Zuerst habe ich neue Dateien für das Hauptprogramm und die Klasse angelegt und die Klasse dann umbenannt und die entsprechenden Verweise angepasst.
- Im Hauptprogramm habe ich die x-positionen angepasst, so dass die Linien horizontal und nicht mehr vertikal versetzt beginnen. Die y-Positionen habe ich so angepasst, dass alle auf der gleichen Höhe sind.Vorher (Horizontal)
sliderR = new Slider(100,50,200,20,.5); sliderG = new Slider(100,75,200,20,.5); sliderB = new Slider(100,100,200,20,.5);
Nachher (Vertikal)sliderR = new Slider(100,50,200,20,.5); sliderG = new Slider(125,50,200,20,.5); sliderB = new Slider(150,50,200,20,.5);
- In der Sliderklasse habe ich als nächstes die Ausrichtung der Sliderlinie angepasst. Dies hatte zur Folge, dass die Linien zwar vertikal verlaufen, aber die Begrenzungslinien am Ende nicht mehr angezeigt werden.Vorher (Horizontal)
_p1 = new PVector(x,y + h *.5); _p2 = new PVector(x+w,y + h *.5);
Nachher (Vertikal)_p1 = new PVector(x + h *.5,y); _p2 = new PVector(x + h *.5,y + w);
- Bei der oberen, ersten Begrenzungslinie musste ich anpassen, dass die Linien von der x-Position aus berechnet werden statt von der y-Position. Bei der zweiten Linie musste zum einen das angepasst werden und zum anderen war der Startpunkt der Linie nicht mehr by p1.y, sondern bei p2.y.Vorher (Horizontal)
line(_p1.x,_p1.y + _h * .5,_p1.x,_p1.y - _h * .5); line(_p2.x,_p1.y + _h * .5,_p2.x,_p1.y - _h * .5);
Nachher (Vertikal)line(_p1.x + _h * .5,_p1.y,_p1.x - _h * .5,_p1.y); line(_p2.x + _h * .5,_p2.y,_p2.x - _h * .5,_p2.y);
- Der Slider-Knopf musste auch noch angepasst werden.Vorher (Horizontal)
rect(pos.x-2,pos.y-3,4,6);
Nachher (Vertikal)rect(pos.x-3,pos.y-2,6,4);
- Nachdem die grafische Komponente angepasst war, musste ich noch die Kollisionsabfrage in der isHit-Methode anpassen.Vorher (Horizontal)
if(x > _p1.x && x < _p2.x && y > _p1.y - 5 && y < _p1.y + 5)
Nachher (Vertikal)if(x > _p1.y && x < _p2.y && y > _p1.x - 5 && y < _p2.x + 5)
- Schlussendlich bleibt noch das Anpassen der Positionsabfrage.Vorher (Horizontal)
PVector dir = PVector.sub(_p2,_p1); println("Resultat von dir.mag(): " + 1.0 / dir.mag() * (x - _p1.x)); _pos = 1.0 / dir.mag() * (x - _p1.x);Nachher (Vertikal)PVector dir = PVector.sub(_p1,_p2); println("Resultat von dir.mag(): " + 1.0 / dir.mag() * (y - _p1.y)); _pos = 1.0 / dir.mag() * (y - _p1.y); - Und so siehts dann aus:
Endlich geschafft!
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(125,50,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(150,50,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.
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);
sliderR.draw();
sliderG.draw();
sliderB.draw();
}
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 + h *.5,y); // 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 + h *.5,y + w); // 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(y > _p1.y && y < _p2.y && // 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.
x > _p1.x - 5 && x < _p2.x + 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 + _h * .5,_p1.y,_p1.x - _h * .5,_p1.y); // die linke oder erste Begrenzungslinie wird gezeichnet
line(_p2.x + _h * .5,_p2.y,_p2.x - _h * .5,_p2.y); // 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-3,pos.y-2,6,4);
}
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(_p1,_p2); // 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() * (y - _p1.y)); // Gibt den aktuellen Wert der dir-Variable in der Konsole aus
_pos = 1.0 / dir.mag() * (y - _p1.y); // _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
}
}
}
