User Interaction in WebGL

Keith Peters
InstructorKeith Peters
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

In this lesson we accomplish some simple user interaction with animated 3D vertices.

[00:00] We'll start here with the code we created in lesson "Animating Vertices." This creates 5,000 vertices and animates them by changing their position slightly within each frame. Let's add a bit of interaction to it. I'll add a mouseX and mouseY variable up at the top here, and set them both to 0Then I'll add an event listener to canvas listening for the mouseMove event. Now remember that our vertices are in a coordinate system that goes from -1 to +1 on both axes, while the canvas goes from 0to 600 on each axis.

[00:34] So we need to convert our mouse position to the webgl coordinates. I'm going to paste a function in here called map. This takes a value plus a source and destination range, and maps that value from the source range to the destination range. Then I'll say mouseX = map(event, clientX, 0canvas.width -1, 1) source range is the0 to canvas width, and the destination range is -1 to +1 of the webgl x-axis. For mouseY I'll say map(event, clientY, 0canvas.height,1,-1).

[01:15] Note that I reversed the signs in the destination range, so that 0of the canvas Y, the top of the canvas, maps to 1 in the webgl coordinates. Now down in the draw function as we loop through each vertex, I'm going to find its distance to mouseX and mouseY. I'll do that by finding the distance on the x-axis, and then on the y-axis, squaring those, and adding them, and taking the square root, the Pythagorean theorem. Then if the distance is less than a certain amount, say 02, I'll do something special, else, I'll do the random shake that we've been doing.

[01:54] Now the special thing I want to do here is move the X and Y of the affected vertices out away from the mouse a certain distance, again, that 02. To do that I'll reset vertices i and vertices i +1, the x and y coordinates. I'm going to make x, mouseX + dx * distance * 02, and y, mouseY + dy / distance * 02. This is just a tricky shortcut for some more complex trigonometry, not really important for the purpose of this lesson. That's it, let's test it.

[02:34] Now when we move the mouse, any vertices within that 02 distance from the mouse get pushed out away from the mouse. Vertices further away continue to shake around just like before, so it's like you're pushing around grains of sand with an invisible finger, pretty neat effect. There's lots of places you could take this very simple example. I'm just messing around with the point size and color. Try some other changes and see what they do.

~ 32 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today