17 Replies Latest reply on Nov 21, 2017 4:57 PM by marjantrajkovski

    Particle system using CreateJS?

    JonnyDL Level 1

      Im attempting to build a particle system in Animate CC. I have done others in AS2 and AS3, but I seem to be having a problem trying to get this one to work.

      I've seen some working tutorials on you Tube just using Javascript. I was hoping to piece together a javascript/createjs combination.

      Why try to use createjs? it is the only/best/easy way to pull an image from the library (as KGLAD has shown me).

       

      Im trying to build a simple snow fall, but I can't seem to get it to work, here is what I have for code. Am i on the right track or an I off my rocker! Any help would greatly be appreciated,

       

      var W = 300; var H = 250;;

      var particles = [];

      for(var i = 0; i < 50; i++)

      {

        //This will add 50 particles to the array with random positions

        particles.push(new create_particles());

      }

       

      function create_particles()

      {

        this.x= Math.random()*W;

        this.y= Math.random()*H;

        this.vx = Math.random()*20-10;

        this.vy = Math.random()*20-10;

        this.gravity = 1;

        new lib.Snow;

      }

       

      function place_particle ()

      {

        for(var t = 0; t < particles.length; t++)

        {

        stage.addChild(particles[t]);

        }

      }

      console.log (particles[2].x, particles[6].x)

      //setInterval(place_particle, 33);

        • 1. Re: Particle system using CreateJS?
          kglad Adobe Community Professional & MVP

          use:

           

          function create_particles() {

              snow = new lib.Snow;

              snow.x = Math.random() * W;

              snow.y = Math.random() * H;

              snow.vx = Math.random() * 20 - 10;

              snow.vy = Math.random() * 20 - 10;

              snow.gravity = 1;

              return snow

          }

           

          and then you have to start a loop (eg, ticker) that updates each particles member position.  you can eliminate place_particle unless you do not want to add them until some time after creating them, and just add each to the stage as it's created in create_particles.

          • 2. Re: Particle system using CreateJS?
            JonnyDL Level 1

            I was able to create an animate CC particle system for falling objects (snow, rain, Leaves) with KGLADS help. Thanks Again!

            here is the code below If anyone else wants/needs it.

            var W = 300; var H = 250;

             

            var particles = [];

            for(var i = 0; i < 50; i++)

            {

              //This will add 50 particles to the array with random positions

              particles.push(new create_particles());

            }

             

            function create_particles() {

                snow = new lib.Snow;

                snow.x = Math.random() * W;

                snow.y = Math.random() * H;

              snow.scaleX = snow.scaleY = Math.random() * .8 - .2;

              snow.vy = Math.random() * 4 + 2;

              snow.vx = Math.random() * -1 + .3;

                //snow.gravity = 1;

              stage.addChild(snow);

              createjs.Ticker

              createjs.Ticker.setInterval(30);

              createjs.Ticker.setFPS(24);

              snow.addEventListener("tick", animate)

            }

             

            function animate(event)

            {

            event.target.y +=event.target.vy

            //event.target.x +=event.target.vx

              if (event.target.y > 249)

              {

              event.target.y = -20

              //event.target.x = Math.random() * 10 - W-10;

              }

            }

            I'm still trying to make some slight enhancements.

            1. Trying to reposition the  x position of the snow ( after it is off the canvas), so it stats to falls at a different location.

            2. have some of them drift slightly.

            • 3. Re: Particle system using CreateJS?
              kglad Adobe Community Professional & MVP

              you don't need the particles array for that code.

               

              for drift you may want them all to use the same vx.

               

              for 1 and 2:

               

              var W = 300; var H = 250;

              var vx=.1-Math.random();

              for(var i = 0; i < 50; i++)

              {

              new create_particles();

              }

               

              function create_particles() {

              snow = new lib.Snow;

              snow.x = Math.random() * W;

              snow.y = Math.random() * H;

              snow.scaleX = snow.scaleY = Math.random() * .8 - .2;

              snow.vy = Math.random() * 4 + 2;

              //snow.vx = Math.random() * -1 + .3;

              //snow.gravity = 1;

              stage.addChild(snow);

              createjs.Ticker

              createjs.Ticker.setInterval(30);

              createjs.Ticker.setFPS(24);

              snow.addEventListener("tick", animate)

              }

               

              function animate(event)

              {

              event.target.y +=event.target.vy

              event.target.x +=vx

              if (event.target.y > 249||event.target.x>?||event.target.x<0?)

              {

              event.target.y = -20

              event.target.x = Math.random() * W

              }

              }

              • 4. Re: Particle system using CreateJS?
                anthonyc47215134 Level 1

                Guys, I am adding the above code to a keyframe on the main timeline in my .FLA canvas file but I can't get it to run.  I also don't see a way to attach my .FLA file to this thread so you can see what I'm doing.  The code I'm adding to the keyframe is below:

                 

                var W = 300; var H = 250;

                var vx=.1-Math.random();

                for(var i = 0; i < 50; i++)

                {

                new create_particles();

                }

                 

                function create_particles() {

                snow = new lib.Snow;

                snow.x = Math.random() * W;

                snow.y = Math.random() * H;

                snow.scaleX = snow.scaleY = Math.random() * .8 - .2;

                snow.vy = Math.random() * 4 + 2;

                //snow.vx = Math.random() * -1 + .3;

                //snow.gravity = 1;

                stage.addChild(snow);

                createjs.Ticker

                createjs.Ticker.setInterval(30);

                createjs.Ticker.setFPS(24);

                snow.addEventListener("tick", animate)

                }

                 

                function animate(event)

                {

                event.target.y +=event.target.vy

                event.target.x +=vx

                if (event.target.y > 249||event.target.x>?||event.target.x<0?)

                {

                event.target.y = -20

                event.target.x = Math.random() * W

                }

                }

                 

                 

                 

                Can someone provide an example of this code running in a FLA canvas?

                 

                Thank you so much!

                • 5. Re: Particle system using CreateJS?
                  ClayUUID Adobe Community Professional

                  You should be using the fixed code provided here:

                  z-index/layers problem

                   

                  All it needs to work is a graphic symbol in the library with its linkage name set to "Snow" (and in the fixed version, a movieclip named "myParticleEffectContainer", though if you don't care if it appears on top of everything else you could just set container to this).

                  • 6. Re: Particle system using CreateJS?
                    anthonyc47215134 Level 1

                    Just saying this is a Canvas file, not AS3.  I mentioned .FLA so I could hopefully get an example file to look at, but we are using HTML5 Canvas. 

                     

                    When I try to assign linkage to the graphic symbol, everything is grayed out.

                     

                    Can I use this code in a Canvas file?

                    • 7. Re: Particle system using CreateJS?
                      ClayUUID Adobe Community Professional

                      The code in the thread l linked to is almost exactly the same code you just posted. So yes, it's Canvas code.

                       

                      To assign a linkage name to a library symbol, double-click the empty space next to the symbol name under the "Linkage" column in the library window and type it in.

                       

                      Yes, this is a terrible, unintuitive way to expose this functionality, and hopefully it will be improved in a future release.

                      • 8. Re: Particle system using CreateJS?
                        anthonyc47215134 Level 1

                        Outstanding!  I would have never known to click the empty space under linkage, thought that would be in the properties dialogue.  Got it to work after I added a small circle in the graphic symbol.

                         

                        What's required for the clip to play across the entire stage?  I adjusted the code so it's the same size as my stage but still only playing on a portion of the stage,

                         

                        Thanks!

                        • 9. Re: Particle system using CreateJS?
                          anthonyc47215134 Level 1

                          Also, how do I get the particles to stop or fade out after a certain amount of time?

                           

                          Thank you so much for your help!

                          • 10. Re: Particle system using CreateJS?
                            Colin Holgate MVP & Adobe Community Professional

                            One approach to particles with CreateJS is to split up where the logic goes. You can put all the logic about particle lifetime into the timeline of the movieclip that is the particle, and put the logic of where the particle needs to be placed into the main timeline. Take a look at this example, which I did using Animate, that redirects people from our old site to the new one:

                             

                            FROM, the Digital Transformation Agency

                            • 11. Re: Particle system using CreateJS?
                              anthonyc47215134 Level 1

                              Hmmmm, would it be possible to provide an example of what you mean?  I would like to know how to modify the below code to fade out after a certain number of seconds:

                               

                              var W = 550; 

                              var H = 400; 

                              var vx = Math.random() * -2 + 1; 

                              var container = this.myParticleEffectContainer; 

                              for (var i = 0; i < 50; i++) { 

                                  create_particles(); 

                               

                              function create_particles() { 

                                  snow = new lib.Snow; 

                                  snow.x = Math.random() * W; 

                                  snow.y = Math.random() * H; 

                                  snow.scaleX = snow.scaleY = Math.random() * .8 - .5; 

                                  snow.vy = Math.random() * 1 + 2; 

                                  container.addChild(snow); 

                                  snow.addEventListener("tick", animSnow); 

                               

                              function animSnow(event) { 

                                  event.target.y += event.target.vy; 

                                  event.target.x += vx; 

                                  if (event.target.y > 260 || event.target.x > 345 || event.target.x < -30) { 

                                      event.target.y = -20; 

                                      event.target.x = Math.random() * W; 

                                  } 

                              • 12. Re: Particle system using CreateJS?
                                ClayUUID Adobe Community Professional

                                Just add a variable to each particle that counts how many ticks it's been visible then after a certain time start decreasing the particle's alpha.

                                • 13. Re: Particle system using CreateJS?
                                  JonnyDL Level 1

                                  I tried something different than Clay

                                  in create particle

                                  snow.fade = Math.random() * .015 -.016 ;//set gentle fade of particle

                                   

                                  in Anime snow

                                  event.target.alpha += event.target.fade; //animates the fade

                                  in the if statement

                                  event.target.alpha = 1; //returns particles alpha back to 100%

                                   

                                  This is not the greatest because some will fade out at different areas on the way down (before they are at the bottom), but I like it. Try and play around with that random numbers for the fade, you mite get a combo you like.

                                  • 14. Re: Particle system using CreateJS?
                                    vekzero Level 1

                                    I've copied this code just to see if it works and i'm getting and error on the animate function. target is coming up null. Any ideas why? or what i'm missing?

                                     

                                    function animate(event)

                                    {

                                    event.target.y +=event.target.vy

                                    event.target.x +=vx

                                    if (event.target.y > 249||event.target.x>?||event.target.x<0?)

                                    {

                                    event.target.y = -20

                                    event.target.x = Math.random() * W

                                    }

                                    }

                                    • 15. Re: Particle system using CreateJS?
                                      ClayUUID Adobe Community Professional

                                      The code in this thread works, so you've messed something up. It's impossible to know what you've messed up from the detail you've given. Try posting your FLA.

                                      • 16. Re: Particle system using CreateJS?
                                        just.emma Adobe Community Professional

                                        Do you have a movie clip for your snowflake with linkage assigned in the library?

                                        • 17. Re: Particle system using CreateJS?
                                          marjantrajkovski Level 4

                                          How to fade out and stop snowing after 30 sec, example for banner?