00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Unlock content 🔓

To get access to 91 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 👍

53%

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
39.

Particles Cursor Animation

Difficulty Hard

Introduction 00:00

In this lesson, we are going to learn how to create a cool cursor animation on a picture made of particles:

It’s the opportunity to learn how to use a 2D canvas as a texture that we send and use in a custom shader to displace the particles.

Setup 00:50

The starter already contains particles ready to be enhanced and animated:

  • A grid of particles
  • A ShaderMaterial using the vertex and fragment from the src/shaders/particles/ folder
  • The vite-plugin-glsl dependency to handle GLSL files
  • OrbitControls to rotate around
  • A TextureLoader instance

The particle size is already handled in the vertex.glsl with perspective and relative to the height of the render, as seen in previous lessons:

Default particles are quite big so that we can appreciate what we do without having to zoom every time we reload.

Once we are happy with the look of the particles, we are going to make them smaller and add a lot more.

Particles 03:03

We are going to use one of the pictures you can find in the static/ folder and make that picture appear on the particles.

We want the particles to be discs instead of squares. We want their size to depend on the brightness of the picture and we also want to modify the color of the particles to match the picture.

Discs

Let’s start with the shape of the particles and make them look like discs. This time, we don’t want a fancy pattern, just perfect discs.

First, we want the UV coordinates inside the particle, and since they are points, we can use the gl_PointCoord.

In fragment.glsl save gl_PointCoord as a vec2 uv variable:

void main()
{
    vec2 uv = gl_PointCoord;
    
    // ...
}

Send it to the gl_FragColor as the first two parameters, out of curiosity:

void main()
{
    vec2 uv = gl_PointCoord;

    gl_FragColor = vec4(uv, 1.0, 1.0);
    // ...
}

To draw a disc, we need the distance of the fragment to the center of the particle and we can do that using the distance function as seen in previous lessons.

Create a float distanceToCenter variable and save the distance between the uv and vec2(0.5):

void main()
{
    vec2 uv = gl_PointCoord;
    float distanceToCenter = distance(uv, vec2(0.5));

    // ...
}

Send it to the gl_FragColor as the first 3 values out of curiosity:

void main()
{
    vec2 uv = gl_PointCoord;
    float distanceToCenter = distance(uv, vec2(0.5));

    gl_FragColor = vec4(distanceToCenter, distanceToCenter, distanceToCenter, 1.0);
    // ...
}

Want to learn more?

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • Start coding
  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

If you get stuck and need help, join the members-only Discord server:

Discord