17 Replies Latest reply on Dec 4, 2012 11:33 AM by Dam4222

    Particle Systems?

    Dam4222 Level 1

      Hi,

       

      Does anyone have ideas on how to create a particle systme in edge?

       

      Adam

        • 1. Re: Particle Systems?
          KlUMZeE_Jeff Level 1

          As far as I know you can't create particle systems in Edge. You could possibly create one in After Effects or another program, render it out as a PNG sequence, and the piece it together in Edge Animate. If there is a way to do it natively in EA, I've never seen it.

          • 2. Re: Particle Systems?
            joel_pau Level 5

            Hi,

             

            http://cssdeck.com provides tutorials with code.

            You can adapt to EA 1.0

            I tried. It works fine on EA 1.0

            I can send you my file.

            • 3. Re: Particle Systems?
              Dam4222 Level 1

              Hey Joel,

               

              For those of us who dont know how to code but can read it and tweak it, can you post an example of a project that intergrates the a simple particle system that we can use as a reference? Thanks for your help.

               

              Adam

              • 4. Re: Particle Systems?
                TimJaramillo Level 4

                Hi Adam,

                 

                Here is a quick example of a mouse trail particle system. Move your mouse or finger acoss the stage and particles will trail behind your mouse. I referenced some code from joel_pau (http://forums.adobe.com/message/4696544) to spawn and remove the symbols (very important to make sure we keep memory low).

                 

                I haven't fully tested on touch devices, but I know it runs very poorly on iPhone4, it should run smoother on newer touch devices.

                 

                Example:

                www.timjaramillo.com/code/edge/mouse_trail/test.html

                 

                Source:

                www.timjaramillo.com/code/edge/_source/mouse_trail.zip

                • 5. Re: Particle Systems?
                  Dam4222 Level 1

                  Hey Tim,

                   

                  This is great, I am going to play around.

                   

                  Adam

                  • 6. Re: Particle Systems?
                    Gil1 Level 1

                    Tim,

                     

                    Nice example. One reason is not behaving well on some devices is that your are never calling the removeParticle function.

                     

                    I added a sym.timer2 var and I call it from the startTimer function

                     

                    sym.startTimer = function(){

                              sym.timer = setInterval(sym.createParticle, sym.spawnFrequency);

                              sym.timer2 = setInterval(sym.removeParticle, sym.spawnFrequency*2);

                    };

                     

                    Changing the multiplier allows for some variations on the look of the trail.

                    • 7. Re: Particle Systems?
                      TimJaramillo Level 4

                      Hi Gil1, that is incorrect sir

                       

                      Per the commented code, "removeParticle " is being called at the Timeline.complete event of each particle's animation timeline.

                       

                      In the "removeParticle" function, there is a console.log commented out, which shows how many children are present. I've tested this, and the number of symbols stays constant at 20, so in fact the symbols are being removed.

                       

                      Thanks though!

                      • 8. Re: Particle Systems?
                        Gil1 Level 1

                        Tim,

                         

                        You are correct. I missed that piece of the code.

                        • 9. Re: Particle Systems?
                          Dam4222 Level 1

                          Hey Guys,

                           

                          I wanted to give you an update regarding the particle system... Tim, I played around with your Test.An and tried some different things with switching out the particle type. Came up with this which I thought was kinda cool.

                           

                          http://dl.dropbox.com/u/9159616/mouse_trail.zip

                           

                          Three questions: 1) Can I make it so that the particle on the top left does not animate when I start the composition? 2) Is it possible to only have particles emit if the mouse is moved and if the mouse is stagnant no particles will emit? 3) do you guys have any tips on how to control the emission of those particles. Making them emit more frequently, less frequently, more spread, less spread?

                           

                          One last thing, I tried to intergrate this into my own composition and I cant get it to work... see below:

                           

                          http://dl.dropbox.com/u/9159616/Lab%20Reach%20Calculator.zip

                           

                          Thanks for your help!

                           

                          Adam

                          • 10. Re: Particle Systems?
                            DigitalFuel Level 2

                            Hi Joel and everyone

                             

                            I am tring to get a cssdesk js working in edge animate but it will not work and I am not sure what I am doing wrong.

                             

                            http://cssdeck.com/labs/poeczes5 I patsed the code into the stage in document.compositionReady but no go when previewing it. Code work fine if I just use dreamweaver and upload it but nothing in edge. What do I need to do to get this working in egde animate.

                             

                            Cheers Daniel

                            • 11. Re: Particle Systems?
                              joel_pau Level 5

                              Hi,

                               

                              You have to add canvas tag on Stage (or within a rectangle).

                              Here is a code adding canvas tag on Stage.

                               

                               

                                     //$('<canvas id="canvas"></canvas>').appendTo(sym.$("Rectangle"));

                                       $('<canvas id="canvas"></canvas>').appendTo("#Stage");

                               

                                       // RequestAnimFrame: a browser API for getting smooth animations

                                       window.requestAnimFrame = (function(){

                                         return  window.requestAnimationFrame        ||

                                                window.webkitRequestAnimationFrame ||

                                                window.mozRequestAnimationFrame    ||

                                                window.oRequestAnimationFrame        ||

                                                window.msRequestAnimationFrame      || 

                                                function( callback ){ window.setTimeout(callback, 1000 / 60); };

                                       })();

                               

                                       //Flocking Behaviour

                                       var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");

                               

                                       // Set the canvas width and height to occupy full Stage.

                                       var w = sym.$("Stage").innerWidth(), h = sym.$("Stage").innerHeight();

                                       canvas.width = w;

                                       canvas.height = h;

                               

                                       /* Set the canvas width and height to occupy full Rectangle.

                                       var w = sym.$("Rectangle").innerWidth(), h = sym.$("Rectangle").innerHeight();

                                       canvas.width = w;

                                       canvas.height = h;

                                       */

                              • 12. Re: Particle Systems?
                                DigitalFuel Level 2

                                Wow Joel, thanks for the fast reply that works great.

                                 

                                I now see how to do it, Thanks

                                 

                                Cheers Daniel

                                • 13. Re: Particle Systems?
                                  Santos49 Level 1

                                  Hi, DigitalFuel.

                                  Can you share how you do that?

                                  • 14. Re: Particle Systems?
                                    DigitalFuel Level 2

                                    Hi Santos

                                     

                                    As Joel said you just need to add the canvas to the stage.

                                     

                                    // Add canvas to stage

                                    //$('<canvas id="canvas"></canvas>').appendTo(sym.$("Rectangle")); 

                                             $('<canvas id="canvas"></canvas>').appendTo("#Stage");

                                     

                                    this is usually done in the html

                                     

                                    Then Joel sets this:

                                    New

                                    // Set the canvas width and height to occupy full Stage.

                                    var w = sym.$("Stage").innerWidth(), h = sym.$("Stage").innerHeight();

                                     

                                    OLD code looks like this

                                    (var w = window.innerWidth,
                                      h = window.innerHeight;)

                                     

                                    So just a change from definining window which we don't have to defining stage size from edge what we do have.

                                     

                                    look at the link http://cssdeck.com/labs/poeczes5 and see what is different from one application to the other. cssdesk has html and css code but here they are not required as the js is placed straight on the stage in edge. And the rest is done in the edge ui.

                                     

                                    Go to code window in egde, add the js with alters as above to stage with document.compositionReady this just start it when the page load basically.

                                     

                                    hope this helps.

                                    Daniel

                                    • 15. Re: Particle Systems?
                                      Gil1 Level 1

                                      That is cool.

                                       

                                      Changing the size of the particles to 4 (any number can be) and by modifying

                                      function paintCanvas() {

                                        ctx.fillStyle = "white";

                                                ctx.fillRect(0, 0, w, h);

                                      }

                                       

                                      to

                                      function paintCanvas() {

                                        ctx.fillStyle = "rgba(255,255,255,0.3)";

                                                ctx.fillRect(0, 0, w, h);

                                      }

                                       

                                      the particles leave a trail. 0.3 is the alpha value. The closer to 1 less trailing, the closer to 0 more trailing.

                                       

                                      Another easy change is to set the color of each particle to a random value.

                                      Gilbert

                                      • 16. Re: Particle Systems?
                                        Santos49 Level 1

                                        Hi Daniel

                                        Thank you so much for your help. It works.

                                         

                                        “cssdesk has html and css code but here they are not required as the js is placed straight on the stage in edge.”

                                         

                                        I was messing with both of them.

                                        • 17. Re: Particle Systems?
                                          Dam4222 Level 1

                                          Hey Guys,

                                           

                                          This is a great start. I am having trouble getting other codes from CSSdeck to work. Have you guys successfully implemented anything else?

                                           

                                          Adam