Javascript For Loop confusion, why does my array not update properly? (easy fiddle included)

Question

So I started trying out html5 canvas + easeljs and I made a simple experiment. It makes circles that fall vertically (and when they go off the stage should reset to 0). Everything works nicely but my "for loop" that checks for the circle's y pos seems to only grab the last value? I can't seem to figure it out, I have spent so much time adding/removing, its been like 4 hours and I'm very frustrated.

I included a fiddle for reference that shows the problems:

http://tinyurl.com/ktq6qcl

thanks for looking!

Answer 1

When you write

theParticle.graphics.beginFill("blue")
  .drawCircle(getRandomArbitary(0, stageH), getRandomArbitary(0, stageW), particleSize);

you are creating a Shape positioned at 0,0 in which you draw a blue dot at a random position.

So effectively you are moving 3 Shapes from position 0,0 down to the bottom of the canvas and resetting them to 0,0 only at that point.

You should set the x and y of theParticle to a random position instead of the x and y of the dot.

Edit: Like this

theParticle.graphics.beginFill("blue").drawCircle(0, 0, particleSize);
theParticle.x = getRandomArbitary(0, stageH);
theParticle.y = getRandomArbitary(0, stageW);