* CSlider - CanvasSlider for p5.js with scale() support

 * 

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

 */

​

let slider;

​

function setup() {

  createCanvas(640, 360);

  old_slider = createSlider(1, 5, 2);

  slider = createCSlider(10, 19, 12, 2); // just add 'C'

  slider2 = new CSlider(10, 19, 2);

}

​

function draw() {

  background(255);

​

  fill(0);

  text("slider position: " + slider.getPos().toFixed(2), width / 2, height / 3);

  scale(1);

  //scale(2);

​

​

  slider.position(220, 40);

  //slider.setScale(2); //For support scale(2) in CSlider

  text(slider.value() + ' new', slider.x + 10 + slider.width, 55);

  slider2.position(10, 50);

  //slider2.setScale(2);

  text(slider2.value() + ' new', slider2.x + 10 + slider2.width, 65);

​

  old_slider.position(10, 10);

​

}

​

// ========== cslider.js ===========

​

function createCSlider(a, b, c, d) {

  r = new CSlider(a, b, c, d);

  return r;

}

​

class CSlider {

  constructor(min, max, value = (min + max) / 2, step = 1) {

    this.width = 130;

    this.height = 20;

    let widthtoheight = this.width - this.height;

    this.ratio = this.width / widthtoheight;

    this.x = 10;

    this.y = -1000;

    this.spos = this.x + this.width / 2 - this.height / 2;

    this.newspos = this.spos;

    this.sposMin = this.x;

    this.sposMax = this.x + this.width - this.height;

    this.vmin = min;

    this.vmax = max;

    this.svalue = constrain(value, this.vmin, this.vmax);

    this.vstep = step;

    this.loose = 1;

    this.over = false;

    this.locked = false;

    this.scale = 1;

  }

​

  update() {

    if (this.overEvent()) {

      this.over = true;

    } else {

      this.over = false;

    }

    if (mouseIsPressed && this.over) {

      this.locked = true;

    }

    if (!mouseIsPressed) {

      this.locked = false;

    }

    if (this.locked) {

      this.newspos = constrain(mouseX / this.scale - this.height / 2, this.sposMin, this.sposMax);

      this.svalue = this.vmin + (this.vmax - this.vmin) * ((this.newspos - this.sposMin) / (this.sposMax - this.sposMin));

      if (this.vstep > 0) {

        this.svalue = constrain(this.vmin + round((this.svalue - this.vmin) / this.vstep) * this.vstep, this.vmin, this.vmax);

      }

      this.newspos = this.x + (this.width - this.height) * ((this.svalue - this.vmin) / (this.vmax - this.vmin));

    }

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

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

    }

  }

​

  overEvent() {

    if (mouseX / this.scale > this.x && mouseX / this.scale < this.x + this.width &&

      mouseY / this.scale > this.y && mouseY / this.scale < this.y + this.height) {

      return true;

    } else {

      return false;

    }

  }

​

  display() {

    noStroke();

    fill(204);

    rect(this.x, this.y, this.width, this.height);

    if (this.over || this.locked) {

      fill(0, 0, 0);

    } else {

      fill(102, 102, 102);

    }

    rect(this.spos, this.y, this.height, this.height);

  }

​

  getPos() {

    // Convert spos to be values between

    // 0 and the total width of the scrollbar

    return this.spos * this.ratio;

  }

​

  value() {

    return this.svalue;

  }

​

  setScale(sc) {

    this.scale = sc;

  }

​

  position(xp, yp) {

    this.x = xp;

    this.y = yp;

    if (this.vstep > 0) {

      this.svalue = constrain(this.vmin + round((this.svalue - this.vmin) / this.vstep) * this.vstep, this.vmin, this.vmax);

    }

    this.spos = this.x + (this.width - this.height) * ((this.svalue - this.vmin) / (this.vmax - this.vmin));

    //console.log(this.smin);

    this.newspos = this.spos;

    this.sposMin = this.x;

    this.sposMax = this.x + this.width - this.height;

    push();

    this.update();

    this.display();

    pop();

  }

}