Hello everyone!

I’m working on a sketch that looks for collision between a grid of points and a random polygon. I’m trying to find a way to make sure the colliding points always match a chosen number.

because the polygon is always different, I didn’t know how to find a relationship between the polygon and the grid, so my attempt is a For Loop that keeps drawing a new polygon until the colliding points match my number.

The sketch itself works fine and loads immediately, when I use this condition:

```
for (; count < 220;) { }
```

With the following condition, it works sometimes (sometimes the browser will load forever):

```
for (; count < 170 || count > 220;) { }
```

And with the following condition, the loading never finishes:

```
for (; 220 !== count;) { }
```

I was wondering if there is a way to make sure the loading does finish? I don’t mind waiting for a while, but as of now it seems my browser doesn’t intent to. I’m also open to other suggestions or approaches that have the same outcome. See full code below. I have used the p5.collide2d.js library.

Also, this is my first post .

```
function setup() {
const sides = 8;
const radius = 400;
var step = (PI * 2) / sides;
var hit = true;
var count = 0;
var polyA = [];
createCanvas(1600, 1120);
translate(560, 560);
for (; 220 !== count;) {
background('blue'); // clear last polygon
polyA.splice(0, sides); // clears the array
beginShape();
for (var i = 0; i < sides; i++) { // this loop draws the polygon
var x = Math.cos(i * step) * (radius - random(0, radius));
var y = Math.sin(i * step) * (radius - random(0, radius));
polyA.push(createVector(x, y)); // add vectors to array
noFill();
stroke('white');
strokeWeight(1);
vertex(x, y);
ellipse(x, y, 10, 10);
}
endShape(CLOSE);
for (var px = 0; px <= width; px += 20) { // this loop checks for collision
for (var py = 0; py <= height; py += 20) {
hit = (collidePointPoly(px - 560, py - 560, polyA));
if (hit) {
stroke('aqua'); strokeWeight(10);
count++; // counts collision
}
else {
stroke('aqua'); strokeWeight(2);
}
point(px - 560, py - 560);
}
}
}
// TEXT
noStroke();
fill('white');
textSize(30);
text('Sides Poly: ' + sides, 560, -350);
text('Big Dots: ' + count, 560, -300)
}
```