Click and Drag to Scroll

p5.js Coding Questions
1

Hey everyone,

I’m working on a piece of software that’s mostly being designed for touch screens. You know how on a touch screen you scoll by touching and dragging? I am trying to implement that functionality into my program using a scrollbar class I found, but I cannot quite figure it out. Below is the class attached. If you guys have any ideas of how to scroll in this more naturalistic way (rather than have the bar hop around to wherever you touch) that would be great!

Thanks Folks!

ScrollBar Class

// Horizontal Scroll Bar class from REAS at https://editor.p5js.org/REAS/sketches/B1_KaBccg 


//added mouse boolean that determines if we are in a touch mode or a mouse mode (desktop or touch screen)
function HScrollbar(xp, yp, sw, sh, l, mouse) {
  this.swidth = sw; // width and height of bar
  this.sheight = sh;
  var widthtoheight = sw - sh;
  this.ratio = sw / widthtoheight;
  this.xpos = xp; // x and y position of bar
  this.ypos = yp - this.sheight / 2;
  this.spos = this.xpos + this.swidth / 2 - this.sheight / 2; // x position of slider
  this.newspos = this.spos;
  this.sposMin = this.xpos - 100; // max and min values of slider
  this.sposMax = this.xpos + this.swidth +600;
  this.loose = l; // how loose/heavy
  this.over = false; // is the mouse over the slider?
  this.locked = false;


  this.update = function() {
    if (this.overEvent()) {
      this.over = true;
    } else {
      this.over = false;
    }
    if ((mouseIsPressed && this.over) || (touching == true && this.over)) {
      this.locked = true;
    }
    if (mouse){
      if (!mouseIsPressed)  {
        this.locked = false;
      } 
    } else {
     if (touching == false){
       this.locked = false;
     }
    }
    if (this.locked) {
      this.newspos = constrain(mouseX - this.sheight / 2, this.sposMin, this.sposMax);
    }
    if (abs(this.newspos - this.spos) > 1) {
      this.spos = this.spos + (this.newspos - this.spos) / this.loose;
     
    }
  }

  this.constrain = function(val, minv, maxv) {
    return min(max(val, minv), maxv);
  }

  this.overEvent = function() {
    if (mouseX > this.xpos && mouseX < this.xpos + this.swidth &&
      mouseY > this.ypos && mouseY < this.ypos + this.sheight) {
      return true;
    } else {
      return false;
    }
    
     if (touchX > this.xpos && touchX < this.xpos + this.swidth &&
      touchY > this.ypos && touchY < this.ypos + this.sheight) {
      return true;
    } else {
      return false;
    }
  }

  this.display = function() {
    noStroke();
    fill(204, 50);
    rect(this.xpos, this.ypos, this.swidth, this.sheight);
    if (this.over || this.locked) {
      fill(0, 0, 0, 50);
    } else {
      fill(102, 102, 102, 50);
    }
    rect(this.spos, this.ypos, this.sheight, this.sheight);
  }

  this.getPos = function() {
    // Convert spos to be values between
    // 0 and the total width of the scrollbar
    return this.spos * this.ratio;
  }
}

please format code with </> button * homework policy * asking questions

2 Likes
2

I found a solution on my own! Turns out, you can just use the simple way in which people have figured out how to pan an image, and plug that into your x values or y values and get scrolling easily. Here is the code that I adapted: `//Zoom/Pan Component
//by Rick Companje, Nov 1, 2018.
//Enjoy!

var img;
var w, h, tow, toh;
var x, y, tox, toy;
var zoom = .01; //zoom step per mouse tick

function preload() {
img = loadImage(“https://i.imgur.com/9dbblSn.jpg”);
}

function setup() {
createCanvas(windowWidth, windowHeight);
w = tow = img.width;
h = toh = img.height;
x = tox = w / 2;
y = toy = h / 2;
}

function draw() {
background(0);

//tween/smooth motion
x = lerp(x, tox, .1);
y = lerp(y, toy, .1);
w = lerp(w, tow, .1);
h = lerp(h, toh, .1);

image(img, x-w/2, y-h/2, w, h);
}

function mouseDragged() {
tox += mouseX-pmouseX;
toy += mouseY-pmouseY;
}

function mouseWheel(event) {
var e = -event.delta;

if (e>0) { //zoom in
for (var i=0; i<e; i++) {
if (tow>30*width) return; //max zoom
tox -= zoom * (mouseX - tox);
toy -= zoom * (mouseY - toy);
tow *= zoom+1;
toh *= zoom+1;
}
}

if (e<0) { //zoom out
for (var i=0; i<-e; i++) {
if (tow<width) return; //min zoom
tox += zoom/(zoom+1) * (mouseX - tox);
toy += zoom/(zoom+1) * (mouseY - toy);
toh /= zoom+1;
tow /= zoom+1;
}
}
}`

2 Likes