如何提高此功能的性能？

Question

I have a kind of "bouncing balls" project, where I draw 150 particles at a canvas and, at every redraw, it recalc particles position, and verify if any particles is at a corner, to invert its iterator.

But thing is that this project has a factor that not all "bouncing balls" projects have. The balls need to bounce within the bounds of a map.

So, when I create the canvas, I also use a SVG to iterate over the pixels and create a array of every bound in the x axis, left and right, so my particles will know exactly where they need to rebounce.

So good, so well, it is working nice, but my canvas is 500px tall, so it need to iterate 500 times, with a lot of conditionals to prevent weird behavior, this multiplied by 150 particles, and in every redraw.

It has became very performance greedy and I need to improve performance, so, here is my collision system code

const colisionSystem = state => {
  for (var b=0, hs=state.bounds.length; b<hs; b++) {
    if(
      state.bounds[b][0]
      && state.x - state.radius < state.bounds[b][0].x
      && state.y + state.radius > state.bounds[b][0].y
      && state.y - state.radius < state.bounds[b][0].y
    ) {
      if (
        state.bounds[b][0].x > 0
        && state.bounds[b][0].x < (state.widgetSize.width * 0.33)
        && state.bounds[b][0].y > (state.widgetSize.height * 0.33)
        && state.bounds[b][0].y < (state.widgetSize.width * 0.45)
      ) {
        // middle left bottom corner at acre
        state.x = state.radius + state.bounds[b][0].x;
        state.vy *= -1;
      } else if (
        state.bounds[b][0].x > 0
        && state.bounds[b][0].x < (state.widgetSize.width * 0.098)
        && state.bounds[b][0].y > (state.widgetSize.height * 0.167)
        && state.bounds[b][0].y < (state.widgetSize.width * 0.206)
      ) {
        // middle left top corner at acre
        state.y = state.radius + state.bounds[b][0].y + 1;
        state.vx *= -1;
        state.vy *= -1;
      } else {
        state.x = state.radius + state.bounds[b][0].x;
        state.vx *= -1;
      }

      if(state.oldAxis === state.x) {
        state.y = state.y - 1;
      } else {
        state.oldAxis = state.x;
      }

      state.antiRebounce = false;
    }
    if(
      state.bounds[b][1]
      && state.x + state.radius > state.bounds[b][1].x
      && state.y + state.radius > state.bounds[b][1].y
      && state.y - state.radius < state.bounds[b][1].y
    ) {
      if (
        state.bounds[b][1].x > (state.widgetSize.width * 0.555)
        && state.bounds[b][1].x < (state.widgetSize.width * 0.983)
        && state.bounds[b][1].y > 0
        && state.bounds[b][1].y < (state.widgetSize.width * 0.2098)
      ) {
        // Top right corner
        if(state.antiRebounce) {
          state.vy *= -1;
          state.antiRebounce = false;
        } else {
          state.antiRebounce = true;
        }
        state.y = state.bounds[b][1].y + state.radius + 1;
        state.vy *= -1;
      }
      if (
        state.bounds[b][1].x > (state.widgetSize.width * 0.604)
        && state.bounds[b][1].x < (state.widgetSize.width * 0.827)
        && state.bounds[b][1].y > (state.widgetSize.width * 0.665)
        && state.bounds[b][1].y < (state.widgetSize.width * 0.778)
      ) {
        // bottom right corner
        state.vy *= -1;
      } else {
        state.vx *= -1;
        state.x = state.bounds[b][1].x - state.radius;
      }

      if(state.oldAxis === state.x) {
        state.y = state.y - 1;
      } else {
        state.oldAxis = state.x;
      }
    }
  }

  if (state.y + state.radius > state.widgetSize.height) {
    state.vy *= -1;
    state.y = state.widgetSize.height - state.radius;
  }
  if (state.y - state.radius < 0) {
    state.vy *= -1;
    state.y = state.radius;
  }

  return state;
}

export default colisionSystem;

So, question is, is there any practical advice to improve this code itself?

Answer 1

You have 500 * 150 particles (750000) that is a lot and frankly too much for a JS app to handle. (BUT you say 150 particles so I am somewhat confused as to what you are doing)

To increase the performance of the function provided you can use a few simple rules of thumb.

An array lookup is slower than a direct referance.

ie

// a compound referance
state.bounds[b][1].x // find state, then bounds, then index b, then 1,then x
// if you have the common parts used frequently
var b1 = state.bounds[b][1]; // does all the lookups
b1.x; // but now only needs one lookup to get x

Same is true for item properties. Each . means an additional lookup. You can get a lot of extra performance by creating temporary variables to hold the result of all the lookups.

Applying this to your code and you get

