# Line loop to create volume

**URL:** <https://discourse.processing.org/t/line-loop-to-create-volume/33447>\
**Category:** Coding Questions\
**Created:** [November 10, 2021, 8:26pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447 "2021-11-10T20:26:36Z")\
**Posts on this page:** 10\
**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:** [November 10, 2021, 8:26pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/1 "2021-11-10T20:26:36Z")

</div>

Hi there!  
I am practising with loops and I would like to create something similar to the black picture attached.

 ![IMG_20211110_124057](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0251b93b596e81b6f8f91bee231dd2e9ba3ec174.jpeg)

I have made a loop and I have made this:

 ![IMG_20211110_161540](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8e3601a5f8b92a69f84a33363010294720a41fa2.jpeg)

As you can see, I would need:

1. To increase gradually the Inclination of the lines. Now all of them have y+50 but I don’t know how Increase that value progressively in the loop.

2. To reduce Length of the lines progressively following Pink diagonal.

3. Being able to start another loop with new lines exactly located where the first lines finish, to repeat something similar with another values.

Can you please help me?

```auto
size(1000,1000);
background(255);
stroke(0);
strokeWeight(3);
for(int y=0;y<1000;y=y+20){
  line(0,y,500,y+50);
}

```

Thanks! 🥳

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [November 11, 2021, 10:23am UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/2 "2021-11-11T10:23:19Z")

</div>

Hi there

I would recommend the following topics:

