Particle system

[dada78]

Hi guys,

I found this particle emitter which I like (see codepen reference), but would like to use GSAP in order to accomplish a similar result. I am just not sure as to how to convert this. Would you be able to have a very simple starter example for me to add on to? I would like to create a particle generator that would churn all these particles (kind of like a tornado) (let's say dots and rectangles for example) with perspective applied just as in the example using the CSS plug-in and TimelineMax. Or would some other plug-in be necessary as well in order to accomplish this? Thanks for all your great tools and examples!

See the Pen zxBnd by timohausmann (@timohausmann) on CodePen

[Carl]

I think this is a pretty close replica using GSAP

 

http://codepen.io/GreenSock/pen/LVzxzR?editors=001

 

The basic idea is that you use a loop to generate particles and create animations for those particles. 

Each particle is used in a tween that repeats infinitely, starts at a random time and has a random repeatDelay.

Each particle's tween is placed in a timeline.

The timeline also contains a single tween that rotates the emitter (container for all the particles) around and around in 3D space.

 

The CSS version used a technique that repeatedly created and removed new particles. 

I believe my way to be slightly more efficient as the particles are only created once, but since the start times and repeatDelays are random it makes the entire effect appear to be changing all the time. 

 

here are some other demos that use similar techniques

http://codepen.io/GreenSock/pen/azXjBJ

http://codepen.io/GreenSock/pen/a97959d5889d5ceb14840e0fb425f8a1

http://codepen.io/GreenSock/pen/zrmiG

[dada78]

That is exactly what I needed thanks so much Carl! I am however having trouble converting this to plain JS ( I am not a JS developer), but was hoping this could be accomplished in plain JS. 

 

I tried the following, but obviously this is not working..

//var $emitter = $('#emitter');
var emitter = document.querySelector("#emitter");
var particle = document.querySelectorAll(".particle");
var tl = new TimelineMax(); 

//https://gist.github.com/timohausmann/4997906
Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}

for (var i = 0; i < 300; i++){
  var x = Math.randMinMax(-200, 200),
      y = Math.randMinMax(-200, 50),
      z = Math.randMinMax(-200, 200),
      degree = Math.randMinMax(0, 360),
      
     // $particle = $('<div class="particle" />'), //create a new particle
      color = 'hsla(' + Math.randMinMax(200, 320) + ', 80%, 60%, 1)';
      //even particles will be larger circles
      if(i%2 == 0){
        console.log("i = " + i%2)
        TweenLite.set(particle, {borderRadius:"50%", width:10, height:10})
      }
      
      
      particle.css('background', color);  //change color          
      emitter.append(particle);  //add it to emitter
  
  
  //for each particle insert a repeating tween into a timeline with a random duration, random repeatDelay at a random time
  tl.to(particle, Math.randMinMax(1, 2), {x:x, y:y, z:z, opacity:0, rotationX:degree, repeat:-1, repeatDelay:Math.randMinMax(0, 2)}, Math.randMinMax(0, 2))
}
//rotate the emitter in 3D space. remove next line to see how it works without the spin
tl.fromTo(emitter, 4, {rotationY:0, rotationZ:-180}, {rotationY:360, rotationZ:180, ease:Linear.easeNone, repeat:-1}, 0)

 

Any pointers are appreciated! Thanks!

[Diaco]

Hi dada78 

 

try this :

 

/** forked from this pen : 

See the Pen LVzxzR by GreenSock (@GreenSock) on CodePen

**/ var $emitter = document.getElementById('emitter') , tl = new TimelineLite();  /** https://gist.github.com/timohausmann/4997906 **/ Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t); return a&&(r=Math.round(r)),r}; for (var i = 0; i < 40; i++){   var x=Math.randMinMax(-200, 200) , y=Math.randMinMax(-200, 50),       z=Math.randMinMax(-200, 200) , degree=Math.randMinMax(0, 360),       $particle = document.createElement("div"), color='hsla('+Math.randMinMax(200, 320)+',80%,60%,1)';       if(i%2 == 0){ TweenLite.set($particle, {borderRadius:"50%", width:20, height:20})};       $particle.className="particle";       TweenLite.set($particle,{backgroundColor:color});       $emitter.appendChild( $particle );   tl.to($particle, Math.randMinMax(1, 2), {x:x, y:y, z:z, opacity:0, rotationX:degree,repeat:-1, repeatDelay:Math.randMinMax(0, 2)},Math.randMinMax(0,2)) }; tl.fromTo($emitter, 4, {rotationY:0, rotationZ:-180}, {rotationY:360, rotationZ:180, ease:Linear.easeNone, repeat:-1},0); document.addEventListener("click",function(){tl.paused(!tl.paused())});

[jimeast]

I found a vortex sort of thing you might like.  

See the Pen Kpmzwx by jimeast (@jimeast) on CodePen