PavelDoGreat/WebGL-Fluid-Simulation

Remove need to click in to initiate

cduncalfe opened this issue · 8 comments

cduncalfe commented

I tried the below and it turns the screen black. I've made it work so that it stays permanent after first click. How can i make it permanent from the beginning?

this line, move it to the bottom of a function and change it to pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;

You will need to change this function:

function updatePointerMoveData (pointer, posX, posY) {
pointer.moved = pointer.down;
pointer.prevTexcoordX = pointer.texcoordX;
pointer.prevTexcoordY = pointer.texcoordY;
pointer.texcoordX = posX / canvas.width;
pointer.texcoordY = 1.0 - posY / canvas.height;
pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
}

to this:

function updatePointerMoveData (pointer, posX, posY) {
pointer.prevTexcoordX = pointer.texcoordX;
pointer.prevTexcoordY = pointer.texcoordY;
pointer.texcoordX = posX / canvas.width;
pointer.texcoordY = 1.0 - posY / canvas.height;
pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
}

Here's my code:
script.txt

cloydlau commented

I added ES module for this amazing project, it's Hover to activate by default, can also be Click:

import WebglFluid from 'webgl-fluid'

WebglFluid(document.querySelector('canvas'), {
  TRIGGER: 'hover', // Can be change to 'click'
})

I added a delay for listener so the black screen didn't occur for now.

rckychen commented

@cloydlau Hi, I am also having the issue where I want this to work right at the beginning rather than clicking one time first. Can you let me know how your ES module works, and how I can change it for the JS?

cloydlau commented

@rckychen Hello, here's the example if you mean using it directly in the browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  canvas {
      width: 100vw;
      height: 100vh;
  }
  </style>
</head>
<body>
<canvas/>
<script src="https://unpkg.com/webgl-fluid@0.0.4/dist/webgl-fluid.umd.min.js"></script>
<script>
window['webgl-fluid'].default(document.querySelector('canvas'))
</script>
</body>
</html>
rckychen commented

Hi sorry, I'm new to web dev, so am a little confused. To allow the effect to start immediately, do I need to change the script.txt or something else? @cloydlau

cloydlau commented

@rckychen It does immediately start by default, you can check the document here.

ChrisCalabrese commented

@rckychen It does immediately start by default, you can check the document here.

No it does not, this TRIGGER line is not in the script.js file by default: "TRIGGER: 'hover', // Can be change to 'click'" and when I add it nothing happens.

cloydlau commented

@rckychen It does immediately start by default, you can check the document here.

No it does not, this TRIGGER line is not in the script.js file by default: "TRIGGER: 'hover', // Can be change to 'click'" and when I add it nothing happens.

see cloydlau/webgl-fluid#2

ChrisCalabrese commented

@rckychen It does immediately start by default, you can check the document here.

No it does not, this TRIGGER line is not in the script.js file by default: "TRIGGER: 'hover', // Can be change to 'click'" and when I add it nothing happens.

see cloydlau/webgl-fluid#2

Thanks, I posted before I realized this was a different file. My bad.