[SOLVED] I'm failing at drawing multiple quads in a loop

Processing Coding Questions
1

I am trying to draw multiple quads in a for-loop. It looks like this:

for(int i = 0; i < o.getAllObjects().length; i++) {
  float[] objects = o.getAllObjects();
  println(objects[i]);
  fill(255);
  noStroke();
  quad(objects[i], objects[i+1], objects[i+2], objects[i+3], objects[i+4], objects[i+5], objects[i+6], objects[i+7]);
  i = i+7;
}

I know the for-condition (and the whole loop for that matter) can be simplified but thats nothing I worry about right now. The contents of the array look like the following:

12,12,12,80,80,80,80,12,300,300,300,350,350,350,350,300

8 Numbers always represent one quad. Sadly,only the last quas thats in the array shows in the program. Am I making a basic mistake? I think i might be missing a basic rule about drawing here.

I appreciate all answers

1 Like
2

Hey,

It would be helpful if you could post a full working example (MCVE) that anyone can run.

3

Hmm, first off there is a place where you put in:

i = i+7;

There is no need to re-assign the variable i like that, because you already have that happening in the for loop itself :smiley:

So, if you are going to do that? First off I would say up top in your for loop, change your i++ to i+=8 and just be all good with that.

Secondly, how are you drawing your quads? And where is this for loop? Those could explain why you’re only getting the last quad.

Nonetheless, it would be greatly appreciated if you could post some more code from your project, and we will be glad to help out!

EnhancedLoop7

2 Likes
4

I’m a little OOOCD perhaps, but how about making a Rect or Quad class to store your four coordinates in before you draw? So much cleaner?


int numQuads = 16;
Quad[] quads;

void setup()
{
  size(800, 600);
  
  // your list of quads
  quads = new Quad[numQuads];
  
  // assign attributes / initialize each quad with some values 
  // (ignore the below, you will do this in your own way)
  for(int i = 0; i < quads.length; i++)
  {
    // pick a random location (x, y)
    PVector randomLoc = new PVector(random(width), random(height));
    
    quads[i] = new Quad();
    
    // create a randomly rotated square (in a bit of a backward way) and add it to the random loc above
    float rotOffset = random(PI/2);
    float radius = 10;
    quads[i].a = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0), radius * sin(rotOffset + 0)));
    quads[i].b = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.25 * TWO_PI), radius * sin(rotOffset + 0.25 * TWO_PI)));
    quads[i].c = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.5 * TWO_PI), radius * sin(rotOffset + 0.5 * TWO_PI)));
    quads[i].d = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.75 * TWO_PI), radius * sin(rotOffset + 0.75 * TWO_PI)));
  }
  
}

void draw()
{
  // render your quads
  for(int i = 0; i < quads.length; i++)
  {
    stroke(0);
    quads[i].render();
  }
}

class Quad
{
  PVector a, b, c, d;
  
  void render()
  {
    beginShape();
    vertex(a.x, a.y);
    vertex(b.x, b.y);
    vertex(c.x, c.y);
    vertex(d.x, d.y);
    endShape(CLOSE);
  }
}
2 Likes
5

This was basically the answer I was looking for. I didn’t know how to save the objects themselves so I opted for the conversion method of just saving the coordinates. I will be trying to implement this later on.

If I don’t get it to work, I’ll do what the other guys said and extend my question with more code and information. It’s quite difficult tho because it already is quite a big project.

Thanks for all the quick answers. ^^

6

This fixed it. I now need to add some sort of hit detection to those squares. I need to be able to check, whether my object hits the squares. Before I go out of my way and try around for hours, maybe you already have an approach for me? Thanks again for your answer and the great example-code.

7

Many guides exist for that subject. Here is one:

1 Like
8

Do you mean collision detection as TfGuy mentioned? Or do you want to detect mouse-over / clicks?

Most ghetto way to do the latter (though one that often works fine) is to do add a really simple function that checks whether the mouse is near the rectangle that you can add to your rect class:

int numQuads = 16;
Quad[] quads;

void setup()
{
  size(800, 600);

  // your list of quads
  quads = new Quad[numQuads];

  // assign attributes / initialize each quad with some values 
  // (ignore the below, you will do this in your own way)
  for (int i = 0; i < quads.length; i++)
  {
    // create a randomly rotated square (in a bit of a backward way) and add it to the random loc above
    quads[i] = new Quad();
    
    // pick a random location (x, y)
    PVector randomLoc = new PVector(random(width), random(height));

    float rotOffset = random(PI/2);
    float radius = 10;
    
    quads[i].centroid = randomLoc;
    quads[i].radius = radius;
    
    quads[i].a = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0), radius * sin(rotOffset + 0)));
    quads[i].b = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.25 * TWO_PI), radius * sin(rotOffset + 0.25 * TWO_PI)));
    quads[i].c = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.5 * TWO_PI), radius * sin(rotOffset + 0.5 * TWO_PI)));
    quads[i].d = PVector.add(randomLoc, new PVector(radius * cos(rotOffset + 0.75 * TWO_PI), radius * sin(rotOffset + 0.75 * TWO_PI)));
  }
}

void draw()
{
  background(180);
  
  // render your quads
  for (int i = 0; i < quads.length; i++)
  {
    if(quads[i].isMouseOver())
      fill(255, 0, 0);
    else
      fill(255);
      
    stroke(0);
    quads[i].render();
  }
}

class Quad
{
  PVector a, b, c, d;

  PVector centroid;
  float radius;

  boolean isMouseOver()
  {
    if (dist(mouseX, mouseY, centroid.x, centroid.y) < radius)
      return true;
    else
      return false;
  }

  void render()
  {
    beginShape();
    vertex(a.x, a.y);
    vertex(b.x, b.y);
    vertex(c.x, c.y);
    vertex(d.x, d.y);
    endShape(CLOSE);
  }
}