19 Replies Latest reply on Sep 30, 2015 10:59 PM by JackG

    Rain Effect

    Dam4222 Level 1

      I am trying to retrofit Tim Jaramillo's solution from this thread: http://forums.adobe.com/message/5139169#5139169 for something I am working on. I think that I am close I just need a little extra help.

       

      Basically I am trying to achieve a Rain Effect. I have created a symbol that is a "Rain Drop" I would like to have random Rain Drops fall from the top of the screen to the bottom, but they should maintain there angle. See my project below and you can see what I mean:

       

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

       

      I would like for it to looks something like this: http://rain-demo.heroku.com/

       

      I would like to either initiate this on CompositionReady or on a Button Click.

       

      Adam

        • 1. Re: Rain Effect
          TimJaramillo Level 4

          Hey Adam, here's a rain particle system I cooked up real quick. I used GSAP because it's way more awesome and easy to work with than jQuery animate.

           

          Example:

          www.timjaramillo.com/code/edge/rain_effect

           

          Source:

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

           

          There is a symbol called "particleHolder" on Stage, and a symbol called "RainDrop" in the library.

           

           

           

          Code on Stage.compositionReady:

           

           

           

          // vars -------------------------------------------

           

          var particleCount = 50;

          var angleOffset = -400;// subtract this from rain xSpawnPosition, tween to that position, for angled motion

          var min_spawnXPosition = 0;

          var max_spawnXPosition = $('#Stage').width();

          var yPos_start = -123;

          var yPos_end = $('#Stage').height() + 100;

          var min_tweenTime = 1;

          var max_tweenTime = 3;

          var min_tweenDelay = .2;

          var max_tweenDelay = .7;

           

          var arrayParticles = [];// Edge

          var arrayParticleElements = [];// for CSS

           

           

           

          // load GSAP -------------------------------------------

           

          yepnope({

                    nope:[

                              'libs/gsap/TweenMax.min.js',

                              'libs/gsap/easing/EasePack.min.js'

                    ],

                    complete: init

          });

           

           

           

           

          // funcs -------------------------------------------

           

          function init(){

           

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

                              // add dynamic particles to stage

                              var particle = sym.createChildSymbol("RainDrop", "particleHolder");

                              var particleElement = particle.getSymbolElement();

           

                              tweenParticle(particleElement);

           

                              arrayParticles.push(particle);

                              arrayParticleElements.push(particleElement);

                    }

          }

           

           

          function tweenParticle( particleElement ){

                    // position

                    var xPos_start = getRandomInRangeRounded(min_spawnXPosition, max_spawnXPosition);

                    particleElement.css({"position":"absolute", "left":xPos_start+"px", "top":yPos_start+"px"});

           

                    // animate

                    var xPos_end = xPos_start + angleOffset;

                    var tweenTime = getRandomInRange(min_tweenTime, max_tweenTime);

                    var tweenDelay = getRandomInRange(min_tweenDelay, max_tweenDelay);

                    TweenMax.to(particleElement, tweenTime, {delay:tweenDelay, top:yPos_end+"px", left:xPos_end+"px",

                              onComplete:tweenParticle, onCompleteParams:[particleElement], ease:Power2.easeIn});

          }

           

           

          sym.killParticles = function(){

                    // stop tween

                    for( var i=0; i<arrayParticleElements.length; i++ ){

                              // stop tween

                              TweenMax.killTweensOf( arrayParticleElements[i] );

                    }

           

                    // delete particles

                    for( var a=0; a<arrayParticles.length; a++ ){

                              arrayParticles[a].deleteSymbol();

                    }

           

                    arrayParticles = [];

                    arrayParticleElements = [];

          }

           

           

           

           

          // utility funcs -------------------------------------------

           

          function getRandomInRange(start, end) {

                    return start + (Math.random() * (end - start));

          }

           

          function getRandomInRangeRounded(start, end) {

                    return Math.round( start + (Math.random() * (end - start)) );

          }

          • 2. Re: Rain Effect
            Dam4222 Level 1

            Hey Tim,

             

            This is fantastic, though I must admit that the code you created is alot more complicated than I was anticpating.

             

            Here is what I came up with (click on 2011 on the bottom NAV and you will see):

             

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

             

            I also wanted to see if I could get the timing of the drops to be a little more linear, like a pouring rain. I tried playing with the Delay and Time but couldnt seem to get the desired result. Any ideas?

             

            Thanks again for all your help!

             

            Adam

            • 3. Re: Rain Effect
              TimJaramillo Level 4

              Hey Adam, at it's core, the example I created is really just a basic particle system- the only complications come from all the variables required for positioning, tweening to the end position, etc.

               

              To make the tween more linear, simply change the ease, from:

               

              ease:Power2.easeIn

               

              to:

               

              ease:Linear.easeNone

              • 4. Re: Rain Effect
                Dam4222 Level 1

                Hey Tim,

                 

                It looks exactly how I envisioned it. Great job and thank you!

                 

                Adam

                • 5. Re: Rain Effect
                  TimJaramillo Level 4

                  No problem! And you can use this same basic particle system for many different types of effects. All you have to do is modify the start/end positions.

                   

                  Can you mark my response as "Correct", so other users can easily find the right answer?

                  • 6. Re: Rain Effect
                    basparmak Level 1

                    Hey Tim.

                     

                    I did exactly as you explained, I even copy-pasted everything in your example, even then it is not working.

                    can you please tell me where I am doing wrong?

                     

                    You can download the file:
                    https://docs.google.com/file/d/0BwyuR2pL46BRVy1WLWVPZGI1OUk/edit?usp=sharing

                     

                    Thanx for your work, it is really very much appriciated.

                    • 7. Re: Rain Effect
                      TimJaramillo Level 4

                      Hi basparmak,

                       

                      The only thing you are missing is the gsap js files (we load this via yepnope at Stage.compositionReady). Put the "libs" folder below alongside your other files and it will work. This "libs" folder contains the gsap js files.

                       

                      http://www.timjaramillo.com/code/edge/_source/_temp/libs.zip

                       

                      Note: it will make your life much easier to become familiar with your browser's console log. In your current file, if you checked the console log you can see that the gsap files aren't loading. This will help you realize that the files aren't there.

                      • 8. Re: Rain Effect
                        basparmak Level 1

                        Thank you very much Tim.

                         

                        I really added up an important aspect to the site I am currently designing, thanx to you.

                        You can see the result at:

                         

                        http://www.kgrpltd.com/customers/diveoludeniz/

                         

                        I will play with the parameters and the idea ofcourse (and I'll try to add a scaleing also).

                         

                        Thanks again, great job.

                        • 9. Re: Rain Effect
                          basparmak Level 1

                          Thank you very much Tim.

                           

                          I really added up an important aspect to the site I am currently designing,

                          thanx to you.

                          You can see the result at:

                           

                          http://www.kgrpltd.com/customers/diveoludeniz/

                           

                          I will play with the parameters and the idea ofcourse (and I'll try to add

                          a scaleing also).

                           

                          Thanks again, great job...

                          • 10. Re: Rain Effect
                            TimJaramillo Level 4

                            No problem, glad to be of help. And your site looks very interesting basparmak!

                            • 11. Re: Rain Effect
                              basparmak Level 1

                              it will be nice if I can do what I have in mind. The site will be published

                              at www.diveoludeniz.com.

                              Current site was one of my oldest works, Im trying to improve I'll

                              inform you when I finish it.

                              Thanx again mate, cheers

                              • 12. Re: Rain Effect
                                basparmak Level 1

                                it will be nice if I can do what I have in mind. The site will be published at www.diveoludeniz.com.

                                Current site was one of my oldest works, Im trying to improve I'll inform you when I finish it.

                                Thanx again mate, cheers

                                • 13. Re: Rain Effect
                                  basparmak Level 1

                                  I have problems with integrating variables with the webkit transforms.

                                   

                                  When I add the line:

                                   

                                  particleElement.css({"-webkit-transform":"scale(2,2)"});

                                   

                                  it works fine. The bubbles come up 200% size.

                                   

                                  but when I try to use a variable like:

                                   

                                   

                                  var min_myScale = 1;

                                  var max_myScale = 5;

                                   

                                  var myScale = getRandomInRangeRounded(min_myScale, max_myScale);

                                   

                                  particleElement.css({"-webkit-transform":"scale(myScale, myScale)"});

                                   

                                  it doesnt work.

                                   

                                  I think thres smt. wrong with quotations but I can't recognize how it'd work.

                                  • 14. Re: Rain Effect
                                    TimJaramillo Level 4

                                    Try this:

                                     

                                    var min_myScale = 1;

                                    var max_myScale = 5;

                                     

                                    var myScale = getRandomInRangeRounded(min_myScale, max_myScale);

                                     

                                    particleElement.css({"-webkit-transform":"scale("+myScale+","+myScale+")"});

                                     

                                     

                                     

                                    And here is a very thorough explanation of working with Strings in javascript:

                                    http://www.quirksmode.org/js/strings.html

                                    • 15. Re: Rain Effect
                                      basparmak Level 1

                                      Thanx again. Your help is really very much appriciated.

                                      • 16. Re: Rain Effect
                                        LynnGreenbauer Level 1

                                        Hi Tim,

                                         

                                        I want to add this rain effect to a symbol animation.

                                         

                                        I have a mouseenter/leave event that triggers a symbol to play. I have my code  applied to the Stage in compositionReady as such:

                                        sym.$("symbol1").mouseenter(function(){

                                            sym.getSymbol("symbol1").play("enter");

                                        });

                                        sym.$("symbol1").mouseleave(function(){

                                            sym.getSymbol("symbol1").play("exit");

                                        });

                                         

                                        I'm not sure how or where to add the rain particle code so it is part of the symbol animation that plays on mouseenter and stops on mouseleave.

                                         

                                        Thanks in advance for your help.

                                         

                                        Lynn

                                        • 17. Re: Rain Effect
                                          TimJaramillo Level 4

                                          Hi Lynn,

                                           

                                          Does the actual rain particle display have to live inside the symbol, or can it be at the root? In other words, do you need the rain actually nested inside a particular symbol?

                                           

                                          Btw- if you a download link to your source files, it makes it a lot easier to help out.

                                          • 18. Re: Rain Effect
                                            LynnGreenbauer Level 1

                                            Hi Tim,

                                             

                                            Thanks for your quick reply. I got slammed with a rush project and could not get back to this until now.

                                             

                                            Here is a link to download my files: https://www.dropbox.com/s/av86d6cmrgrzl27/LGreenbauer_mock.zip

                                             

                                            The  animation is not complete, but in regards to my original question, I'd like your rain particle to start and stop when the user rolls over the Space Needle. The sky over the whole scene would darken, but the rain would only be over the Space Needle.

                                            I will refer to your expertise as far a the best place to put the code.

                                            This is my first Edge project. I was tasked with recreating a Flash animation in Edge, so trial by fire. (Also, first time using Dropbox)

                                             

                                            I also welcome any other advice you may have on any part of this project. I will most likely be posting more questions as I bring this project to completion (this week hopefully).

                                             

                                            Thanks!

                                            Lynn

                                            • 19. Re: Rain Effect
                                              JackG Level 1

                                              Hi Tim,

                                               

                                              Great effect. I'm looking to incorporate something like this as part of a layered background for a Twine 2 story title-page of mine. The rain effect would sit on the background in a responsive environment. I'm looking to change the colour of the particles, and have it fit a responsive design, is this possible? I've tried peaking into your files, but I must admit edge animate isn't my speciality. Could you suggest where I could find those values and change them to make it suitable?

                                               

                                              Jack