I am attempting to recreate a fascinating effect that I found on this Dribbble link:
My goal is to animate the vertices of a plane in a similar fashion to what is showcased in the provided link. I understand that this effect is achieved through sine wave propagation, but I am struggling with commencing the movement from the central point of the plane. Currently, my code looks something like this:
(function drawFrame(ts){
window.requestAnimationFrame(drawFrame);
var vLength = plane.geometry.vertices.length;
for (var i = 0; i < vLength; i++) {
var v = plane.geometry.vertices[i];
v.z = Math.sin(ts / 500 + (v.x * (vLength / 2)) * (v.y / (vLength / 2))) * 3 + 5;
}
Although it somewhat works, I've noticed that in the top left and bottom right corners, the movement is directed inward towards the center of the plane instead of outward as intended. The other two corners are behaving exactly as desired.
If you're curious to see what I have so far, here's a link to my current progress: http://codepen.io/gbnikolov/pen/QwjGPg
I welcome all suggestions and ideas on how to improve this animation!