# Loop with increasing inclination

**URL:** <https://discourse.processing.org/t/loop-with-increasing-inclination/37240>\
**Category:** Coding Questions\
**Created:** [May 30, 2022, 11:26pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240 "2022-05-30T23:26:33Z")\
**Posts on this page:** 20\
**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:** [May 30, 2022, 11:26pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/1 "2022-05-30T23:26:33Z")

</div>

Hi there! I want to make a loop with diagonal lines whose inclination grows little by little. My loop draws lines 10 by 10, but I want to incline them 1 by 1 and I don’t know how. If I use variable ‘i’ I think increase start from 20, but if I create another variable that grows 1 by 1 does not work. Could you please help me?

```auto
size(1000,1000);
strokeWeight(3);

for (int i =-100; i<=1100; i+=20) {
      for (int j =0; j<=1000; j++) {
      stroke(255,0,0);
     line(i+i,0,i,1000);
      }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [May 31, 2022, 7:55am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/2 "2022-05-31T07:55:01Z")

</div>

Not really understand what you are trying to achieve? Something like that ?

```auto
void draw() {
  background(0);
  strokeWeight(1);
  stroke(255,0,0);
  for (int i = 0; i < 90; i++) {
    pushMatrix();
    translate(0,height);
    rotate(radians(i));
    line(0,0,0,-height);
    popMatrix();
  }
}

```

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 31, 2022, 10:13am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/3 "2022-05-31T10:13:16Z")

</div>

You only need ONE for loop with i

You don’t need pushMatrix or translate etc.

The line command could be

line(i, 100, i2, 60);

i2=i2+3;

---

<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:** [May 31, 2022, 12:41pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/4 "2022-05-31T12:41:39Z")

</div>

sorry, I think that I did not explain this correctly. This is want I am trying to do  
 ![procs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/5/55002b2f094d837b1bdc43602d8febaa340446ab.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 31, 2022, 12:43pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/5 "2022-05-31T12:43:52Z")

</div>

And?

Does my version work?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [May 31, 2022, 2:04pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/6 "2022-05-31T14:04:04Z")

</div>

You can just do it like this … (first two lines parallel and afterwards increase w counter for increase spacing)

```auto
void draw() {
  background(0);
  strokeWeight(3);
  stroke(255,0,0);

  for (int w=0,i=10;i+w<width;i+=10) {
    line(i,height,i+w,0);
    if (i>10)
      w++;
  }
}

```

![dummy3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/e/eec3c53702845557f123803b7d10844e68695f4c.png)

Cheers  
— mnse

---

<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:** [May 31, 2022, 2:16pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/7 "2022-05-31T14:16:52Z")

</div>

I think that your version changes both axis of the lines

---

<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:** [May 31, 2022, 2:23pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/8 "2022-05-31T14:23:07Z")

</div>

thank you so much, I would never been able to imagine this solution

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 31, 2022, 3:20pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/9 "2022-05-31T15:20:23Z")

</div>

Nice solution, i always forget you can declare multiple variables in a for loop, there’s so much to remember and some things slip the memory bank lol

---

<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:** [May 31, 2022, 9:38pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/10 "2022-05-31T21:38:30Z")

</div>

I have used your smart idea to make this growing loop and now I would like to make a decreasing one, as you can see on the picture, but I don’t find the way. Could you please help me?

 ![scrsht](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/4/0499b17b70486c8a8f8ba2d8e66edf4abbd8a00e.jpeg)

```auto
size(1000,1000);
background(0);
strokeWeight(3);

stroke(0,0,255);
for(int w=0, i=0; i<300; i+=10+w) {
  line(i,0, i,1000);
  w++;
}

for(int w=0, i=300; i<600; i+=10-w) {
  line(i,0, i,1000);
  w++;
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 31, 2022, 10:13pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/11 "2022-05-31T22:13:33Z")

</div>

Hi

Idea without loop

