How to remove a child from a random array? - arrays

Question

I have an array that randomly creates 10 dots. However there's a certain area where I do not want them to be created. How can I achieve this? My code gives me error 2025.
"The supplied DisplayObject must be a child of the caller."
It will occasionally output the totalDots as instructed, (trace""+totalDots), but 90% of the time it will give me the error.
public var numDots:Array = [];
public var totalDots:int = numDots.length;
public var box:Box = new Box();
public function addBox():void
{
box.x = stageWidth/2;
box.y = stageHeight/2;
addChild(box);
}
private function addDot():void
{
for(var i:int = 0; i < 10; i++)
{
var dot:Dot = new Dot();
dot.x = Math.floor(Math.random() * stageWidth);
dot.y = Math.floor(Math.random() * stageHeight);
this.addChild(dot);
totalDots++;
trace(""+totalDots);
for(var j:int = 0; j < totalDots; j++)
{
if(numDots[j].hitTestObject(box))
{
stage.removeChild(numDots[j]);
numDots.splice(j, 1);
totalDots--;
}
}
}
}

Answer 1

Your problem is your nested loop. With each iteration, you add one new dot, and then loop over all of the existing ones, and remove them if it collides with the box. I don't think that's what you intended to do.
It looks like you just want to make sure the dots are not added within a certain area. In that case, keep it simple with a do while loop:
for(var i:int = 0; i < 10; i++)
{
var dot:Dot = new Dot();
this.addChild(dot);
do {
dot.x = Math.floor(Math.random() * stageWidth);
dot.y = Math.floor(Math.random() * stageHeight);
} while(dot.hitTestObject(box))
totalDots++;
trace(""+totalDots);
}

Answer 2

You never add any dot to your array.
You add the dot to the display list like so:
this.addChild(dot);
and you try to remove it like so:
stage.removeChild(numDots[j]);
Despite the fact that the dot is never added to the array, this couldn't have worked even if it was. That's because this is not stage. They are two different things.
You should never use stage.addChild() (check the documentation for more info on that). Just call addChild() all the time which is equivalent to this.addChild(). This ensures that you always operate on one and the same DisplayObjectContainer

Answer 3

For what it's worth, you can avoid the trial loop altogether by calculating a random value with the proper interval (the difference between the include and exclude areas) and deriving x and y coordinates from that.
The following code (written in a language I do not know, apologies if the syntax is faulty) has two cases. The if case handles the situation where the dot will appear left or right of the exclusion box, and the range of x values is restricted to being left or right of that box. The else case is where the dot will appear above or below the box, and the x values are not restricted.
var interval:int = stageWidth * stageHeight - box.w * box.h;
var cut:int = interval - (stageWidth - box.w) * box.h;
for (var i:int = 0; i < 10; i++) {
var r:int = Math.floor(Math.random() * interval);
var x:int;
var y:int;
if (r >= cut) {
r -= cut;
y = r / (stageWidth - box.w);
x = r - y * (stageWidth - box.w);
y += box.y;
if (x >= box.x) x += box.w;
} else {
y = r / stageWidth;
x = r - y * stageWidth;
if (y >= box.y) y += box.h;
}
var dot:Dot = new Dot();
dot.x = x;
dot.y = y;
this.addChild(dot);
totalDots++;
trace(""+totalDots);
}
This assumes that box is entirely within stageWidth,stageHeight.
Also notable is that it allows the dots to overlap; same as the original code.
For more complex shapes you can set box to the largest rectangle fully enclosed by that shape so as to avoid many but not all retry cases. This can be helpful for large shapes and many dots. Or there are variations which might manage a perfect fit to another shape (eg., an ellipse).