Scrolling on one canvas only (instance mode)

p5.js Beginners
1

hello!
I’m producing two canvases on Instance Mode, my plan is to be able to mouseScroll on just one canvas, but I can’t make it work.
I believe… I’m making a name function that is called from mousewheel in the first canvas setup and I’m sure i’m doing something terrible wrong… I don’t really understand well Instance mode.
thoughts?

https://editor.p5js.org/caminofarol/sketches/6t5QmGWU

var pgPos = 50;

var s1 = function( p ) {
  p.setup = function() {
    var canvas1 = p.createCanvas(400, 400);
    canvas1.mouseWheel(doScroll);
    canvas1.position(0,0);
  }

  p.draw = function() {
  p.background(128);
  p.translate(50, pgPos); 
  p.fill(255);
  p.rect(0,0, 300, 200); 
}
  
  
  var doScroll = function() {
  pgPos += event.delta;  
    
}
};



new p5(s1);

var s2 = function( p ) {
p.setup = function() {
    var canvas2 = p.createCanvas(400, 400);
    canvas2.position(400,0);
  }
   p.draw = function() {
    p.background(160);
    p.rect(0,0, 300, 200); 
  }
};

new p5(s2);
1 Like
2

According to method p5.Element::mouseWheel()'s reference:

The WheelEvent doesn’t have any property named delta:

You should access property deltaY instead:

And global property event is more appropriate to use for the global callback mouseWheel():

For the p5.Element version, makes more sense to access the WheelEvent object passed to the callback:

function doScroll(evt) {
  pgPos += evt.deltaY;
}

Also it’s advisable to declare variable pgPos inside the sketch callback instead:

new p5(p => {
  let pgPos = 50;

  p.setup = () => {
    // ...
  }
});
2 Likes
3

Thanks a lot!
this has been very helpful! I should have looked better into mouseWheel!
also, there is a similar canvas specific example in its p5 reference!
thanks again!