mouseY system variable eventually stops working

[HectorDev309]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [X] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

v1.9.4 May 21, 2024

Web browser and version

Firefox 115.17.0esr

Operating system

Windows 7

Steps to reproduce this

I don't know what exactly causes this, but the mouseY system variable eventually starts returning floating numbers making no sense with the current mouse Y position.

I coded a simple program that shows the current mouseY value and it works properly, but if you make a full project it works for a short period and eventually starts showing incoherent results until you rerun the program, but it keeps happening again and again.

I had this problem with two projects of mine, I couldn't notice any similarity between then that could be causing this problem, but I will try to find something while I wait for a answer.

With one of those projects I managed to avoid this issue by creating a new variable for the mouse Y position and using movedY to change the value of the variable, it worked, but the mouseY variable would be more reasonable.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[HectorDev309]

I managed to fix it after I checked this issue.

The issue is talking about a problem with out-of-Ybounds shapes, there is a comment there mentioning problems with the mouseY variable.

I had the same issue as this user and I managed to fix it by adding gridOutput = function(){} inside the setup() function and so I did the same at the projects I mentioned in my issue and it fixed my problem as well.

Still, this is a bit problematic because it's disabling a built-in function, I'm not using it, but still, could cause more problems to some people.

[bojidar-bg]

For completeness sake... is the issue fixed in newer versions of p5.js, e.g. 1.10 and above, that include the fix from 46c5226a0f430026bdaf5fc4f5fe08f6a606eb09?

[HectorDev309]

For completeness sake... is the issue fixed in newer versions of p5.js, e.g. 1.10 and above, that include the fix from 46c5226?

I added the 1.11.1 p5.js version to the HTML file and removed the gridOutput = function(){} from the setup() function... the issue returned...

Then I added gridOutput = function(){} again and the issue was fixed.

[bojidar-bg]

Hmm; that's odd. Could you provide a project and steps that reproduce the issue?

On Tue, Nov 26, 2024, 11:34 Heitor @.***> wrote:

Reopened #7392 https://github.com/processing/p5.js/issues/7392.

— Reply to this email directly, view it on GitHub https://github.com/processing/p5.js/issues/7392#event-15440071447, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIIIN43LSBLABIITFHJP332CSWIVAVCNFSM6AAAAABSPJATBOVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJVGQ2DAMBXGE2DINY . You are receiving this because you commented.Message ID: <processing/p5. @.***>

[HectorDev309]

As I said before, I don't know exactly what causes the problem, so I can't provide the specific steps to achieve the issue, but I can show you one of my projects.

The project itself is just a colorful circle showing the color of the current pixel hovered by the mouse at the top left and the mouseIndex, which is a variable representing the index of the pixel currently hovered by the mouse like it's on a pixels array.

The 7th line has the command gridOutput = function(){} fixing the issue, if you remove it the text at the top left starts showing incoherent numbers at some point.

At the 72nd line the mouseIndex variable is being set as an int, if you remove the int function along with the gridOutput = function(){} , instead of showing wrong numbers, the program will crash with an error

[bojidar-bg]

I can reproduce the sketch erroring out on Chromium if I remove the int call, then zoom the window in so that the canvas has a scrollbar, and then scroll the mouse wheel while moving the mouse. (Apparently, the smooth scrolling animation causes mouseY to be a floating-point value. As mouseY is not guaranteed to be an integer, this might be something better fixed by using an int(mouseY) than by changing anything in p5.js.) This way to reproduce seems hit the issue both with and without the gridOutput line however, so it's possible I'm hitting a different issue. I fail to reproduce anything like this on Firefox, however.

[bojidar-bg]

@HectorDev309 Do you happen to have any other clues to what might be the steps to reproduce the issue? (Or whether my reproduction steps are correct?) Asking since I feel there might be something I've missed (:

[HectorDev309]

@bojidar-bg I'm sorry for not answering, I actually ignored this issue, everytime I had any problem with the mouseY variable or the error mentioned in a previous comment about this issue of mine I simply added the gridOutput = function(){} line and kept coding with no problem.

I didn't find out too much, but here's what I have.

