Loops with diagonal queues

humano · August 23, 2021, 12:42am

Hi there! I am learning about loops with “for” with a useful tutorial. I have made a pattern with few lines of code (amazing!). But the pattern that I really want to do has diagonal lines of points, as you can see on the picture, and I can not Imagine the way on my head. Could you please give me a hand? Many thanks!

void setup(){
  size(1000,1000);
  background (255);
  
  
  
  for(int x = 100; x < 1000; x=x+100) {
    for(int y = 100; y <1000; y=y+100){
    stroke(0);
    strokeWeight(10);
    point(x, y);
  }
}
}

glv · August 23, 2021, 1:21am

Hello,

You can select between “even” and “odd”:

for(int y = 0; y <10; y++)
    {
    if (y%2 == 0)
      println("even");
    else
      println("odd");
    }

References:

:)

humano · August 23, 2021, 1:29am

Do you mean this?

void setup(){
  size(1000,1000);
  background (255);
  
  
  
  for(int x = 100; x < 1000; x=x+100) {
  for(int y = 0; y <10; y++)
    {
    if (y%2 == 0)
      println("even");
    else
      println("odd");
    
    stroke(0);
    strokeWeight(10);
    point(x, y);
  }
}
}

glv · August 23, 2021, 1:53am

Explore the references I added.

:)

humano · August 23, 2021, 2:54am

For that diagonal in the center I thought about some thing able to make:

X 100 y100; X200 y200; x300 y300; x400 y400 …

And then create a loop to make the same with other diagonals, but I don’t see the way to do it with if or %, should I look for another way?

glv · August 23, 2021, 10:03am

Hello,

I shared one example (a hint) of how to do this.

In the example I provided:

the for loop is a counter
the % operator checks for odd or even
the if else evaluates the odd or even condition
the spacing is determined by a factor; in this example 10.

Example:

for(int y = 0; y <5; y++)
  {
  if (y%2 == 0)
   text ("even", 20, y*10);
  else
   text ("odd", 10, y*10);
  }

There are other ways to do this.

:)

humano · August 23, 2021, 12:23pm

Thank you so much, but I think that I don’t get it

void setup(){
  size(1000,1000);
  background (255);
  
  
    stroke(0);
    strokeWeight(10);
  for(int x = 100; x < 1000; x=x+100) {
     for(int y = 100; y < 1000; y=y+100){
  if (y%2 == 0)
    point(x, y);
  else
    point(x+100, y);
  
  }
           
      
}
}

RichardDL · August 23, 2021, 9:18pm

The problem is that your y variable is jumping in steps of 100, so is always even. (This solution is horrible but funny: y=y+100 change to +101, and point(x+100, ) should be x+50, )

I find it better to use x and y variables that count the items, eg. sqX that counts from 0 to 10, then calculate the graphical position from that, usually with two variables offsetX and scaleX; Do the same for Y. Now your sqY counts in 1s and can be used in the y%2 calculation. If you want to change the size you can alter the scale values without it affecting the logic.

humano · August 23, 2021, 9:59pm

Thank to both of you!

As you can see, I am really beginner, so I don’t drive many of the things that you suggest me. With my knowledge I can do something like that:

void setup(){
  size(1000,1000);
  background (255);
  
  
    stroke(0);
    strokeWeight(10);
  for(int x = 100; x < 1000; x=x+200) {
     for(int y = 100; y < 1000; y=y+200) {
    point(x,y); 
}    
}
  for(int x = 100; x < 900; x=x+200) {
     for(int y = 100; y < 800; y=y+200) {
    point(x+100,y+100);
}
} 


}

Maybe the code is not so smart, but it would be enough… if not for the second part. I want to make variations of colors and I want them to be diagonal, as you can see here:

So maybe my first question should be how to make a diagonal queue of points and then try to make a loop.

I can make a pattern with horizontal and vertical queues, but the colors change in those directions, so is not exactly what I want. I share here the result:

So how could a make a diagonal queue of points?

Thank you so much for your help!

glv · August 24, 2021, 10:25am

One for() loop for each diagonal; this will be inner loop later.
x = y;

Result:

You can add an outer loop later to control this inner loop.

This is what I did for diagonals in a square grid:

made a separate for() loop for each diagonal to fit in a small grid
looked for a pattern
created an outer loop to fit the pattern and control inner loop

:)

humano · August 24, 2021, 3:22pm

Thank you so much, x=y it is what my head was looking for (coding needs some mathematics )

Now I have made two diagonals with this code:

void setup(){
  size(1000,1000);
  background (255);
  
  
  
    stroke(0);
    strokeWeight(10);
  for(int a = 100; a < 1000; a=a+100) {
    int b = a;
    point(a,b); 
  for(int c = 300; c < 1000; c=c+100) {
    int d = c;
    point(c,d-200); 
}
}
}

I see in new diagonal x+200 and y-200, but I don’t know how to make a loop with that, because I want to make a lot of new diagonals. Could you please help me?

