8 Replies Latest reply on Feb 27, 2014 10:54 PM by jackley923

    CreateChildSymbol on the top left bottom right edges of the window/stage?

    jackley923 Level 1

      I am creating a particle system and I am trying to generate the particles / CreateChildSymbol on the top left bottom right edges of the window/stage?

       

      Currently I am generating random X & Y points but thats not really doing what I need.

       



      // find the stage width & height


      sym.maxWidth = $('#Stage').width();


      sym.maxHeight = $('#Stage').height();

       



      // randomize the numbers 1-12


      var randomSymbol = Math.floor((Math.random()*12)+1);

       



      // Pull symbol from lib and add to stage


      sym.mainParticle = sym.createChildSymbol("symbol_ani_" + randomSymbol, "Stage");

       



      // create jQuery object / Edge Ani element var


      sym.mainParticleElement = sym.mainParticle.getSymbolElement();

       



      // randomize the stage X & Y coords


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


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

       



      // position  based on random stage X + Y position


      sym.mainParticleElement.css({'position':'absolute','top':randomY+'px','left':randomX+'px'} );

       

      But I am at a loss of how to randomize the top / right / bottom / left X & Y edges of the stage

        • 2. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
          jackley923 Level 1

          Hey There Resdesign

           

          Thanks for pointing me in a proper direction

           

          I will take a look and report back ASAP!

           

          Thx this should prove to be really helpful

          • 3. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
            jackley923 Level 1

            It looks like you are randomly picking numbers from the Array to find the X & Y point which is a neat approach

             

            but I'm still having issues determining the edges of the stage, feel free to let me know if I am missing something in your file.

             

            I thought I could make 4 variables for top / left / bottom / right and check if one of them is true to then randomize the X but lock the Y at 0 and vise versa ... but then that only helps with the top and left edges of the pages.

             

            been trying to lock down the logic and I just cant seem to make it happen just yet

            • 4. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
              resdesign Adobe Community Professional & MVP

              What are you trying to do exactly?

              There are a few posts here about particles with canvas here:

              http://forums.adobe.com/message/4884976#4884976

              • 5. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
                jackley923 Level 1

                Particle systems aside I'm basically trying to trying to have my symbols generate only on the edges of the Stage.

                 

                currently the way I have it they are generating all over randomly X & Y

                • 6. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
                  resdesign Adobe Community Professional & MVP

                  Not sure I understand - only in the edges of the Stage! Do you mean outside of the stage - let's say in the part that would not be seen if the stage was set to hidden?

                  • 7. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
                    jackley923 Level 1

                    Yes thats a great way to phrase it.

                     

                    My particles follow the mouse cursor so Yes ideally I am trying to have my particles start outside of my stage ... randomly choosing to come from the left of the stage top bottom right etc. then going towards the direction of the cursor (which is already working)

                     

                    Sorry if what I was asking was confusing ...

                    • 8. Re: CreateChildSymbol on the top left bottom right edges of the window/stage?
                      jackley923 Level 1

                      Got it working!

                       

                      Well to be honest another friend helped me work out the logic for randomizing the sides (top, left, bottom, right) to get it working.

                       

                      But I wanted to share since I had a hard time finding anything releated to this topic. Big Ups to Resdesign + Tim Jaramillo for helping me with some logic along the way as well!

                       

                       

                      // these variables are global within compReady would need to change to sym. instead of var if needed outside of this

                      var moveToX = $(window).width()/2,

                           moveToY = $(window).height()/2;

                       

                       

                      function spawnParticle() {

                           // these variables are only availabe inside this function

                           var side = Math.floor(Math.random() * 4),

                               offScreen = 100,    // how many pixels off the side of the screen to start

                               yRand = Math.floor(Math.random() * $(window).height()),

                               xRand = Math.floor(Math.random() * $(window).width()),

                               xPos = 0,

                               yPos = 0;

                       

                           switch (side) {

                               case 0:

                                   xPos = xRand;

                                   yPos = -offScreen;

                                   console.log('spawn from top');

                               break;

                               case 1:

                                   console.log('spawn from right');

                                   xPos = $(window).width() + offScreen;

                                   yPos = yRand;

                               break;

                               case 2:

                                   console.log('spawn from bottom');

                                   xPos = xRand;

                                   yPos = $(window).height() + offScreen;

                               break;

                               case 3:

                                   xPos = -offScreen;

                                   yPos = yRand;

                                   console.log('spawn from left');

                               break;

                           }

                       

                           // add to the stage

                           sym.mainParticle = sym.createChildSymbol("star", "Stage");

                           sym.mainParticleElement = sym.mainParticle.getSymbolElement();

                       

                           sym.mainParticleElement.css({'position':'absolute','top':yPos+'px','left':xPos+'px'});

                       

                           // simple animation to reveal the particle

                           sym.mainParticleElement.animate({ left: moveToX, top: moveToY }, 1000, function() {

                               // for this test, I'm removing the particle after it has finished animating

                               $(this).fadeOut(function() {

                                   $(this).remove();

                               });

                           });

                      }

                       

                      // keep spanwing new particles

                      setInterval(spawnParticle, 500);