mouseWheel function -> event.WheelDelta is not working

SimonSchmidt

I tried using the example provided on the p5 page (http://p5js.org/reference/#/p5.Element/mouseWheel), but it tells me "ReferenceError: event is not defined", which makes sense, but I don't know how to define event in order to get the WheelDelta information.

I tried doing function mouseWheel(MouseEvent event){}, but it's not working.

Does somebody have a solution for this?

KevinWorkman

That example works fine for me. Can you please post an MCVE and explain exactly how you're running this?

Why do you say it makes sense that even would be undefined?

Why are you using typed variables in your function declaration? Keep in mind that P5.js syntax is JavaScript, not Java like regular Processing and Processing.js.

SimonSchmidt

I just ran the provided example code again in a completely new empty p5 sketch. I could see it in the browser and it also recognized the scrolling, but it was only changing the brightness and not the size of the circle. And the console kept giving me the error.

I'm sorry if I miss something really basic here...

KevinWorkman

Are you using the P5.js editor, or something else? Which browser are you running?

SimonSchmidt

Firefox and i'm using Atom

KevinWorkman

Weird. This works fine for me in chrome, but I see the same error in firefox.

If I add an event parameter to the changeSize() function, it works a little more reasonably.

Edit: Actually it doesn't, that's just moving the error down because now event is defined but event.wheelDelta is not.

Obviously something is going on with firefox's mouse wheel event.

SimonSchmidt

Okay, thank you anyway! I'm relieved that it wasn't my mistake :D

KevinWorkman

I've created an issue for this on the p5.js GitHub here: https://github.com/processing/p5.js/issues/1604

GoToLoop

function changeSize() {
  if (event.wheelDelta > 0) {
// ...

The excerpt above is clearly WRONG! Function changeSize() is supposed to receive an argument when it's called back by mouseWheel() event.
Therefore, we should declare that parameter for the callback:

function changeSize(evt) {
  if (evt.wheelDelta > 0) {
// ...

BtW, Processing's own reference example for mouseWheel() is much better: :>
https://Processing.org/reference/mouseWheel_.html

KevinWorkman

@GoToLoop Then why does it work perfectly in chrome?

And if I add an event parameter to the changeSize() function, why is wheelDelta undefined?

Also please note that we aren't talking about the plain old mouseWheel() function. The p5.js reference contains plenty of information on it (more than the Processing reference you linked): https://p5js.org/reference/#/p5/mouseWheel

We are talking about the P5.element.mouseWheel() function, which is a completely different thing: http://p5js.org/reference/#/p5.Element/mouseWheel

GoToLoop

• Indeed I haven't tested the example nor my proposed fix. I just quickly glanced over it. :-&
• But by logic, there shouldn't exist any global variable called event in p5.js' API.
• Clearly it wasn't defined within the example sketch there either. So it should throw an exception!
• mouseWheel() is an WheelEvent that for +95% of cases we do care about its passed argument.
• Therefore my proposed fix shoulda worked. However, dunno why wheelDelta wasn't found there.

GoToLoop

After some quick research, I couldn't spot any property called wheelDelta for WheelEvent interface: @-)
https://developer.Mozilla.org/en-US/docs/Web/Events/wheel
https://developer.Mozilla.org/en-US/docs/Web/API/WheelEvent

Perhaps replace that w/ its deltaY property instead: :-??
https://developer.Mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

GoToLoop

Here's the source code for p5.Element method mouseWheel():
https://github.com/processing/p5.js/blob/master/src/core/p5.Element.js#L248

p5.Element.prototype.mouseWheel = function (fxn) {
  attachListener('wheel', fxn, this);
  return this;
};

function attachListener(ev, fxn, ctx) {
  var f = fxn.bind(ctx);
  ctx.elt.addEventListener(ev, f, false);
  ctx._events[ev] = f;
}

Looking at ctx.elt.addEventListener(ev, f, false);, we can surely conclude now that our callback argument is gonna be called back by JS' native WheelEvent interface: >-)

1. http://p5js.org/reference/#/p5.Element/elt
2. https://developer.Mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
3. https://developer.Mozilla.org/en-US/docs/Web/Events/wheel
4. https://developer.Mozilla.org/en-US/docs/Web/API/WheelEvent

GoToLoop

Seems like @limzykenneth had the same proposed fix as mine: >:)
https://GitHub.com/processing/p5.js/issues/1604#issuecomment-250269285

KevinWorkman

Yep, turns out the documentation was wrong. It will be updated shortly.

GoToLoop

It's still very fishy that current example worked for you somehow! /:)
According to p5.js' API, it shouldn't exist any global variable called event.
Therefore that example should fail for all browsers at all times! :-q

limzykenneth

@GoToLoop Well, beat you to it :D

I think the flawed example worked probably because of different JS engine implementation, especially with bind which is used in the source to pass argument to the callback. Just a guess though.

GoToLoop

Well, beat you to it.

Nope! My proposed answer about replacing wheelDelta w/ deltaY was posted at 3:45PM in my time. While yours at GitHub was at 4:12 PM. That's 27 minutes apart! ;;)

1. https://GitHub.com/processing/p5.js/issues/1604#issuecomment-250269285
2. https://forum.Processing.org/two/discussion/18325/mousewheel-function-event-wheeldelta-is-not-working#Item_11

Perhaps replace that w/ its deltaY property instead:

Anyways, gonna post a fixed tweaked example I just done now. Watch it online at link below: :bz
http://p5js.SketchPad.cc/sp/pad/view/ro.C9V0wpmLEMeNC4/latest

<script async src=http://p5js.org/assets/js/p5.js></script>
<script defer src=mouseWheel.js></script>

/**
 * New mouseWheel() Callback Example (v1.0.6)
 * GoToLoop (2016-Sep-28)
 *
 * forum.Processing.org/two/discussion/18325/
 * mousewheel-function-event-wheeldelta-is-not-working#Item_16
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.C9V0wpmLEMeNC4/latest
 */

"use strict";

const INC = 5; // increase step for both r & d
let bg, r = 10, d = 10, md; // r is red & d is diameter & md is max diameter.

function setup() {
  // Parameter e is of datatype WheelEvent:
  const changeDiam = e => d = constrain(d - INC*Math.sign(e.deltaY), 0, md);
  createCanvas(400, 300).mouseWheel(changeDiam);

  ellipseMode(CENTER).strokeWeight(2.5).stroke('blue');
  bg = color(0), md = min(width, height);
}

function draw() {
  background(bg).ellipse(width>>1, height>>1, d, d);
}

// Parameter delta comes from caller WheelEvent instance.
// Although it was added by p5.js API to be an alias for its original deltaY prop.:
function mouseWheel({delta}) {
  fill(r = constrain(r + INC*Math.sign(delta), 10, 0xff), 0, 0);
  console.log(`Red: ${r}\tDiam:${d}`);
  return false;
}

jeremydouglass

@limzykenneth @GoToLoop you are both winners in my book.

limzykenneth

Oh well, anyway.... :P

Filed a PR on github, once merged the changes should be live when it's pushed to the website.