3 Replies Latest reply on Mar 4, 2013 12:07 PM by TimJaramillo

    Constant random X & Y movement + constraints?

    GeminiStarII

           Hello Everyone I am new to Adobe Edge and on top of that have no experience with java script and I am ratter poor with code in general. I personally could not find anything similar enough to reverse engineer although that might be due to the above stated reasons.   I want to thank everyone in advance for their help.

       

           Now what I wanted to know is I have a symbol I want to slowly drift around the screen in in random X and Y Directions. It should be constantly moving and periodically change direction randomly. The other problem is I want to constrain the symbol so it can’t get any closer than 100 pixels away from the all edges of the screen.*Note* I have no even semi working code not for lack of trying I just don’t know what I am doing..?

        • 1. Re: Constant random X & Y movement + constraints?
          TimJaramillo Level 4

          Hi Gemini,

           

          Here is an example of an object animating randomly around the screen at random intervals.

           

          Example:

          http://www.timjaramillo.com/code/edge/random_tween_screen/

           

          Source:

          http://www.timjaramillo.com/code/edge/_source/random_tween_screen.zip

           

          Here is the code on Stage.compositionReady:

           

           

          // center Stage

          $("#Stage").css("margin","auto");

           

          // timer

          var timerTween;

           

          // used to offset the bounds

          var objWidth = sym.$("face").width();

          var objHeight = sym.$("face").height();

           

          // stage width/height

          var windowWidth = 700;

          var windowHeight = 600;

           

          // min/max vars

          var minXPos = 100;

          var minYPos = 100;

          var maxXPos = windowWidth-objWidth-100;

          var maxYPos = windowHeight-objHeight-100;

           

          // timer function

          sym.initTimer = function(){

                    // very short timer, to call "tweenObject" function

                    timerTween = setTimeout(function() {

                         sym.tweenObject();

                                  }, 10);

          }

           

          // here's where we get random values and actually tween the object, using the jQuery "animate" method

          sym.tweenObject = function(){

                    var tweenTime = sym.getRandomInRange(2000, 5000);

               var xPos = sym.getRandomInRange(minXPos, maxXPos);

               var yPos = sym.getRandomInRange(minYPos, maxYPos);

               sym.$("face").animate({left:xPos, top:yPos}, tweenTime, 'swing', sym.initTimer);

          }

           

          // utility function to give us random values

          sym.getRandomInRange = function(start, end) {

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

          }

           

          // let's start the animation, shall we?

          sym.initTimer();

          • 2. Re: Constant random X & Y movement + constraints?
            GeminiStarII Level 1

            Thank you for your help I am slowly starting to understand the code. How could I use it with multiple symbols? I have managed to get it to work but all with problems.

             

            1 all symbols move to the exact same location.

             

            2 The symbols all move in random directions but ignore the constraints and float of the screen.

             

            3 The symbols obey the constraints and move randomly without over lapping but stick towards the upper left corner of the stage.

             

            What method would you use to work the code on multiple symbols?

            • 3. Re: Constant random X & Y movement + constraints?
              TimJaramillo Level 4

              Hi Gemini, you can animate multiple symbols using the same code with just a few tweaks.

               

              Example:

              www.timjaramillo.com/code/edge/random_tween_multipleObj

               

              Source:

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

               

              Code on Stage.compositionReady:

               

              // center Edge content

              $("#Stage").css("margin","auto");

               

               

               

               

               

               

              var timerTween;

               

               

              /* actual browser window

              var windowWidth = window.innerWidth;

              var windowHeight = window.innerHeight;

              */

              var stageWidth = $("#Stage").width();//700;

              var stageHeight = $("#Stage").height();

               

               

              var objWidth = sym.$("obj_1").width();

              var objHeight = sym.$("obj_1").height();

               

               

              var minXPos = 100;

              var minYPos = 100;

              var maxXPos = stageWidth-objWidth-100;

              var maxYPos = stageHeight-objHeight-100;

               

               

               

               

              sym.initTimer = function(id){


              timerTween = setTimeout(function() {







              sym.tweenObject(id);
                      

              }, 10);

               

               

              }

               

               

              sym.tweenObject = function(id){


              var tweenTime = sym.getRandomInRange(2000, 5000);

              var xPos = sym.getRandomInRange(minXPos, maxXPos);

              var yPos = sym.getRandomInRange(minYPos, maxYPos);

               

               


              sym.$("obj_"+id).animate({left:xPos, top:yPos}, tweenTime, 'swing', sym.initTimer(id) );

              }

               

               

              sym.getRandomInRange = function(start, end) {


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

              }

               

               

              // start animation

              sym.initTimer(1);

              sym.initTimer(2);

              sym.initTimer(3);

              sym.initTimer(4);