How can I do a 2D morphing circle in three.js that moves in a liquid way?

Question

I have a mesh which is a circle geometry. I would like to animate it like in this example from two.js, a 2D library: https://two.js.org/examples/physics.html

For now I look at this example and put the camera on the top of the shape but I'm sure there's a more simple way for my needs: https://threejs.org/examples/#webgl_gpgpu_water

Does anyone know how I can do that?

Answer 1

You simply need to shift the vertices positions according some sin() or cos() value according X and Y coordinates and a incremental phase (time) to animate. your vertex shader could include something like this, where phase is incrementing with time (typically, a clock).

glPosition.x = vertex.x + sin((phase*frequency) + vertex.y) * amplitude;
glPosition.y = vertex.y + sin((phase*frequency) + vertex.x) * amplitude;

The basic concept is here, but you have to adapt the components yourself by testing the result. You probably should adjust frequency, amplitude, adding some more factors to add asymetry and randomness.