In the following jsfiddle, I made a slider (at the bottom of the screen) that lets you move the displayed images back and forth along the z-axis:
While I purposely positioned all the images a different amount of distance from the (0, 0, 0) point, what I’d like to do is have them all converge on and arrive at this (0, 0, 0) point at the same time.
Meaning that as you slide the Slider one way all the images will get further away from the CENTER point, and as you slide it the opposite way they’ll all get closer and closer until they all arrive there at the same time.
My problem is that since they’re all positioned a different amount of distance from this CENTER point, it means they all have to travel at different rates so as to all converge at the same time – and I have no idea how to make this happen.
Furthermore, the larger scope of the project will have scenarios in which I’ll have to handle up to 7 different images. Which means that in one instance 5 images may appear all at once, in another 3 images will appear, or 6 images, or 2 - all the way up to 7 images.
So what I need is some sort of formula (I guess) that will:
- figure out the initial distributed positions of the images, as a function of how many images there might be
- figure out the rates or amount of distance they’d all have to travel so as to arrive at the Center point at the same time.
Would really any tips or guidance in trying to make this happen.
