I’m trying to create a simulation of book pages that turn left or right depending on where the mouse is. Kind of as if the mouse is the wind and the pages go in its direction one by one.
This is how it should look like:
I have been working on this for a couple of days already, but am stuck and don’t know how to proceed from this point on.
This is what I have so far: p5.js Web Editor
I tried different approaches, and so far using Bezier curves and angles seems to be the best way. But I can’t think of a good way to make the pages move independently and accordingly to their position so that some are more to one side or the other or higher or lower.
I tried using the indexes as a proportion of the x and y positions. The challenge is that it only works left to right or right to left. I can’t think of way for it to be symmetrical. I tried for example reversing the array depending on which side the mouse is, but couldn’t get it to work.
Any ideas that could point me in the right direction? Or if I should consider a complete different approach altogether?