const colisionSystem = state => {
    var w = state.widgetSize.width;  // used many times in the loop
    var h = state.widgetSize.height;
    var x = state.x;
    var y = state.y;
    var r = state.radius;
    for (var b = 0, hs = state.bounds.length; b < hs; b++) {
        var bounds = state.bounds[b];        
        if (bounds[0]){
            var b0 = bounds[0];
            if( x - r < b0.x && y + r > b0.y && y - r < b0.y) {
                if ( b0.x > 0 && b0.x < (w * 0.33) && b0.y > (h * 0.33) && b0.y < (w * 0.45)) {                    
                    x = r + b0.x; // middle left bottom corner at acre
                    state.vy *= -1;
                } else if ( b0.x > 0 && b0.x < (w * 0.098) && b0.y > (h * 0.167) && b0.y < (w * 0.206)) {                   
                    y = r + b0.y + 1; // middle left top corner at acre
                    state.vx *= -1;
                    state.vy *= -1;
                } else {
                    x = r + b0.x;
                    state.vx *= -1;
                }
                if (state.oldAxis === x) {
                    y -= 1;
                } else {
                    state.oldAxis = x;
                }
                state.antiRebounce = false;
            }
        }
        if (bounds[1]){
            var b1 = bounds[1];
            if( x + r > b1.x && y + r > b1.y && y - r < b1.y) {
                if ( b1.x > (w * 0.555) && b1.x < (w * 0.983) && b1.y > 0 && b1.y < (w * 0.2098)) {                        
                    if (state.antiRebounce) { // Top right corner
                        state.vy *= -1;
                        state.antiRebounce = false;
                    } else {
                        state.antiRebounce = true;
                    }
                    y = b1.y + r + 1;
                    state.vy *= -1;
                }
                if (b1.x > (w * 0.604) && b1.x < (w * 0.827) && b1.y > (w * 0.665) && b1.y < (w * 0.778)) {                    
                    state.vy *= -1; // bottom right corner
                } else {
                    state.vx *= -1;
                    x = b1.x - r;
                }
                if (state.oldAxis === x) {
                    y = y - 1;
                } else {
                    state.oldAxis = x;
                }
            }
        }
    }
    if (y + r > h) {
        state.vy *= -1;
        y = h - r;
    } else if (y - r < 0) {  // added else. Cant both happen at the same time?????
        state.vy *= -1;
        y = r;
    }
    state.y = y; // set state x,y to reflect any changes.
    state.x = x; 

    return state;
}

By replacing the many compound references with direct references you can free up a lot of CPU time, but this will depend on the data. If the code above spends more time rejecting the conditional statements early you will not get much of a benefit, and if the bounds[1],bounds[0] conditions are only passed once a call to colisionSystem you will get no benefit, and maybe a slight decrease in performance. Same holds true for the number of items in the loop, if the loop is iterating many items you will see an improvement, if the loop is only 1 or 2 items you will see no benefit and for one item you will see a decrease in performance.

Note, I was not careful refactoring, there may be some typos in above code and is only an example.

You say you use SVG to iterate???

I also use a SVG to iterate over the pixels

Rule of thumb #2. The DOM is slow, SVG is part of the DOM and in my book SVG is really VSG (Very Slow Graphics) and I would say that the main part of the slow down is in whatever you do with the SVG.

Answer 2

Recommendations:

• This function is doing way too much, consider breaking this up so that expressions like this

    state.bounds[b][1].x > (state.widgetSize.width * 0.604) && state.bounds[b][1].x < (state.widgetSize.width * 0.827) && state.bounds[b][1].y > (state.widgetSize.width * 0.665) && state.bounds[b][1].y < (state.widgetSize.width * 0.778) 

  Are their own function

• Consider using _.map instead of the for loop, you are return state anyway, so _.map would be more semantic.

• Consider breaking up the nesting of if s with functions. Every time you use a code comment, consider making it a function. For example

   // Top right corner if(state.antiRebounce) { state.vy *= -1; state.antiRebounce = false; } else { state.antiRebounce = true; } state.y = state.bounds[b][1].y + state.radius + 1; state.vy *= -1; 

  could be

   const topRightCorner = (state) => { if(state.antiRebounce) { state.vy *= -1; state.antiRebounce = false; } else { state.antiRebounce = true; } state.y = state.bounds[b][1].y + state.radius + 1; state.vy *= -1; return state; } 

Once you broken this giant function into many smaller easier to understand functions. You can use chrome profiling tools to find bottlenecks for performance.

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

With the code broken up, it will be easy to see what part of the script is suffering from performance problems, at that point you can see about how to fix, without doing pre-mature optimization.

Answer 3

AS far as I know (but I don't know so much) your situation doesn't give us so much space of manovre because you need to "see" always in the screen all that bouncing objects. The bound system seems good for me checking for the bounds before a more accurate point collision detection. How many fps are you trying to render? Maybe something could be tuned I guess. Bye