28. Oktober 2011
Zur Übung der Sliders kombinierte ich die BouncingBall-Aufgabe mit verschiedenen Sliders. Dabei wollte ich mit Hilfe der Sliders die Farbe des Hintergrundes und der Bälle sowie die Grösse und Anzahl der Bälle pro Klick regulieren können. Dafür brauchte ich 3 verschiedene Klassen: eine für die horizontalen und eine für die vertikalen Sliders sowie eine für die Bälle. Mit den vertikalen Reglern auf der linken Seite reguliere ich per RGB die Farbe des Rechteckes, auf welchen die Bälle herumspringen. Mit den linken horizontalen Reglern stelle ich die Farbe der herumspringenden Bälle ein. Mit dem oberem horizontalen Regler auf der rechten Seite kann ich die Anzahl der Bälle pro Mausklick regulieren und mit dem unteren die Grösse dieser Bälle.
<pre>VerticalSlider VsliderR = null;
VerticalSlider VsliderG = null;
VerticalSlider VsliderB = null;
HoricontalSlider HsliderR = null;
HoricontalSlider HsliderG = null;
HoricontalSlider HsliderB = null;
HoricontalSlider HsliderCount = null;
HoricontalSlider HsliderBallsize = null;
PVector p1 = new PVector();
PVector p2 = new PVector();
boolean drag = false;
PVector dir;
String anzahlText = "Anzahl";
String groesseText = "Grösse";
ArrayList balls;
void setup()
{
size(800, 600);
balls = new ArrayList();
VsliderR = new VerticalSlider(50,150,20,200,.5);
VsliderG = new VerticalSlider(75,150,20,200,.5);
VsliderB = new VerticalSlider(100,150,20,200,.5);
HsliderR = new HoricontalSlider(150,50,200,20,.5);
HsliderG = new HoricontalSlider(150,75,200,20,.5);
HsliderB = new HoricontalSlider(150,100,200,20,.5);
HsliderCount = new HoricontalSlider(450,75,200,20,.5);
HsliderBallsize = new HoricontalSlider(450,100,200,20,.5);
}
void draw()
{
background(150);
smooth();
stroke(0,0,0);
fill(VsliderR.pos() * 255,VsliderG.pos() * 255,VsliderB.pos() * 255);
rect(150,150,650,450);
noStroke();
//fill(HsliderR.pos() * 255,HsliderG.pos() * 255,HsliderB.pos() * 255);
//ellipse(200,200,20,20);
HsliderR.draw();
HsliderG.draw();
HsliderB.draw();
HsliderCount.draw();
HsliderBallsize.draw();
VsliderR.draw();
VsliderG.draw();
VsliderB.draw();
fill(0,0,0);
text(anzahlText,670,90);
text(groesseText,670,115);
fill(255,255,255,60);
rect(150,150,650,450);
translate(150,150);
for(int i = 0; i < balls.size(); i++)
{
BouncingBall ball = (BouncingBall) balls.get(i);
// zeichne die abschussrichtung
ball.draw((int)(HsliderR.pos() * 255),(int)(HsliderG.pos() * 255),(int)(HsliderB.pos() * 255));
}
}
void mousePressed()
{
HsliderR.mousePos(mouseX,mouseY,true);
HsliderG.mousePos(mouseX,mouseY,true);
HsliderB.mousePos(mouseX,mouseY,true);
HsliderCount.mousePos(mouseX,mouseY,true);
HsliderBallsize.mousePos(mouseX,mouseY,true);
VsliderR.mousePos(mouseX,mouseY,true);
VsliderG.mousePos(mouseX,mouseY,true);
VsliderB.mousePos(mouseX,mouseY,true);
anzahlText = str((int)(HsliderCount.pos() * 10)+1);
groesseText = str((int)(HsliderBallsize.pos() * 60)+1);
{
drag = true;
p1.set(mouseX-150,mouseY-150,0);
}
}
void mouseDragged()
{
HsliderR.mousePos(mouseX,mouseY,true);
HsliderG.mousePos(mouseX,mouseY,true);
HsliderB.mousePos(mouseX,mouseY,true);
HsliderCount.mousePos(mouseX,mouseY,true);
HsliderBallsize.mousePos(mouseX,mouseY,true);
VsliderR.mousePos(mouseX,mouseY,true);
VsliderG.mousePos(mouseX,mouseY,true);
VsliderB.mousePos(mouseX,mouseY,true);
anzahlText = str((int)(HsliderCount.pos() * 10)+1);
groesseText = str((int)(HsliderBallsize.pos() * 60)+1);
}
void mouseClicked()
{
if(mouseX > 150 && mouseY > 150)
{
for(int i = 0; i<((int)(HsliderCount.pos() * 10)+1); i++) {
int x=(int)random(150);
int y=(int)random(150);
dir = new PVector(x,y);
// laenge verkuerzen
dir.mult(.09);
BouncingBall ball = new BouncingBall(((int)(HsliderBallsize.pos() * 60)+1),((int)(HsliderBallsize.pos() * 60))+1);
balls.add(ball);
ball.set(p1,dir,.99);
}
}
}
Klasse BouncingBall:
class BouncingBall
{
PVector _pos;
PVector _dir;
float _dampV;
PImage _shape;
int _w;
int _h;
// konstruktor
BouncingBall(int shapeWidth,int shapeHeight)
{
_pos = new PVector(650/2, 450/2);
_dir = new PVector(0,0);
_dampV = 1;
_w = shapeWidth;
_h = shapeHeight;
imageMode(CENTER);
_shape = loadImage("./images/ball_spirale_2.png");
}
// setzt die neue pos + richtung + daempfung
void set(PVector pos,PVector dir,float dampV)
{
_pos = pos.get();
_dir.add(dir);
_dampV = dampV;
}
// erneuert die aktuelle position
void calcPos()
{
// aktuelle position verschieben
_pos.add(_dir);
// bewegungs vektor veraendert
_dir.mult(_dampV);
// teste horizontal
if(_pos.x + _w/2 > 650)
{
_dir.x *= -1;
_pos.x = 650 - _w/2;
}
else if(_pos.x - _w/2 < 0)
{
_dir.x *= -1;
_pos.x = _w/2;
}
// teste vertikal
if(_pos.y + _h/2 > 450)
{
_dir.y *= -1;
_pos.y = 450 - _w/2;
}
else if(_pos.y - _h/2 < 0)
{
_dir.y *= -1;
_pos.y = _h/2;
}
}
// zeichnet den ball
void draw(int R,int G, int B)
{
calcPos();
imageMode(CENTER);
tint(R,G,B);
image(_shape,
_pos.x,_pos.y,
_w,_h);
}
}
Klasse VerticalSlider:
PImage _slider;
class VerticalSlider
{
PVector _p1;
PVector _p2;
int _h;
int _w;
float _pos;
VerticalSlider(int x,int y,int w,int h,float pos)
{
_p1 = new PVector(x + w *.5,y);
_p2 = new PVector(x + w *.5,y + h);
_h = h;
_w = w;
_pos = pos;
if(_pos > 1.0)
_pos = 1.0;
else if(_pos < 0.0)
_pos = 0.0;
}
float pos()
{
return _pos;
}
boolean isHit(int x,int y)
{
if(x > _p1.x - _w/2 && x < _p1.x + _w/2 &&
y > _p1.y && y < _p2.y)
return true;
else
return false;
}
void draw()
{
pushStyle();
drawSlider();
drawKnob();
popStyle();
}
void drawSlider()
{
stroke(255);
line(_p1.x,_p1.y,_p2.x,_p2.y);
line(_p1.x + _w*0.5,_p1.y,_p1.x - _w*0.5,_p1.y);
line(_p2.x + _w*0.5,_p2.y,_p2.x - _w*0.5,_p2.y);
}
void drawKnob()
{
imageMode(CENTER);
//_slider = loadImage("slider.png");
stroke(0);
fill(255);
PVector dir = PVector.sub(_p2,_p1);
PVector pos = PVector.add(_p1 , PVector.mult(dir,_pos));
//image(_slider,pos.x,pos.y,10,20);
rect(pos.x-2,pos.y-3,4,6);
}
void mousePos(int x,int y,boolean pressed)
{
if(pressed)
{
if(isHit(x,y))
{ // move knob
PVector dir = PVector.sub(_p2,_p1);
_pos = 1.0 / dir.mag() * (y - _p1.y);
}
}
else
{ // mouse over
}
}
}
Klasse HoricontalSlider:
class HoricontalSlider
{
PVector _p1;
PVector _p2;
int _h;
float _pos;
HoricontalSlider(int x,int y,int w,int h,float pos)
{
_p1 = new PVector(x,y + h *.5);
_p2 = new PVector(x+w,y + h *.5);
_h = h;
_pos = pos;
if(_pos > 1.0)
_pos = 1.0;
else if(_pos < 0.0)
_pos = 0.0;
}
float pos()
{
return _pos;
}
boolean isHit(int x,int y)
{
if(x > _p1.x && x < _p2.x &&
y > _p1.y - 5 && y < _p1.y + 5)
return true;
else
return false;
}
void draw()
{
pushStyle();
drawSlider();
drawKnob();
popStyle();
}
void drawSlider()
{
stroke(255);
line(_p1.x,_p1.y,_p2.x,_p2.y);
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);
}
void drawKnob()
{
stroke(0);
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)
{
if(pressed)
{
if(isHit(x,y))
{ // move knob
PVector dir = PVector.sub(_p2,_p1);
_pos = 1.0 / dir.mag() * (x - _p1.x);
}
}
else
{ // mouse over
}
}
}
