Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

listen to window instead of canvas and fix mouse position for window #80

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

anasnaciri
Copy link

I know many want to use the fluid simulation as a background for their website, but only setting a canvas below the other elements doesn't seem to work perfectly, after changing the CSS so the canvas is below the other elements and is covering the whole screen, here are the changes I made so the javascript works as expected:

1st: listen to mousemove instead of onClick, to do it comment this line : //if (!pointer.down) return;

2nd : listen to window instead of canvas :
-canvas.addEventListener(mousemove, function)
+window.addEventListener(mousemove, function)

Next, on posX and posY change offsetX and offsetY by clientX and clientY:
-let posX = scaleByPixelRatio(e.offsetX);
-let posY = scaleByPixelRatio(e.offsetY);
+let posX = scaleByPixelRatio(e.clientX);
+let posY = scaleByPixelRatio(e.clientY);

Then, you will have to apply some changes to the function ### updatePointerMoveData :

change the canvas.width and height in these two lines :
-pointer.texcoordX = posX / canvas.width;
-pointer.texcoordY = 1.0 - posY / canvas.height;
it should be something like this :
pointer.texcoordX = posX / (canvas.width/2);
pointer.texcoordY = 1 - posY / (canvas.height/2);
This worked for me because I set the canvas size to 100vw and 100vh
these were all the changes I made and it worked fine for me, hope this helps

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants