PIXI Tween Low Performance

[odell 0 Likes (Newbie)]

So I managed to get the particle to move attract towards the mouse but the performance is extremly bad and when I take out the "foreach" loop it only effects 1 particle/sprite. Can someone help me figure out what Im doing wrong. No codepen bec I have no clue how to load a json file, but heres the code.

 

    stars = [];

    

    gsap.ticker.add(() => {

        calculateStarPosition

        app.ticker.update();

    });

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

 

        var star = new Sprite(id["star.png"]);

        star.interactive = true; // enable mouse and touch events    

        star.buttonMode = true; // show hand cursor on mouseover

     

        star.scale.set(rand(0.05, .07));

        star.anchor.set(.5);

        star.x =  rand(vWidth * .5 * -1, vWidth * .5 ); 

        star.y = rand(vHeight * .5 * -1, vHeight  * .5); 

        stars.push(star);

      

      

        spriteParticles.addChild(star);

       

        function calculateStarPosition(star){

        

         

          const mouseCoords = app.renderer.plugins.interaction.mouse.global;

        

              var radius = 30;

 

              var dx =  mouseCoords.x - (star.getGlobalPosition().x)

              var dy =  mouseCoords.y - (star.getGlobalPosition().y)

              console.log("dy")

              var dist = Math.sqrt(dx * dx + dy * dy) || 1;

              

              var angle = Math.atan2(dy, dx);

              

              if(dist < radius){

                radius = dist;

                // TweenMax.to(sign, 0.3, {scale: 2});

                gsap.to(star, {pixi:{scale: +.5}, duration:0.3});

              } else{

                // TweenMax.to(sign, 0.3, {scale: 1});

                gsap.to(star, {pixi:{scale: +.1}, duration:0.3});

              }

 

            gsap.to(star, {pixi:{

                x: Math.cos(angle) * radius,

                y: Math.sin(angle) * radius

              }, duration:0.3});

             

             

          

             

             

          }

          stars.forEach(calculateStarPosition)

   

         

         

        }

[OSUblake 18,537 Likes (Superhero)]

Hard to say without a demo.

 

I'd start by cleaning up that for loop code. There's no need to have the calculateStartPosition function and the forEach calls inside of a for loop.

[GreenSock 18,878 Likes (Superhero)]

Yeah, it definitely looks like problematic code. Like...INSIDE your for...loop, you're adding a new star and doing a forEach() on every one. So if you have 100 stars, the first one in the array is gonna have calculateStarPosition() run 100 times (which each creates a tween, so 99 conflicts). The second will run it 99 times, the third 98, etc. It's almost surely an issue in your code.