To define points : [Reference / Processing.org](https://processing.org/reference/PVector.html)  
To draw lines with corners : [Reference / Processing.org](https://processing.org/reference/vertex_.html)  
To interpolate between the lines : [Map / Examples / Processing.org](https://processing.org/examples/map.html)

Here is a sketch how you could approach this conceptually:

 ![Bildschirmfoto 2021-11-11 um 11.17.31](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a95e224237fe122c38fb9d4fc648e5b4d125c472.png)

startA, midA, endA, etc are all PVectors.  
map is used to calculate the interpolated point.  
vertex is used to draw the line.

the main thing would be something like this (untested)

```auto

for (int i=0; i<10; i++) {
  beginShape();
  vertex(map(i, 0, 10, startA.x, startB.x), map(i, 0, 10, startA.y, startB.y));
  vertex(map(i, 0, 10, midA.x, midB.x), map(i, 0, 10, midA.y, midB.y));
  vertex(map(i, 0, 10, endA.x, endB.x), map(i, 0, 10, endA.y, endB.y));
  endShape();
}

```

in the end draw rectangles on top to mask the whole shape 🙂

---

<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:** [November 11, 2021, 2:51pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/3 "2021-11-11T14:51:20Z")

</div>

Thank you so much! I hace tried whit this :

```auto
void setup(){
size(1000,1000);
background(255);
stroke(0);
strokeWeight(3);

for (float i=0; i<10; i++) {
  

  beginShape();
  vertex(map(i, 0, 10, 0, 0), map(i, 0, 10, 0, 1000));
  vertex(map(i, 0, 10, 500, 300), map(i, 0, 10, 0, 1000));
  vertex(map(i, 0, 10, 1000, 1000), map(i, 0, 10, 0, 1000));
  endShape();

}
}

```

But It does not work because there must be a distance between midAx and midBx and there is not and there must be a progressive Increase in the distance between línea and there is not. What I have made wrong?

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [November 11, 2021, 3:53pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/4 "2021-11-11T15:53:20Z")

</div>

Your code works!  
There is no edge visible, because the midpoint only diverges in the x position.  
Try this for example

```auto
       // x-Pos y-Pos
vertex(map(i, 0, 10, 0, 0), map(i, 0, 10, 0, 800));
vertex(map(i, 0, 10, 500, 500), map(i, 0, 10, -200, 1100));
vertex(map(i, 0, 10, 1000, 1000), map(i, 0, 10, 200, 1200));

```

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [November 11, 2021, 4:28pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/5 "2021-11-11T16:28:28Z")

</div>

![Bildschirmfoto 2021-11-11 um 17.32.10](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/719dec20e7c87d03291171a9fe5f38c139fa8d09.png)

100 lines 🙂

```auto
void setup(){
  size(1000,1000);
  background(255);
  stroke(0);
  strokeWeight(3);
  noFill();
  int num = 100; 
  for (float i=0; i<=num; i++) {

  beginShape();
             // x-Pos y-Pos
  vertex(map(i, 0, num, 0, 0), map(i, 0, num, 0, 900));
  vertex(map(i, 0, num, 500, 500), map(i, 0, num, -200, 1200));
  vertex(map(i, 0, num, 1000, 1000), map(i, 0, num, 200, 1300));
  endShape();

  }
  
  fill(255);
  noStroke();
  int border = 100;
  rect(0,0,width, border);
  rect(0,0,border, height);
  rect(width-border,0, border, height);
  rect(0, height-border, width, border);
}

```

---

<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:** [November 11, 2021, 4:56pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/6 "2021-11-11T16:56:32Z")

</div>

Fab work! Thank so much, my friend. I have seen that I could also add more points in your Code

```auto
void setup(){
size(1000,1000);
background(255);
stroke(0);
strokeWeight(3);

for (float i=0; i<10; i++) {

beginShape();
// x-Pos y-Pos
vertex(map(i, 0, 10, 0, 0), map(i, 0, 10, 0, 1000));
vertex(map(i, 0, 10, 300, 500), map(i, 0, 10, -200, 1100));
vertex(map(i, 0, 10, 600, 800), map(i, 0, 10, -200,1100));
vertex(map(i, 0, 10, 1000, 1000), map(i, 0, 10, 200, 1200));
endShape();
}
}

```

But why I can not add more lines as you have done on your last work?

```auto
void setup(){
size(1000,1000);
background(255);
stroke(0);
strokeWeight(3);

int num = 30;
for (float i=0; i<=num; i++) {

beginShape();
// x-Pos y-Pos
vertex(map(i, 0, 10, 0, 0), map(i, 0, 10, 0, 1000));
vertex(map(i, 0, 10, 300, 500), map(i, 0, 10, -200, 1100));
vertex(map(i, 0, 10, 600, 800), map(i, 0, 10, -200,1100));
vertex(map(i, 0, 10, 1000, 1000), map(i, 0, 10, 200, 1200));
endShape();
}
}

```

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [November 11, 2021, 6:03pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/7 "2021-11-11T18:03:59Z")

</div>

behold the power of variables 🙂  
check where “num” is used.

---

<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:** [November 11, 2021, 8:22pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/8 "2021-11-11T20:22:27Z")

</div>

Oopsy, you are right! 😛  
Thanks a lot!

---

<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:** [November 13, 2021, 4:26pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/9 "2021-11-13T16:26:11Z")

</div>

😱 😱 😱

SOS!!!

// Storm of panic and confussion

What is wrong here?

```auto
void setup(){
size(1000,1000);
background(255);
stroke(0);
strokeWeight(3);

int num = 100;
for (float i=0; i<=num; i++) {

beginShape();
// x-Pos y-Pos
vertex(map(i, 0, num, 0, 0), map(i, 0, num, 0, 1000));
vertex(map(i, 0, num, 300, 100), map(i, 0, num, -200, 1200));
vertex(map(i, 0, num, 600, 400), map(i, 0, num, 0, 1000));
vertex(map(i, 0, num, 900, 700), map(i, 0, num, -200, 1200));
vertex(map(i, 0, num, 1000, 1000), map(i, 0, num, 0, 1000));
endShape();
}
}

```

 ![IMG_20211113_122544](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/11f39898da2c83e45b3acb03916ae3ce200a3f26.jpeg)

Oh my god look at this!

```auto
void setup(){
size(1000,1000);
background(255);
stroke(0);
strokeWeight(5);

int num = 100;
for (float i=0; i<=num; i++) {

beginShape();
// x-Pos y-Pos
vertex(map(i, 0, num, 0, 0), map(i, 0, num, 0, -1133.334));
vertex(map(i, 0, num, 300, 100), map(i, 0, num, -200, 1200));
vertex(map(i, 0, num, 600, 400), map(i, 0, num, 0, 1000));
vertex(map(i, 0, num, 900, 700), map(i, 0, num, -200, 1200));
vertex(map(i, 0, num, 1000, 1000), map(i, 0, num, -66.666, 1000));
endShape();
}
}

```

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [November 13, 2021, 4:49pm UTC](https://discourse.processing.org/t/line-loop-to-create-volume/33447/10 "2021-11-13T16:49:30Z")

</div>

The fill is covering stuff.