Jump to content
Search Community

Creating particles using Webgl & Greensock

Buntafujiwaaa 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

Hi,

Recently, I'm trying to explore slightly more advanced animations. I'm scoured the web, forums for any examples, but it seems I'm stuck. Wondering if anyone can point me in some directions.

I'm trying to achieve an similar effect like this ->

https://looi.co/
 

But, probably not as complicated as this site.  I believed there's certain level of 'voodoo' in this lol.

The example above is using Three.js, nt sure if greensock is being used.

I'm looking to do some interactions, and gravity in my visualisations.

See, my attached design ->
So the letter in the center will be like a container where the particles will not move in or interact. And when I move my mouse on the screen there will be a like a repelling effect on the particles, like the website above.

So in my head right now, my train of thought is like
1) Generate the particles moving inside the viewport (bouncing when reach the end or something)
2) Then animate the particles to move using Math.random or sin or cos (Not sure about this, I researched on sin and cos to make your motions looks more natural yet random, but haven't found an article to clearly explain how it works, what kind of maths formula should i be using?)
3) When the particles reached the letter, it bounces off (I assume you have to push it away with a if/else statement? So do I implement a collision library or something ? )

I'm still looking into p5.js (which is based on processing) and pixi.js (which is frequently recommend in this forum). But I'm unsure if pixi.js is to be compare similarly to p5.js. I guess I will definitely need to use webgl since there're tons of particles involved.

particles.jpg.8b434fe3a03150759cabfcd2f30bfe59.jpg

The pixi examples website seems to be extremely basic. Are there websites that explores more complicated stuffs like http://openprocessing.org/

Link to comment
Share on other sites

It seems you have your work cut out for you with this one. I think your best bet is to explore the various Three.js demos on CodePen as there are many:

 

https://codepen.io/search?q=three.js&limit=all&depth=everything&show_forks=false

 

GSAP will run super fast with any of the top canvas-rendering libraries like Three.js or Pixi.js.

 

When you start getting into collision detection and responding to mouse movement, most people would probably look for a physics library that would handle how elements react to walls, gravity, wind, resistance etc.

 

A tweening engine like GSAP is much better suited for animations that have pre-determined start and end values, or that need precise sequencing with full playback controls (play, pause, reverse, speed up, slow down, etc).

 

With the right amount ingenuity and the ModifiersPlugin you can get a GSAP tween to do pretty much whatever you want. Check out the demo from @OSUblake below

See the Pen qNPBpJ by osublake (@osublake) on CodePen

Also check out the rest of the demos in his ModifiersPlugin collection as they show some very interesting (and somewhat unconventional) uses of GSAP to generate highly dynamic animations: https://codepen.io/collection/AWxOyk/

  • Like 4
Link to comment
Share on other sites

Hi @Buntafujiwaaa

 

Let me clear up some things for you. 

 

First, while p5.js does support WebGL, it's focused more on working with vectors. Nothing wrong that. It is a very cool library, but PixiJS, Three.js, or Babylon.js would probably be a better fit for what you're trying to do.

 

About the particle animation... well, you're way off track. You're thinking about how it would work in JavaScript, but you can't animate millions of particles like that on the CPU using JavaScript. That is done with shaders on the GPU. A shader is small program written in GLSL.

 

Don't know what I'm talking about?  Look at code in the HTML panel in this demo.

 

See the Pen bWrpZy?editors=1000 by osublake (@osublake) on CodePen

 

If that looks complicated, you're not alone. But don't worry. You really don't have to mess with that code if you don't want to. Somebody else has already written what you're trying to do, you just need to go and find it. 

 

I did not write that fluid marble shader running in the background. I found it on some site like GLSL Sandbox or ShaderToy. All I did was copy and paste into CodePen, wrapped it up in a Pixi filter class, and off it went.

 

Phaser.io is a game engine based on PixiJS, and if you look at the code for most of their filters, you'll notice that most of them are copied from one those two sites.

http://phaser.io/examples/v2/category/filters

 

And here's the demo page for filters in Pixi.

http://pixijs.github.io/pixi-filters/examples/

 

So does that help clear some things up for you?

  • Like 4
Link to comment
Share on other sites

Have you ever checked out Christmas Experiments? :-o

http://christmasexperiments.com/experiments

 

Most of the stuff on there uses PixiJS or Three.js. Same with Chrome Experiments.

https://experiments.withgoogle.com/chrome

 

And of course the gallery page for each library.

https://threejs.org

http://www.pixijs.com/gallery

 

And Twitter

https://twitter.com/search?q=%23pixijs&src=typd

https://twitter.com/search?q=%23threejs&src=tyah

  • Like 4
Link to comment
Share on other sites

  • 4 weeks later...

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...