Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
odell

PIXI Tween Low Performance

Recommended Posts

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.=  rand(vWidth * .5 * -1, vWidth * .5 ); 
        star.= 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.- (star.getGlobalPosition().x)
              var dy =  mouseCoords.- (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)
   
         
         
        }
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×