# Loops with diagonal queues

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

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:

`:)`

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

`:)`

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?

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.

`:)`

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

}

}
}
``````

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.

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!

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:

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

`:)` 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?

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.

`:)`

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?   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!

`:)`

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?

Yes, it is possible!

`:)`

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

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

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:

`:)`