# Loops inside loops

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!

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

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;
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

@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