At first I thought we could reproduce this issue by using the mouseY somewhere in your code, but I had the same problem on projects where the mouseY variable wasn't being used at all, I was getting the same error message as this guy instead.

Apparently both issues are related somehow, since they can be fixed by the same command, maybe we could ask something to the guy who got the other issue.

[HectorDev309]

@bojidar-bg About your try to reproduce the problem, I don't think this is related to the issue at all.

The steps you took made the mouseY variable assume a non-int value, that's true, but these steps are pretty difficult to happen naturally, maybe it's just a simple bug that can be forced.

The issue I had was about the mouseY variable starting to assume incoherent values at a certain point in the code's execution, the program starts normally, with the mouseY variable working properly, but if you move your mouse too much it starts to show weird values.

[bojidar-bg]

I tried moving my mouse around frantically, tabbing in and out, but I didn't get any kind of weird values :thinking: (tho I did need to do pixelDensity(1) to get the sketch working properly)

What do the incoherent mouseY values you get look like?

[koushikcs562]

Hello @bojidar-bg and @HectorDev309,

I am keen to work on investigating and resolving this mouseY inconsistency issue, and I would appreciate it if you could assign this task to me for investigation.

My approach will be two-fold: Reproducibility and Root Cause Analysis.

1. Focused Reproducibility (The Priority)

The main blocker is the lack of consistent reproduction steps. I want to shift the focus from "what the whole program does" to "what action triggers the failure."

• I will ask @HectorDev309 to share the affected sketch's code.
• I will systematically disable all non-essential code (rendering, colors, shapes) to create a Minimal Reproducible Example (MRE) that consists only of the canvas, mouse listener, and the faulty mouseY display. This will eliminate noise and clearly isolate the bug condition.
• I will test this MRE across multiple browsers (Firefox, Chrome/Chromium, Safari) and different environments (p5.js Web Editor, local host) to find the precise steps needed to trigger the "incoherent values."

2. Root Cause Analysis (Leveraging the Fix)

The key clue is that gridOutput = function(){} fixes the problem. This function is related to p5.js's internal rendering/pixel logic.

• I will dive into the p5.js source code (likely in src/events/mouse.js and related rendering files) to see where gridOutput is called and how its execution path affects the mouseX/mouseY update cycle.
• My hypothesis is that the failure state involves a conflict or incorrect state setting between the mouse event handler and the code that determines the canvas's drawing context or pixel density, and the gridOutput function is unintentionally resetting that conflict.

By prioritizing a reproducible test case first and then using the known workaround as a debugging anchor, I believe I can efficiently pinpoint the root cause and propose a targeted fix for the p5.js 2.x roadmap.

Please let me know if I can be assigned!

[HectorDev309]

Hello @koushikcs562

I actually forgot about this issue I pulled, it's been so long, but I do appreciate your help.

So, I have tested the issue again with the project I have fixed in one of my previous comments:

As I said before, I don't know exactly what causes the problem, so I can't provide the specific steps to achieve the issue, but I can show you one of my projects.

And the problem doesn't seen to be happening anymore.

I removed the gridOutput = function(){} from the 7th line and the int from the 72nd line and the mouseIndex variable returned consistent values this time.

I even tried upgrading to the latest 2.1.1 p5.js version or downgrading to the 1.5.0 version, and yet, the problem didn't show up.

When I started this issue, I was using Windows 7 (32-bit) (Seriously, I was) and I think I was using an older version of Firefox, not sure if this would interfere. I'm currently using Linux Mint 22.1 Cinnamon and Firefox 134.0 (64-bits).

I have no idea if this issue is affecting other users, if so I really appreciate your help.

[HectorDev309]

I'm sorry, I just remembered something.

I tried to make another project recently, and the same problem appeared again, but in a different way.

This is just a test project for a future project of mine, so there is nothing too complicated, it's just some 3D planes being positioned on a WEBGL canvas.

But, every time I execute the project it returns an error for me: "gridOutput() does not yet work in WebGL mode.", and apparently it only happens in the 1.11.11 p5.js version.

It looks like it has already been solved on the latest versions, but maybe this project I fixed could help you investigate if you like to.

[koushikcs562]

@HectorDev309 thank you for your feedback is their anything I can work on it