odell Posted May 31, 2020 Share Posted May 31, 2020 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) } Link to comment Share on other sites More sharing options...
OSUblake Posted June 2, 2020 Share Posted June 2, 2020 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. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2020 Share Posted June 2, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now