glv · August 24, 2021, 4:52pm

Hello,

You were nesting your loops and that is not necessary for this code.
I cleaned it up.

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

  stroke(0);
  strokeWeight(10);
  for (int a = 100; a < 1000; a=a+100)
  {
    int b = a;
    point(a, b);
  }

  for (int c = 300; c < 1000; c=c+100)
  {
    int d = c;
    point(c, d-200);
  }

// Add more for() loops to start seeing a pattern

}

Add more for() loops to complete the diagonals to start seeing a pattern.

:)

humano · August 24, 2021, 8:47pm

Thanks!

I have made this and I have seen than every line has +200 in X coordinate and -200 Y coordinate to the right of Centered diagonal, and +200 in Y coordinate and -200 in X coordinate to the left.

void setup(){
  size(1000,1000);
  background (255);
  
  
    stroke(0);
    strokeWeight(10);
  for(int a = 100; a < 1000; a=a+100) {
    int b = a;
    point(a,b); 
    }
  for(int c = 300; c < 1000; c=c+100) {
    int d = c;
    point(c,d-200); 
    }
  for(int e = 500; e < 1000; e=e+100) {
    int f = e;
    point(f,e-400); 
    }
   for(int g = 700; g < 1000; g=g+100) {
    int h = g;
    point(g,h-600); 
    }
   for(int i = 900; i < 1000; i=i+100) {
    int j = i;
    point(i,j-800); 
    }
    
   for(int l = 300; l < 1000; l=l+100) {
    int k = l;
    point(k-200,l); 
    }    
   for(int n = 500; n < 1000; n=n+100) {
    int m = n;
    point(m-400,n); 
    }  
      
   
 }

How could change this values gradually?

glv · August 24, 2021, 10:09pm

You can work on num2.

The loop in the bottom will eventually become your outer loop and you will only need one inner loop for each diagonal.

Give it a try!

:)

humano · August 24, 2021, 11:59pm

I guess last loop make that gradual increase, but I don’t know to use it on first loop. What do you mean with “each diagonal”? It isn’t possible to make the pattern with a loop?

As you can see, I am a little lost : S

void setup(){
  size(1000,1000);
  background (255);
  
  
    int num1 = 100;
    int num2 = 100;
    
    for (int i = 0;i<5;i++){
    num1 = 100 + i*200;
    num2 = 100 - i*200; 
    }
  
    stroke(0);
    strokeWeight(10);
  for(int a = 100; a < 1000; a=a+num1) {
    int b = a;
    point(a,b); 
    }
    }

I am thinking in how to repeat this loop…

  stroke(0);
  strokeWeight(10);
  for (int a = 100; a < 1000; a=a+100)
  {
    int b = a;
    point(a, b);
  }

…with an operation to make a pattern with, for example 100 diagonals, without writing a line for everyone. It will be possible?

glv · August 25, 2021, 12:38am

Yes, it is possible!

:)

humano · August 25, 2021, 12:58am

Great! Should I focus first of all on X coordinate? May I increase X value with a loop?

humano · August 25, 2021, 8:22pm

I have made a function with first diagonal

void setup(){
  size(1000,1000);
  background (255);
  
  }
  
void draw(){
    diagonal(100,100);
  }
    
void diagonal(int a,int b) {
    stroke(0);
    strokeWeight(10);
    for(a = 100; a < 1000; a=a+100) {
    b = a;
    point(a,b); 
    }
  }

And I have made a grower number with a loop

for (int num1 = 0; num1<1000; num1=num1+100){
   println(num1);
  }

So now I ask myself how can I link them to create as many lines as I want. I have tried with this but is not working

void setup(){
  size(1000,1000);
  background (255);
  
  }
  
void draw(){
   for (int num1 = 0; num1<1000; num1=num1+100){
    diagonal(num1,100);
  }
  }
    
void diagonal(int a,int b) {
    stroke(0);
    strokeWeight(10);
    for(a = 100; a < 1000; a=a+100) {
    b = a;
    point(a,b); 
    }
  }

glv · August 26, 2021, 4:01pm

Hello,

See reference:

And play around with the examples.

// Nested for() loops can be used to
// generate two-dimensional patterns

size(400, 400);
strokeWeight(5);

//outer loop
for (int i = 10; i < 100; i += 10) 
  {
    
    //inner loop   
    for (int j = 0; j < 320; j = j+20) 
    {
    // Try each of these:
    point(j, j);
    //point(j+i, j);
    //point(j, j+i);
    }
  
  }

Tutorials:

:)

Topic		Replies	Views
Loops inside loops Coding Questions	2	294	September 17, 2021
Loop with increasing inclination Coding Questions	24	507	June 3, 2022
Academic exercise HELP Coding Questions homework	5	436	June 25, 2020
Easy question from new user! +Parallel lines drawing Coding Questions	1	542	June 1, 2020
Making patterns with modulo Gallery	0	1668	February 3, 2020

Loops with diagonal queues

Related topics