Jump to content
Search Community

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

chiho test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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.

Demo - https://threejs.org/examples/#canvas_particles_waves

Source - https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html

 

 

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

 

 

 

  • Like 4
Link to comment
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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...