Search In
• More options...
Find results that contain...
Find results in...

# Each line should go slower than the previous line of balls, so I get a water wave-effect like threejs particles waving

## Recommended Posts

How can I get each line of balls moving a bit slower than the left line, meaning that line 1 goes faster than line 2, and line 2 goes bit faster than line 3 and so on. Moreover, how can I get the reflection of the five line next to the current one. So line 1 till 5 are now working in attached codepen url, but i also want line 6 till 10 , but then moving the opposite direction of the current first  five lines, instead of waving to the left, line 5-10 should be now waving to the right. Please keep the code DRY.

See the Pen ejYZXv?editors=1011 by chichichi (@chichichi) on CodePen

##### Share on other sites

Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate.

See the Pen jpOQzB?editors=1011 by sgorneau (@sgorneau) on CodePen

• 3
##### Share on other sites

@chiho this is the same question you asked here and Blake already invested time trying to help.

It becomes incredibly difficult to offer assistance if we see posts being duplicated and deleted.

• 1
##### Share on other sites

28 minutes ago, Carl said:

@chiho this is the same question you asked here and Blake already invested time trying to help.

Not only that, but the source code of that three.js demo does the same thing I described. Sine.easeInOut is Math.sin(). The 3d perspective isn't important. Look at how the init and render functions work.

For a parallax effect, you can scale your values by some ratio, like in this post. I'm guessing @Shaun Gorneau did something similar.

• 4
##### Share on other sites

1 hour ago, Shaun Gorneau said:

Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate.

See the Pen jpOQzB?editors=1011 by sgorneau (@sgorneau) on CodePen

I meant the y-line instead of the x-line lol