Detect mouse position in particles

Questions
, ,
1

Any way to detect the position of the mouse in this set of particles and that each particle moves on its z axis?

This is what I have

https://codepen.io/AlainBarrios/pen/PvazpL?editors=0010

1 Like
2

Looks like you are basing it on this project?

Do you want to do something different to the way the particles move there, or are you trying to set up the same movement?

4

Yes, but I’m trying to see something different to see how the mouse works.

How could I do it to shader?

5

Hey Alain, I’m late to the party, but this is an example how you could displace particles by calculating it on the GPU. Here a vertex shader is getting some information as uniforms. It will create a ray or line segment between a start and endpoint (in this case between camera and a target point). This will displace vertexes around a given radius of that line segment.

In the given shader, there was the intention to make something like a laser beam through an object of particles where we would get two different radii, that’s why there is a perspective correction, to make the second radius perspectively larger.

The target point could be a plane that you placed behind the objects and a raycast on that layer. It could be positioned parallel to the perspective camera.

uniform float u_time;

uniform bool u_perspectiveCorrection;
uniform vec3 u_cameraPosition;
uniform vec3 u_targetPosition;
uniform vec3 u_objectPosition;
uniform float u_objectRadius;
uniform float u_interactionRadius;

out float vDist;
out float vBoostIntensity;

void main() {
    vec3 pos = position + u_time * 0.2;

    // Line segment collision calculations using noise-displaced position
    vec3 lineVec = u_targetPosition - u_cameraPosition;
    vec3 pointToPos = pos - u_cameraPosition;
    float perspectiveFactor;

    float t = dot(pointToPos, lineVec) / dot(lineVec, lineVec);
    t = clamp(t, 0.0, 1.0);
    
    if (u_perspectiveCorrection) {
        float z_entry = length(u_objectPosition - u_cameraPosition) - u_objectRadius;
        float z_exit = length(u_targetPosition - u_cameraPosition) + u_objectRadius;
        float z_vertex = length(pos - u_cameraPosition);
        perspectiveFactor = z_entry / z_vertex;
    } else {
        perspectiveFactor = 1.0;
    }

    vec3 closestPointOnLine = u_cameraPosition + t * lineVec;
    vec3 seg = pos - closestPointOnLine;
    float distToLine = length(seg) * perspectiveFactor;
    float force = smoothstep(u_interactionRadius, 0.0, distToLine);
    
    // Pass distance to the fragment shader for color adjustments
    vDist = distToLine;
    
    // Set a flag if the particle is influenced by the line segment
    vBoostIntensity = float(distToLine < u_interactionRadius);
    
    // Final position considering both noise and line segment influence
    vec3 finalPosition = pos + normalize(seg) * force;

    // Output final position
    gl_Position = projectionMatrix * modelViewMatrix * vec4(finalPosition, 1.0);
    gl_PointSize = 2.0;
}

I will have that effect on my unfinished website for a while.
https://benedict.lang-familie.de/