8 Replies Latest reply on Feb 5, 2014 11:32 AM by jackley923

    Rotate symbol based on cursor angle

    jackley923 Level 1

      Hey There,

       

      I am trying to get a symbol to rotate and follow based on the cursor angle and I am running into an issue I can't track down. I am using sym. to decalre my variables so that I can reference them globally whithin my composition. But it looks like its something wrong with the diffAngle function.

       

      Any thoughts?

       

      Here is the code on get composition ready:

       

       

          sym.x = e.pageX;

          sym.y = e.pageY;

         

          sym.centerItem = sym.getSymbol("mySymbol");

          sym.centerLoc = centerItem.offset();

         

          console.log( 'Center Item =' + sym.centerItem);

          console.log( 'Center Loc =' + sym.centerLoc);

         

      function diffAngle(){

       

          sym.dx = sym.x - (sym.centerLoc.left + (sym.centerItem.width() / 2));

          sym.dy = sym.y - (sym.centerLoc.position().top + (sym.centerItem.height() / 2));

          sym.newAngle = Math.atan2(sym.dy, sym.dx) * (180 / Math.PI);

       

          return sym.newAngle;

       

          console.log( 'New Angle =' + sym.newAngle);

      }

       

       

      $('#Stage').mousemove(function(e){

       

          sym.myAngle = sym.newAngle;

          sym.rotationValue = 'rotate(' + sym.myAngle + 'deg)';

          sym.$("mySymbol").css({

              '-moz-transform': sym.rotationValue,

              '-webkit-transform': sym.rotationValue,

              '-o-transform': sym.rotationValue,

              '-ms-transform': sym.rotationValue,

              'transform': sym.rotationValue

          });

          console.log('Mouse Moving');

      });

        • 1. Re: Rotate symbol based on cursor angle
          jackley923 Level 1

          If you copy the code, create a symbol named mySymbol, and paste the code into the get composition ready to see the error I'm getting. No matter how I restructure things I can't seem to nail it

           

          Javascript error in event handler! Event Type = element

           

          And I copied the wrong function here is the one I'm using:

          I was playing around with position() and thats why it was removed from the first post


          function diffAngle(){

           

           

              sym.dx = sym.x - (sym.centerLoc.position().left + (sym.centerItem.width() / 2));

              sym.dy = sym.y - (sym.centerLoc.position().top + (sym.centerItem.height() / 2));

              sym.newAngle = Math.atan2(sym.dy, sym.dx) * (180 / Math.PI);

           

           

              return sym.newAngle;

           

           

              console.log( 'New Angle =' + sym.newAngle);

          }


           


          1 person found this helpful
          • 2. Re: Rotate symbol based on cursor angle
            TimJaramillo Level 4

            Hey there, your code has a few issues.

             

            1st: to use props like "offset" and "width", you can't use Edge symbols, you have to use the raw object- I use jQery for this.

             

            2nd: you need to set the mouse position vars (sym.x, sym.y), in the mousemove function.

             

            example:

            www.timjaramillo.com/code/edge/rotateSymbolToMouse

             

            source:

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

             

            And code (pasted in Stage.compositionReady):

             

             

            sym.x;

            sym.y;

            sym.myAngle;

            sym.newAngle;

             

            sym.centerItem = sym.$("mySymbol");

            sym.centerLoc = sym.$("mySymbol").offset();

             

             

            function diffAngle(){

                sym.dx = sym.x - (sym.centerLoc.left + (sym.centerItem.width() / 2));

                sym.dy = sym.y - (sym.centerLoc.top + (sym.centerItem.height() / 2));

                sym.newAngle = Math.atan2(sym.dy, sym.dx) * (180 / Math.PI);

             

                return sym.newAngle;

            }

             

            $('#Stage').mousemove(function(e){

                sym.x = e.pageX;

                sym.y = e.pageY;

             

                sym.myAngle = diffAngle();

                sym.rotationValue = 'rotate(' + sym.myAngle + 'deg)';

                sym.$("mySymbol").css({

                    '-moz-transform': sym.rotationValue,

                    '-webkit-transform': sym.rotationValue,

                    '-o-transform': sym.rotationValue,

                    '-ms-transform': sym.rotationValue,

                    'transform': sym.rotationValue

                });

             

                //console.log('Mouse Moving, sym.myAngle = '+sym.myAngle);

            });

            • 3. Re: Rotate symbol based on cursor angle
              jackley923 Level 1

              I see the revisions in the code, focusing on sym.myAngle = diffAngle();

               

              I was wondering if you could make a varible equal a functions output but was getting errors so I stripped it down to zero in on things so thanks for showing me that.

               

              and for showing me that I needed to delare

              sym.myAngle;

              sym.newAngle;

               

              with

               

              sym.x;

              sym.y;

               

              and move

               

              sym.x = e.pageX;

              sym.y = e.pageY;

               

              to the mouse move

               

              The funny thing is when I change all my code to your new revised code I am still getting the same error ... but once I copy and paste yours it works properly. For the life of me I can't see the difference but I am going to becasue I like to see me errors and where I'm going wrong so I don't make the same mistake in the future

               

              Thx Tim

              • 4. Re: Rotate symbol based on cursor angle
                TimJaramillo Level 4

                No prob!

                 

                When you're changing it versus copy/pasting, you may just be missing one tiny revision (it's hard for our human eyes to catch every little glyph in code). 

                • 5. Re: Rotate symbol based on cursor angle
                  jackley923 Level 1

                  Totally! I figured it must have been that.

                   

                  I wanted to yank out the mousemove function I created on compositionReady and put its contents on a Stage.mousemove created from the fly out menu in edge. But when I do that it no longer works...

                   

                  I thought that both examples of calling the function for mousemove would funtion exactly the same...

                   

                  I even tried referencing the diffAngle function in a different way, as I thought it was a scoping issue

                   

                  sym.myAngle = sym.getComposition().getStage().diffAngle();

                   

                  But all I get are a bunch of errors:

                  Javascript error in event handler! Event Type = element

                  • 6. Re: Rotate symbol based on cursor angle
                    TimJaramillo Level 4

                    It's probably a scope issue.

                     

                    But it's actually better practice to keep your code in one place anyway.

                     

                    Edge Animate provides the different event panels but it's really just for ease-of-use. If your code is all in one place then you don't have to jump through panels wasting time trying to find code.

                    • 7. Re: Rotate symbol based on cursor angle
                      jackley923 Level 1

                      Yeah Good Call

                       

                      Thx again Tim

                      • 8. Re: Rotate symbol based on cursor angle
                        jackley923 Level 1

                        And yeah it was a scoping issue, but now I see what it was

                         

                        if I moved it out of the compositionReady then I needed to set up the function with sym. and reference it like so:

                         

                        sym.myAngle = sym.diffAngle();

                         

                         

                        But after all that I am going the route of keeping it all ini one place

                         

                        Thx Doooooode!