22 Replies Latest reply on Jul 19, 2017 11:12 AM by TimJaramillo

    Dynamic Mouse Follow

    jackley923 Level 1

      Hey Gang,

       

      I'm trying to generate symbols on the stage that when they are added begin to follow the mouse position. Once I get it down I will add easing etc.

       

      Currrently its adding new symbols every sec but once they genrerate they are no longer following the mouse position.

       

      Here is the code:

       

      any thoughts?

       

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

       

       

      sym.timer;

      sym.spawnFrequency = 1000;

      sym.particleArray = [];

      sym.pageX;

      sym.pageY;

       

       

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

       

       

      // called by trigger @ 0ms

      sym.startTimer = function(){

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

      };

       

       

      sym.createParticle = function(){

                // pull symbol from library, add to Stage

                sym.trailParticle = sym.createChildSymbol("ani_loop_test", "Stage");

                // position based on mouse position

                sym.trailParticle.getSymbolElement().css({"position":"absolute", "left":sym.pageX, "top":sym.pageY});

                sym.particleArray.push( sym.trailParticle );

       

       

                //console.log("x:",trailParticle.getSymbolElement().css("left"),"y:",trailParticle.g etSymbolElement().css("top"));

      }

       

       

      this.offsetX = 125;

      this.offsetY = 125;

       

       

      this.onMove = function( posX, posY ){

                sym.trailParticle.getSymbolElement().css('left', posX - this.offsetX);

                sym.trailParticle.getSymbolElement().css('top', posY - this.offsetY);

      }

        • 1. Re: Dynamic Mouse Follow
          elainecc Adobe Employee

          Hi, jackley-

           

          I think the event you want is mousemove, not onMove.  onMove, as described by various API docs I looked at, is fired when an element moves, not when the mouse moves.

           

          Hope that helps,

           

          -Elaine

          • 2. Re: Dynamic Mouse Follow
            jackley923 Level 1

            Thx for taking a stab at it Elaine

             

            I changed onMove to mousemove it functions the exact same way.

             

            I also have

             

            Stage.mousemove:

             

            sym.pageX = e.pageX;

            sym.pageY = e.pageY;

             

            this.mousemove( sym.pageX, sym.pageY );

             

            Stage.touchmove:

             

            e.preventDefault();

             

            if ( e.pageX == undefined ) {

                      var touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0];

                      //this.onMove( touch.pageX, touch.pageY );

                      sym.pageX = touch.pageX;

                      sym.pageY = touch.pageY;

            }


            • 3. Re: Dynamic Mouse Follow
              TimJaramillo Level 4

              Hi there,

               

              I'd leverage the "sym.particleArray". Add a setTimeout, and on tick of that timer, run through all symbols in "sym.particleArray", and set the x/y position based on sym.pageX/sym.pageY.

              • 4. Re: Dynamic Mouse Follow
                jackley923 Level 1

                I had my sights set on the particle array as well... Your logic makes total sense

                 

                I'm just not totally clear on how to excecute a timer that runs through all the symbols in the array

                • 5. Re: Dynamic Mouse Follow
                  TimJaramillo Level 4

                  Hey Jackley, peep the code below. Note that I also removed the call to "onMove", from the "mousemove" event.

                   

                  Here is a working example:

                  www.timjaramillo.com/code/edge/mouse_follow_dynamic_obj/dynamic_follow.html

                   

                  Here is the source:

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

                   

                   

                   

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

                   

                   

                  sym.timerSpawn;

                  sym.spawnFrequency = 1000;

                   

                   

                  sym.timerMove;

                  sym.moveFrequency = 100;

                  sym.mouseTrailSpeed = 12;

                   

                   

                  sym.particleArray = [];

                  sym.pageX;

                  sym.pageY;

                   

                   

                   

                   

                   

                   

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

                   

                   

                  // called by trigger @ 0ms

                  sym.startTimer = function(){

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

                   

                   

                            sym.timerMove = setInterval(sym.moveParticle, sym.moveFrequency);

                  };

                   

                   

                   

                  sym.createParticle = function(){

                            // pull symbol from library, add to Stage

                            sym.trailParticle = sym.createChildSymbol("ani_loop_test", "Stage");

                            // position based on mouse position

                            sym.trailParticle.getSymbolElement().css({"position":"absolute", "left":sym.pageX, "top":sym.pageY});

                   

                   

                            // store values in object, so we can use them in later for loop

                            var obj = {followerX:sym.pageX, followerY:sym.pageY, symbol:sym.trailParticle};

                            sym.particleArray.push( obj );

                  }

                   

                   

                  sym.offsetX = 125;

                  sym.offsetY = 125;

                   

                   

                  sym.moveParticle = function(){

                            for( var i=0; i<sym.particleArray.length; i++ )

                            {

                                      // update values on each obj in array

                                      sym.particleArray[i].followerX += (sym.pageX - sym.particleArray[i].followerX) / sym.mouseTrailSpeed;

                                      sym.particleArray[i].followerY += (sym.pageY - sym.particleArray[i].followerY) / sym.mouseTrailSpeed;

                   

                   

                                      // move it!

                                      sym.particleArray[i].symbol.getSymbolElement().css({left:sym.particleArray[i].f ollowerX, top:sym.particleArray[i].followerY});

                            }

                            //console.log('onMove, sym.pageX = '+sym.pageX);

                  }

                  • 6. Re: Dynamic Mouse Follow
                    jackley923 Level 1

                    RAD

                     

                    I was having a helluva time updating the values in the array properly:

                     



                    // update values on each obj in array


                    sym.particleArray[i].followerX += (sym.pageX - sym.particleArray[i].followerX) / sym.mouseTrailSpeed;


                    sym.particleArray[i].followerY += (sym.pageY - sym.particleArray[i].followerY) / sym.mouseTrailSpeed;

                     

                     



                    // move it!


                    sym.particleArray[i].symbol.getSymbolElement().css({left:sym.particleArray[i].followerX, top:sym.particleArray[i].followerY});

                     

                    Thx a ton for helping me sort that out!

                    • 7. Re: Dynamic Mouse Follow
                      TimJaramillo Level 4

                      No problem!

                       

                      Ya, storing objects in an array is a nice way to store data. It makes it super easy to access that data later on.

                      • 8. Re: Dynamic Mouse Follow
                        jackley923 Level 1

                        Update!

                         

                        I wanted things to be dynamic as possible so I randomized the symbols that are being generated by the particle emitter and randomzied their placement on the Stage.

                         

                        See below:


                        // pull random symbol from library

                        sym.randomSymbol = Math.floor((Math.random()*4)+1);

                         

                        //and add to Stage

                        sym.trailParticle = sym.createChildSymbol("cat_ani_" + sym.randomSymbol, "Stage");

                         

                        // randomize the stage X & Y coords

                        sym.randomX = Math.floor(Math.random() * sym.maxWidth);

                        sym.randomY = Math.floor(Math.random() * sym.maxHeight);

                        console.log('Random X is = '+ sym.randomX);

                        console.log('Random Y is = '+ sym.randomY);

                         

                        // position based on random stage position sym.trailParticle.getSymbolElement().css({'position':'absolute','top':sym.randomY+'px','le ft':sym.randomX+'px'});

                         

                        So now I am trying to assign a specific mouseTrailSpeed to a each library symbol thats being generated on stage.

                         

                        would I have to create another array to store those in or should I go ahead and create individual particle emitters for each unique symbol I'm generating? That just felt inefficient so I thought to run it by the forum

                         

                        Thx

                        • 9. Re: Dynamic Mouse Follow
                          elainecc Adobe Employee

                          It depends: what are valid numbers for mouseTrailSpeed?  You can probably dynamically generate a number each time by calling Math.random(), multiplying by some large factor, and then calling modulo on it.

                           

                          -Elaine

                          • 10. Re: Dynamic Mouse Follow
                            jackley923 Level 1

                            Thx Elaine,

                             

                            Same Brains : ) I approached that route at first, Since the acceptable numbers for mouseTrailSpeed are between 10-50 I used Math Floor + Random to find a random number in that range ...

                             

                            and that worked! but it was also updating the mouseTrailSpeed for the entire particle emitter / array as a whole not the individual particles

                             

                            Also random wont really work for my needs sicne I need to assign each particle a unique mouseTrailSpeed number that is pre defined in a variable that is directly associated with that corresponding symbol.

                             

                            example:

                            if the random particle is a snail it would have a high (meaning slow) mouseTrailSpeed

                             

                            if the random particle is a rabbit it would have a low (meaning fast) mouseTrailSpeed

                             

                            I tried having the particle change a "state varible" letting me know what type of particle has been added to the stage but I am having a hard time connecting the dots to use that info to set unique mouseTrailSpeeds for each type of particle once its added to the stage.

                             

                            Thx for trying to lend a hand! Appreciate it

                            • 11. Re: Dynamic Mouse Follow
                              TimJaramillo Level 4

                              Hey there, I'm not fully clear on what you're trying to do, but seems like you can use the "obj" and "particleArray" to store more values for each particle.

                               

                              // store values in object, so we can use them in later for loop

                                        var obj = {followerX:sym.pageX, followerY:sym.pageY, symbol:sym.trailParticle, mouseTrailSpeed:myUniqueSpeedVarSetForEachParticle};

                                        sym.particleArray.push( obj );

                              • 12. Re: Dynamic Mouse Follow
                                heathrowe Most Valuable Participant

                                Hey Tim - good to see you back on the block

                                 

                                Darrell

                                • 13. Re: Dynamic Mouse Follow
                                  TimJaramillo Level 4

                                  Hey Darrell, thanks man- I'm glad to be back on the scene!

                                  • 14. Re: Dynamic Mouse Follow
                                    resdesign Adobe Community Professional & MVP

                                    Same here Tim, welcome back!

                                    • 15. Re: Dynamic Mouse Follow
                                      TimJaramillo Level 4

                                      Thanks Marie, I appreciate it!

                                      • 16. Re: Dynamic Mouse Follow
                                        heathrowe Most Valuable Participant

                                        Quick question for ya, Tim

                                         

                                        I notice you use sym.variablename= declaration instead of the vanilla js var variablename=, is this an Edge Animate shorthand?

                                         

                                        Darrell

                                        • 17. Re: Dynamic Mouse Follow
                                          TimJaramillo Level 4

                                          Hey Darrell,

                                           

                                          Out of habit, I use "sym.variableName" as a root scope, in order to make the var accessible from anywhere else in the application via:

                                           

                                          sym.getComposition().getStage().variableName;

                                           

                                          When all the code is on Stage.compositionReady, you usually don't have to worry about scope though.

                                           

                                          In this case, I was thinking that since the scope of the function called by setInterval is the window object, that the other vars/funcs would be out of scope when calling them. However, I just ran a test and all vars/funcs in Stage.compositionReady are still in scope within the setInterval (even when using vanilla "var" declarations), so all the vars/funcs could have used the vanilla "var" declaration.

                                           

                                          Honestly, I'm not 100% sure of how Edge handles scope in all instances so I've found that using "sym.variableName" gives me the control I'm looking for. But I agree that using the vanilla js declarations is probably the better way to go in terms of keeping code from polluting the root scope.

                                          • 18. Re: Dynamic Mouse Follow
                                            heathrowe Most Valuable Participant

                                            Scoping makes perfect sense.

                                             

                                            I remember seeing a reference to this in one of your earlier threads and have always wanted to ask you how you arrived at it.

                                             

                                            I do like its notation and it fits in with Edge Animate notation.

                                             

                                            Thanks for clarifying.

                                             

                                            Apologies, to jackley for hijacking the thread - I will slip out the back door, now

                                             

                                            Darrell

                                            • 19. Re: Dynamic Mouse Follow
                                              jackley923 Level 1

                                              Hey Tim,

                                               

                                              I am basically trying to give each different type of particle thats being generated to have a unique trail speed, and I think that by storing them in array with obj

                                               

                                              I was trying to bind a mouse over function to the particles by referencing:

                                              sym.trailParticle.bind ("mouseover",function(){alert("you moused over a particle");});

                                               

                                              and it kills the sym.moveParticle = function()

                                               

                                               

                                              I'll send a preview link as soon as its all working! Thank you.

                                               

                                              and I will be sure to share the final project when I'm done with this fun challenge!!

                                              • 20. Re: Dynamic Mouse Follow
                                                jackley923 Level 1

                                                Hahaha no apologies needed Heathrowe!

                                                 

                                                Always enjoy a lil side convo

                                                • 21. Re: Dynamic Mouse Follow
                                                  jefflau

                                                  Hi TimJaramillo bro, thank you for your post here. I had a look at your file if I would like to implement the object follow mouse like how you did for the ani but without firing a new symbol every sec. How can i achieve that, please? I'm familiar with Edge Animate but a newbie to JS or jQuery.

                                                   

                                                  I have been searching around for the code that works for Edge for object follow mouse function with ease and delay, exactly like how you did in your demo. I tried to play with your code and try to turn off the function of generating new symbol every sec but i failed.

                                                   

                                                  Thanks a lot.

                                                   

                                                  Jeff

                                                  • 22. Re: Dynamic Mouse Follow
                                                    TimJaramillo Level 4

                                                    Hi jefflau,

                                                     

                                                    I actually don't have Edge Animate installed on my machine anymore (official Adobe support for this product ended in 2015). And I can't seem to find the app available for download in Creative Cloud. But I tweaked the code in my original example and it seems to be working how you want, see below example.

                                                     

                                                    I basically removed all the spawning code, and the array that stores the spawned objects info.

                                                     

                                                    Btw, if you are thinking about continuing with web development or web animation, I'd really recommend you becoming familiar with standard Javascript. There are a lot of opportunities for web animation!

                                                     

                                                    Working example: Untitled

                                                     

                                                    Source zip: www.timjaramillo.com/code/edge/_source/mouse_follow_dynamic_obj_2.zip