Ext.Lektion 1

Lektion 8

Slider sliderR = null;
Slider sliderG = null;
Slider sliderB = null;

void setup()
{
  size(400, 400);

  sliderR = new Slider(100,50,200,20,.5);
  sliderG = new Slider(100,75,200,20,.5);
  sliderB = new Slider(100,100,200,20,.5);
}

void draw()
{
  background(sliderR.pos() * 255,sliderG.pos() * 255,sliderB.pos() * 255);

  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);
}

class Slider
{
  PVector _p1;
  PVector _p2;

  int     _h;
  float   _pos;

  Slider(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

    }
  }

}

Aufgabe:

• Mach einen vertikalen Slider
• Erweitere den Slider grafisch
• Baue in dein Programm den "Doppel-Klick" ein
• Schreibe eine neue Checkbox-Klasse