# mouseWheel and other callback functions not working in Instance Mode

**URL:** <https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436>\
**Category:** Beginners\
**Created:** [November 11, 2018, 11:20am UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436 "2018-11-11T11:20:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![FedFod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fedfod/32/2312_2.png) [@FedFod](https://discourse.processing.org/u/FedFod)\
**Post date:** [November 11, 2018, 11:20am UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/1 "2018-11-11T11:20:38Z")

</div>

After converting my code into instance mode, all the callback functions I had in place are not working anymore: for example mouseWheel, mousePressed, windowResized and so on.  
Should those functions reside inside the instance class scope or outside?  
Thank you for any help!

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 12, 2018, 10:00pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/2 "2018-11-12T22:00:37Z")

</div>

Can you please post a [MCVE](https://stackoverflow.com/help/mcve)?

> [@FedFod](#):
>
> Should those functions reside inside the instance class scope or outside?

Inside.

---

<div class="post-metadata">

**Author:** ![FedFod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fedfod/32/2312_2.png) [@FedFod](https://discourse.processing.org/u/FedFod)\
**Post date:** [November 12, 2018, 10:19pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/3 "2018-11-12T22:19:45Z")

</div>

Solved thanks, I assigned the functions to the sketch object passed inside the p5 constructor and then they worked. Something like sketch.windowResized() { }

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 12, 2018, 11:15pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/4 "2018-11-12T23:15:54Z")

</div>

> [@FedFod](#):
>
> Something like `sketch.windowResized() { }`

Or something like this: `sketch.windowResized = function () { }` 😉

> **[examples | p5.js](https://p5js.org/examples/instance-mode-instantiation.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![FedFod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fedfod/32/2312_2.png) [@FedFod](https://discourse.processing.org/u/FedFod)\
**Post date:** [November 13, 2018, 12:06pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/5 "2018-11-13T12:06:14Z")

</div>

Yes actually that’s the correct solution, thanks

---

<div class="post-metadata">

**Author:** ![franchowsky](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@franchowsky](https://discourse.processing.org/u/franchowsky)\
**Post date:** [March 3, 2019, 8:09pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/6 "2019-03-03T20:09:06Z")

</div>

Would you be willing to post an example of this? Struggling to get mouseWheel working in instance mode.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 3, 2019, 9:03pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/7 "2019-03-03T21:03:05Z")

</div>

[http://p5js.SketchPad.cc/sp/pad/view/ro.C9V0wpmLEMeNC4/latest](http://p5js.SketchPad.cc/sp/pad/view/ro.C9V0wpmLEMeNC4/latest)

---

<div class="post-metadata">

**Author:** ![franchowsky](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@franchowsky](https://discourse.processing.org/u/franchowsky)\
**Post date:** [March 3, 2019, 11:26pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/8 "2019-03-03T23:26:13Z")

</div>

Thank you. Still seem to be having issues getting the variable to be recognized within the instance.

````auto

var canvasDiv = document.getElementById('container');
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
var pos = 25;

var s = function( p ) {
 
    
  p.setup = function() {
    p.createCanvas(width, height);
  };

  p.draw = function() {
    p.rect(pos,100,50,50);
  };

 
};

var myp5 = new p5(s,"container");

function mouseWheel(event) {
  print(event.delta);
  //move the square according to the vertical scroll amount
  pos += event.delta;
  //uncomment to block page scrolling
  //return false;
}

window.onresize = function () {
    location.reload();
}```
````

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 3, 2019, 11:36pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/9 "2019-03-03T23:36:42Z")

</div>

The code from my link is in “global” mode, not “instance”! 🌐

Obviously, a global-scoped **mouseWheel()** won’t be recognized as a callback function by a sketch in “Instance” mode! 📞

Just follow the same approach you’re already doing for callbacks **setup()** & **draw()**: 💡

`function mouseWheel(event) {` ➡ `p.mouseWheel = function (event) {`

---

<div class="post-metadata">

**Author:** ![franchowsky](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@franchowsky](https://discourse.processing.org/u/franchowsky)\
**Post date:** [March 3, 2019, 11:55pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436/10 "2019-03-03T23:55:06Z")

</div>

Perfect. Thank you. Leaving the final example here.

```auto
var canvasDiv = document.getElementById('container');
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
var pos = 25;

var s = function( p ) {
 
    
  p.setup = function() {
  
    p.createCanvas(width, height);
  };

  p.draw = function() {
  	p.background(0);
    p.rect(pos,100,50,50);
  };

  p.mouseWheel = function (event) {
  p.print(event.delta);
  //move the square according to the vertical scroll amount
  pos += event.delta;
  //uncomment to block page scrolling
  //return false;
}
 
};

var myp5 = new p5(s,"container");

window.onresize = function () {
    location.reload();
}

```