create multiple stream lines of particles

[Krishna_khandelwal]

I am creating particle based animation. in the code (code pen) particles are generating from a emitter & falling anywhere randomly. I want to create multiple streams or lines of particles colour wise (like blue particles should be in a line & red in a line). even the animation has speed issue, I want to create background animation like this website "https://frontierwithin.thorne.com/"

any help will be very useful.

See the Pen RwrWNgm by lakhank143 (@lakhank143) on CodePen

[ZachSaucier]

Hey Krishna and welcome to the GreenSock forums.

 

5 hours ago, Krishna_khandelwal said:

I want to create background animation like this website "https://frontierwithin.thorne.com/"

That site uses WebGL (not just canvas) to create the particles. I think you'd learn a lot from these articles: 

• https://medium.com/active-theory/thorne-the-frontier-within-7c97f8a49719
• https://velasquezdaniel.com/blog/rendering-100k-spheres-instantianing-and-draw-calls/

 

[Krishna_khandelwal]

38 minutes ago, ZachSaucier said:

Hey Krishna and welcome to the GreenSock forums.

 

That site uses WebGL (not just canvas) to create the particles. I think you'd learn a lot from these articles: 

• https://medium.com/active-theory/thorne-the-frontier-within-7c97f8a49719
• https://velasquezdaniel.com/blog/rendering-100k-spheres-instantianing-and-draw-calls/

 

thank you for references, 
but I want to make multiple streams or lines of particles colour wise. means all blue particles should display in a line & all red should be in one line. even the particles are generating from emitter in high speed. how could I achieve these two things using the existing code.

I have tried but not able to achieve.

[ZachSaucier]

Unfortunately we don't have the capacity to help with non-GSAP related requests like this. If you have any GSAP-specific questions please ask and we're happy to help