Some Shapes Not Being Removed In Two.js When Looping Through Array Of All Shapes

I'm building a web-app using Two.js which generates shapes and then removes them again after their lifespan is up. When making the shapes I push them into a new array which I then

Solution 1:

You're removing things from @_shapes while you're looping over it. Consider a simplified example:

a = [0..3]
for e in a
    if(e % 2 == 0)
        a.splice(e, 1)
    console.log(e, JSON.stringify(a))

That will give you this in the console:

0"[1,2,3]"2"[1,2]"undefined"[1,2]"undefined"[1,2]"

Demo: http://jsfiddle.net/ambiguous/9fsYL/

You'll notice that things start out fine but as soon as you splice the array to remove an element, everything falls apart in a pile of nonsense. The undefineds appear in the console because the loop caches the array's length (which changes when remove things) so you end up running off the end of the array.

When you @_shapes.splice shape.index, 1, you shift everything after shape.index towards the beginning of the array but your for loop doesn't know that. The result is that you've removed the desired element and the loop won't see the next element.

A common solution to this problem is to iterate backwards. That way, when you remove something, you only affect the positions of things that you've already seen. For example, if you change the above loop to:

for e in a by-1

then you'll get something sensible in the console:

3 "[0,1,2,3]"
2 "[0,1,3]"
1 "[0,1,3]"
0 "[1,3]"

Demo: http://jsfiddle.net/ambiguous/Yngk8/

In your case, saying:

for shape in@_shapesby -1

should fix the problem.