# Loops with diagonal queues

**URL:** <https://discourse.processing.org/t/loops-with-diagonal-queues/31850>\
**Category:** Coding Questions\
**Created:** [August 23, 2021, 12:42am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850 "2021-08-23T00:42:45Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 23, 2021, 12:42am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/1 "2021-08-23T00:42:45Z")

</div>

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!

 ![IMG_20210822_204210](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a637a1a844f357dd93f8f228aa44d76ecfc123cf.jpeg)

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

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 23, 2021, 1:21am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/2 "2021-08-23T01:21:30Z")

</div>

Hello,

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

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

```

References:

- [https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html)
- [https://processing.org/reference/if.html](https://processing.org/reference/if.html)
- [https://processing.org/reference/else.html](https://processing.org/reference/else.html)

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 23, 2021, 1:29am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/3 "2021-08-23T01:29:52Z")

</div>

Do you mean this?

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

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 23, 2021, 1:53am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/4 "2021-08-23T01:53:10Z")

</div>

> [@humano](#):
>
> Do you mean this?

Explore the references I added.

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 23, 2021, 2:54am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/5 "2021-08-23T02:54:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 23, 2021, 10:03am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/6 "2021-08-23T10:03:24Z")

</div>

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:

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

```

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

There are other ways to do this.

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 23, 2021, 12:23pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/7 "2021-08-23T12:23:47Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [August 23, 2021, 9:18pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/8 "2021-08-23T21:18:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 23, 2021, 9:59pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/9 "2021-08-23T21:59:01Z")

</div>

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:

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

 ![IMG_20210823_175945](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/46034c1efb974cc2c577f6017ef06e302b36072c.jpeg)

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:

 ![IMG_20210823_175748](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f6027f95565e78ad133fa029e634d3d8bdaca34a.jpeg)

So how could a make a diagonal queue of points?

Thank you so much for your help!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 24, 2021, 10:25am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/10 "2021-08-24T10:25:50Z")

</div>

> [@humano](#):
>
> So how could a make a diagonal queue of points?

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

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

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

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

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

`:)`

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 24, 2021, 3:22pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/11 "2021-08-24T15:22:02Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 24, 2021, 4:52pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/12 "2021-08-24T16:52:11Z")

</div>

Hello,

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

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

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 24, 2021, 8:47pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/13 "2021-08-24T20:47:50Z")

</div>

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.

```auto
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? 😅😅😅

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 24, 2021, 10:09pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/14 "2021-08-24T22:09:31Z")

</div>

> [@humano](#):
>
> How could change this values gradually?

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

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!

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 24, 2021, 11:59pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/15 "2021-08-24T23:59:16Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 25, 2021, 12:38am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/16 "2021-08-25T00:38:45Z")

</div>

> [@humano](#):
>
> with an operation to make a pattern with, for example 100 diagonals, without writing a line for everyone. It will be possible?

Yes, it is possible!

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 25, 2021, 12:58am UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/17 "2021-08-25T00:58:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 25, 2021, 8:22pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/20 "2021-08-25T20:22:58Z")

</div>

I have made a function with first diagonal  
🥳

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

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

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

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 26, 2021, 4:01pm UTC](https://discourse.processing.org/t/loops-with-diagonal-queues/31850/21 "2021-08-26T16:01:53Z")

</div>

Hello,

See reference:

> **[Reference](https://processing.org/reference/for.html)**
>
> Controls a sequence of repetitions. A basic for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). The loop continues until …

And play around with the examples.

```auto
// 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:

> **[For loops](https://happycoding.io/tutorials/processing/for-loops)**
>
> Learn how to use for loops in Processing.

> **[Learning Processing](https://thecodingtrain.com/Courses/learning-processing/)**
>
> These video lessons accompany the introduction from the Learning Processing textbook.

`:)`