PavelDoGreat
Remove need to click in to initiate
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
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.
@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?
@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/[email protected]/dist/webgl-fluid.umd.min.js"></script>
<script>
window['webgl-fluid'].default(document.querySelector('canvas'))
</script>
</body>
</html>
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
@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.
@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 https://github.com/cloydlau/webgl-fluid/issues/2
@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.
Thanks, I posted before I realized this was a different file. My bad.