# For loop doesn't load properly

**URL:** <https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463>\
**Category:** Libraries\
**Created:** [November 16, 2020, 4:21pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463 "2020-11-16T16:21:07Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gianni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gianni/32/11112_2.png) [@Gianni](https://discourse.processing.org/u/Gianni)\
**Post date:** [November 16, 2020, 4:21pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/1 "2020-11-16T16:21:07Z")

</div>

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:

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

```

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

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

```

And with the following condition, the loading never finishes:

```auto
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 🎉.

```auto
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)

}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 16, 2020, 7:51pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/2 "2020-11-16T19:51:00Z")

</div>

Welcome to the forums!

> [@Gianni](#):
>
> I’m trying to find a way to make sure the colliding points always match a chosen number.

To clarify, you’re trying to to find a specific number of points inside the polygon?

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [November 16, 2020, 7:59pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/3 "2020-11-16T19:59:40Z")

</div>

Hi Gianni,  
welcome to the p5 forum !

I don’t know if placing your shape on the top left corner is intentional, because you’re missing at least 3/4 of the sides of your poligon, because it is for now placed on the origin of the sketch (so 0,0).  
So when the shape is extremely thin (ike in the pic below I took from your portion of code to generate a shape) or just create a shape such small that its colliding points don’t reach 220, explaining why you have troubles with your 2nd & 3rd attempt.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eb69fefaccf71f5f7ae433969fad4d3b059ec80d.png)

So actually I don’t really understand why you condition your for loop with the possibility of a hit, because if the shape doesn’t reach your limit, I suppose you do not care about it, so you can juste regenerate a new one if it’s not what you’re looking for

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 16, 2020, 8:16pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/4 "2020-11-16T20:16:14Z")

</div>

Okay, i get what you’re doing now. It gets the job done, but its definitely the brute-force method.

**Interesting fact:** It rerolls ~150 times on average.

**The Bug** : You never reset `count`, so, (probably within the first iteration), you overshoot 220 and the for loop misses the chance to ever be satisfied. (Fortunately openprocessing has infinite-loop protection or I never would have known).

Consider doing the check inside the if statement, breaking the loop once you’ve reached 220 hits:

```auto
        if (hit) {
          stroke('aqua'); strokeWeight(10);
          count++; // counts collision
          
          if(count > 220){
            break;
          }
        }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 16, 2020, 8:23pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/5 "2020-11-16T20:23:27Z")

</div>

Hi,

Welcome to the community! 😉

Few things before tackling the real problem :

- Instead of saying `translate(560, 560);` if you want to translate to the middle of the screen, use `translate(width / 2, height / 2);` so your code more clear and adaptable

- Then when you check the collision, also use `collidePointPoly(px - width / 2, py - height / 2, polyA)` and for the `point(...)` call

I think rather than using the `p5.collide2d.js` library, an alternative way to do this is to draw a random polygon on the screen with a distinct color (let’s say pure red).

Then you are going to loop for every points on the grid and check if the corresponding pixel is pure red. If yes, the point is in the polygon.

Repeat those steps until you find a polygon that matches the target number of points.

For example :

```auto
// Polygon settings
const sides = 10
const radius = 150

// The size of grid cells
const grid_spacing = 20;

// The target number of points to hit
const target_hit = 20;

function setup() {
  createCanvas(400, 400);
}

/*
Display a random polygon
*/
function randomPolygon() {
  // We choose red as the color
  fill(255, 0, 0);
  noStroke();
  
  push();
  translate(width / 2, height / 2);
  beginShape();
  for (let i = 0; i < sides; i++) {
    const angle = i * (TWO_PI / sides);
    const x = cos(angle) * random(radius);
    const y = sin(angle) * random(radius);

    vertex(x, y);
  }
  endShape();
  pop();
}

/*
Return the number of points inside the polygon
*/
function getPointsInsidePolygon() {
  let hit = 0;
  
  loadPixels();
  strokeWeight(5);
  for (let x = 0; x < width; x += grid_spacing) {
    for (let y = 0; y < height; y += grid_spacing) {
      let off = (y * width + x) * 4;

      // If the pixel is red
      if (pixels[off] == 255 && pixels[off + 1] == 0 && pixels[off + 2] == 0) {
        hit++;
      }
    }
  }
  
  return hit;
}

function draw() {
  background(255);
  
  randomPolygon();

  let hit_number = getPointsInsidePolygon();

  // Stop when found
  if (hit_number == target_hit) {
    noLoop();
  }
}

```

 ![ezgif-1-efb1d83b63b7](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b1d042538985b2f2ec0618951bb88013cd4ce82c.gif)

The downside of this is that you can’t really draw other things on the screen because it’s not going to be red anymore. It’s possible with the PGraphics equivalent in p5.js

---

<div class="post-metadata">

**Author:** ![Gianni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gianni/32/11112_2.png) [@Gianni](https://discourse.processing.org/u/Gianni)\
**Post date:** [November 16, 2020, 8:30pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/6 "2020-11-16T20:30:11Z")

</div>

Brilliant!! This works perfectly. Thank you so much. How did you measure the rerolls btw?

---

<div class="post-metadata">

**Author:** ![Gianni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gianni/32/11112_2.png) [@Gianni](https://discourse.processing.org/u/Gianni)\
**Post date:** [November 16, 2020, 8:31pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/7 "2020-11-16T20:31:39Z")

</div>

Thank you for your reply! I have used the translate() function to reposition the polygon. Maybe you’ve missed that.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 16, 2020, 8:37pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/8 "2020-11-16T20:37:27Z")

</div>

I had a “reroll” counter. Every time the main for-loop started again, I incremented. I tinkered with the sketch [here](https://www.openprocessing.org/sketch/1018545) if you want to take a look.

Good luck with your work! Can I ask what this things for?

---

<div class="post-metadata">

**Author:** ![Gianni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gianni/32/11112_2.png) [@Gianni](https://discourse.processing.org/u/Gianni)\
**Post date:** [November 16, 2020, 8:43pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/9 "2020-11-16T20:43:50Z")

</div>

Thank you so much for this approach and the tips you’ve shared! I will need a bit of time to study what you’ve done exactly but it seems like a good alternative. 🙂

---

<div class="post-metadata">

**Author:** ![Gianni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gianni/32/11112_2.png) [@Gianni](https://discourse.processing.org/u/Gianni)\
**Post date:** [November 16, 2020, 8:53pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/10 "2020-11-16T20:53:29Z")

</div>

Ahhh makes sense!

I’m working on a textile-print that will be made out of visual encryptions of text and a bit of data visualization. I’m using the dots inside the polygons as reference points for the visual encryption (yellow illustrations). Here’s a picture of one of the elements (I’ll remove the polygons):

 ![PROCESS07 - 2020-11-15T201625.839](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2c9ae2a14b0ae9a2515842491279f302997eba61.png)

Because the text that will go into this element is pre-defined I needed to make sure the reference points match. Thank you again 🙂

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 16, 2020, 9:50pm UTC](https://discourse.processing.org/t/for-loop-doesnt-load-properly/25463/11 "2020-11-16T21:50:19Z")

</div>

Thats really cool! Whats the backstory? Why textiles?