Loops inside loops

Processing Coding Questions
1

Hi there!

I have created a function with a diagonal queue of points in random positions and now I want to convert It into blocks of diagonal queues in random positions, as you can see in the picture. I am trying to make the first block but the queues are not aligned and I don’t know how to do It, could you please help me ? Thanks in advance for your patiente, I am learning so much with all of you these weeks!

IMG_20210916_105112
IMG_20210916_1051121080×1086 50.6 KB 

void setup(){
  size(1000,1000);
  background (255);
  
  for(int i=0; i<6; i++){
  float a = random(0,800);
  float x = 0;
  float y = 0;
  drawDiagonal(a,x,y);
}
  
}

void drawDiagonal(float a, float x, float y){
stroke(0);
for(x = 0; x < 100; x=x+10) {
    y=x;
      point(x+a,y+a);
      if(random(1)>0.5) {
        strokeWeight(random(3,6));
        }
       else{
         strokeWeight(2);
       }        
}
}
1 Like
2

Hi @humano,

Please find below my attempt to solve your question.
This was my line of thought:

  1. If you are not familiar with object-oriented programming you should definitely have a look!!
  2. A class called diagonal represents a diagonal block.
  3. The class receives the position, width, height, number of lines on the block and space between diagonal lines.
  4. In the class, I implement a block method, which creates as many diagonal lines as you specify on the constructor of the class.
  5. The diagonal line method, creates a single diagonal line.

I created an array of 6 diagonal blocks, with random x and y initial position. Finally, I display them inside the draw function by calling the block function of the class for each object created!

Hope it helps!
Best regards

Diagonal d[];
void setup() {
  size(800,800, P2D);
  
  d = new Diagonal[6];
  for(int i = 0; i < 6; i++){
    d[i] = new Diagonal(int(random(0,600)), int(random(0,600)), 6, 100, 20, 15);
  }
}

void draw() {
  background (255);
  for(int i = 0; i < 6; i++){
    d[i].block();
  }
}


class Diagonal {
  int xpos, ypos, nlines;
  int widthLine, heightLine, space;

  Diagonal(int x, int y, int n, int w, int h, int s) {
    this.xpos = x;
    this.ypos = y;
    this.nlines = n;
    this.widthLine = w;
    this.heightLine = h;
    this.space = s;
  }

  void block() {
    for (int i = 0; i < nlines; i++) {
      diagonal_line(i * space);
    }
  }

  void diagonal_line(int space) {
    stroke(0);
    line(xpos, ypos+space, xpos+widthLine, ypos+heightLine+space);
  }
}
2 Likes
3

@MiguelSanches did a very pro approach, but honestly @humano - I think you were almost there. I did not really understand what was going on in your drawDiagonal function, but here’s something that looks a little bit like your sketch, but with minimal adjustments. And you were right! Two nested loops were the answer:

void setup() {
  size(1000, 1000);
  background (255);

  for (int i = 0; i < 6; i++) {
    // draw a number of diagonal blocks
    float a = random(0, 80);
    float blockX = random(0, width); // you should actually subtract the width of the block
    float blockY = random(0, height); // same for height, but hey
    
    // for each block, draw the diagonals
    for(int j = 0; j < 9; j++) {
      float x = blockX;
      float y = blockY + j*4;
      drawDiagonal(a, x, y);
    }
  }
}

void drawDiagonal(float a, float x, float y) {
  stroke(0);
  line(x, y, x+100, y+a);
}
2 Likes