```auto
int c = 1;
int move=0; 
void setup() { 
  size(600, 600);
} 
void draw() { 
  //background(255); 
  move= move + c; 
  line(move, width, move, 0); 
 
    c= c +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:** [June 1, 2022, 12:17am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/12 "2022-06-01T00:17:10Z")

</div>

Really interesting, but I still don’t know how to make a decreasing loop with that

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [June 1, 2022, 12:51am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/13 "2022-06-01T00:51:05Z")

</div>

Hi

It’s same @mnse code

```auto
void draw() {
  background(0);
  strokeWeight(3);
  stroke(255,0,0);

 // for (int w=0,i=10;i+w<width;i++) {
  for (int w=0,i=10;i+w<width;i++) {
  int d =i+w;
    line(d,height,d,0);
   // if (i>10)
      w=w+15;
  }
}

```

---

<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:** [June 1, 2022, 12:56am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/14 "2022-06-01T00:56:54Z")

</div>

I could make an increasing loop with that idea, but not a decreasing one like the one you can see on the picture

 ![IMG_20220531_205535](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/1/317b5ef773d75ee7130efe13b4cdfb223cbb2969.jpeg)

```auto
size(1000,1000);
background(0);
strokeWeight(3);

stroke(0,0,255);
for(int w=0, i=0; i<300; i+=10+w) {
  line(i,0, i,1000);
  w++;
}

for(int w=0, i=300; i<600; i+=10-w) {
  line(i,0, i,1000);
  w++;
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 1, 2022, 8:30am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/15 "2022-06-01T08:30:43Z")

</div>

Why not !?

```auto
void draw() {
  background(0);
  strokeWeight(1);
  stroke(255,0,0);
  
  for(int i=0,w=0; i<width; i+=10+w) {
    line(i,0, i,height);
    if (i < width/2)
      w++;
    else 
      w--;
  }  
}

```

or if you want it even more unreadable and compact 🙂

```auto
void draw() {
  background(0);
  strokeWeight(1);
  stroke(255,0,0);
  
  for(int i=0,w=0; i<width;w+=((i < width/2) ? 1 : -1), i+=10+w) {
    line(i,0, i,height);
  }
}

```

Cheers  
— mnse

![dummy6](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/f/8f2c100a4a480ae627ae5f9d8beb66caa7fd5eef.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:** [June 1, 2022, 10:10pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/16 "2022-06-01T22:10:33Z")

</div>

amazing! now I am trying something more complex, make the space between lines larger and also the thickness of the lines, as you can see on the picture. I have created a new variable on the loop but I think it is not working

![sintitulo1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/f/ef7aa3393650a0f5bb6ce11fae9b337e2142ae4f.jpeg)

```auto
size(1000,1000);
background(255,255,255);

   

   stroke(255,0,0);
    for(int i=0,w=0,u=0; i<1000; i+=16+w) {
    strokeWeight(8+u); 
    line(i,0, i,1000);
    if (i < 300)
     w++;
    else if(i <300)
     u+=8;
    else if (i < 600)
      w--;
    else 
      w = 0;
  } 
  

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 2, 2022, 6:00am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/17 "2022-06-02T06:00:57Z")

</div>

> [@humano](#):
>
> ```auto
> if (i < 300)
> w++;
> else if(i <300)
> u+=8;
> 
> ```

This doesn’t work as if i \< 300 it only goes into first branch where you increasing w the second branch is never reached…

— mnse

---

<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:** [June 2, 2022, 5:01pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/18 "2022-06-02T17:01:54Z")

</div>

thanks! And could you just tell me why these two loops do not grow tangentially?

```auto
size (1000,1000);
  background(0);
  strokeWeight(10);
  
  
  for(int i=0,w=0; i<width; i+=20+w) {
    stroke(0,0,255);
    line(i+50,0, i,height);
    if (i < 500)
      w=w+1;
   
  }
   for(int k=10,v=0; k<width; k+=20+v) {
    stroke(0,255,0);
    line(k+50,0, k,height);
    if (k < 500)
      v=v+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:** [June 3, 2022, 11:41am UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/19 "2022-06-03T11:41:02Z")

</div>

I really don’t know why these lines are not together if they have same thickness and they grow with same distances between them, do you know what I should improve?

---

<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:** [June 3, 2022, 12:39pm UTC](https://discourse.processing.org/t/loop-with-increasing-inclination/37240/20 "2022-06-03T12:39:58Z")

</div>

Hello @humano,

Consider this:

`line(k+50+10, 0, k+10, height);` // Also k = 0 initially

`:)`

[Next page](https://discourse.processing.org/t/loop-with-increasing-inclination/37240.md?page=2)