a port of the Processing Visualization Language

Scrollbar

Move the scrollbars left and right to change the positions of the images.

Original Processing.org Example: Scrollbar

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

/* @pjs preload="data/seedTop.jpg, data/seedBottom.jpg"; */

HScrollbar hs1, hs2;



PImage top, bottom;         // Two image to load

int topWidth, bottomWidth;  // The width of the top and bottom images





void setup()

{

  size(200, 200);

  noStroke();

  hs1 = new HScrollbar(0, 20, width, 10, 3*5+1);

  hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1);

  top = loadImage("data/seedTop.jpg");

  topWidth = top.width;

  bottom = loadImage("data/seedBottom.jpg");

  bottomWidth = bottom.width;

}



void draw()

{

  background(255);

  

  // Get the position of the top scrollbar

  // and convert to a value to display the top image 

  float topPos = hs1.getPos()-width/2;

  fill(255);

  image(top, width/2-topWidth/2 + topPos*2, 0);

  

  // Get the position of the bottom scrollbar

  // and convert to a value to display the bottom image

  float bottomPos = hs2.getPos()-width/2;

  fill(255);

  image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2);

 

  hs1.update();

  hs2.update();

  hs1.display();

  hs2.display();

}





class HScrollbar

{

  int swidth, sheight;    // width and height of bar

  int xpos, ypos;         // x and y position of bar

  float spos, newspos;    // x position of slider

  int sposMin, sposMax;   // max and min values of slider

  int loose;              // how loose/heavy

  boolean over;           // is the mouse over the slider?

  boolean locked;

  float ratio;



  HScrollbar (int xp, int yp, int sw, int sh, int l) {

    swidth = sw;

    sheight = sh;

    int widthtoheight = sw - sh;

    ratio = (float)sw / (float)widthtoheight;

    xpos = xp;

    ypos = yp-sheight/2;

    spos = xpos + swidth/2 - sheight/2;

    newspos = spos;

    sposMin = xpos;

    sposMax = xpos + swidth - sheight;

    loose = l;

  }



  void update() {

    if(over()) {

      over = true;

    } else {

      over = false;

    }

    if(mousePressed && over) {

      locked = true;

    }

    if(!mousePressed) {

      locked = false;

    }

    if(locked) {

      newspos = constrain(mouseX-sheight/2, sposMin, sposMax);

    }

    if(abs(newspos - spos) > 1) {

      spos = spos + (newspos-spos)/loose;

    }

  }



  int constrain(int val, int minv, int maxv) {

    return min(max(val, minv), maxv);

  }



  boolean over() {

    if(mouseX > xpos && mouseX < xpos+swidth &&

    mouseY > ypos && mouseY < ypos+sheight) {

      return true;

    } else {

      return false;

    }

  }



  void display() {

    fill(255);

    rect(xpos, ypos, swidth, sheight);

    if(over || locked) {

      fill(153, 102, 0);

    } else {

      fill(102, 102, 102);

    }

    rect(spos, ypos, sheight, sheight);

  }



  float getPos() {

    // Convert spos to be values between

    // 0 and the total width of the scrollbar

    return spos * ratio;

  }

}
Fork me on GitHub