How to achive this effect on hover instead of on click?-CodePudding

I found this really cool WebGL fluid simulation on Github. For my project, I would need to start the animation on hover and not on mousedown.

I tried moving the code from the mousedown listener to the mousemove listener, but it didn't work. I also searched for issues on Github, but only found solutions for an older version of the code that were no longer useful.

Here are the event listeners:

canvas.addEventListener('mousedown', e => {
    let posX = scaleByPixelRatio(e.offsetX);
    let posY = scaleByPixelRatio(e.offsetY);
    let pointer = pointers.find(p => p.id == -1);
    if (pointer == null)
        pointer = new pointerPrototype();
    updatePointerDownData(pointer, -1, posX, posY);
});

canvas.addEventListener('mousemove', e => {
    let pointer = pointers[0];
    if (!pointer.down) return;
    let posX = scaleByPixelRatio(e.offsetX);
    let posY = scaleByPixelRatio(e.offsetY);
    updatePointerMoveData(pointer, posX, posY);
});

window.addEventListener('mouseup', () => {
    updatePointerUpData(pointers[0]);
});

CodePudding user response：

just Try this

    let posX = scaleByPixelRatio(e.offsetX);
    let posY = scaleByPixelRatio(e.offsetY);
    let pointer = pointers.find(p => p.id == -1);
    if (pointer == null)
        pointer = new pointerPrototype();
    updatePointerDownData(pointer, -1, posX, posY);
});```

CodePudding user response：

Use "mouseover" event

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

CodePudding user response：

You can use onm ouseover event listener i.e

object.addEventListener("mouseover", myScript);

In your case you can replace mousedown by onm ouseover

canvas.addEventListener('mousedown', e => {
    let posX = scaleByPixelRatio(e.offsetX);
    let posY = scaleByPixelRatio(e.offsetY);
    let pointer = pointers.find(p => p.id == -1);
    if (pointer == null)
        pointer = new pointerPrototype();
    updatePointerDownData(pointer, -1, posX, posY);
});

Following is link of w3 school to learn more about this eventlistner. https://www.w3schools.com/jsref/event_onmouseover.asp

Upvote if answer was helpful