Line loop to create volume

[humano]

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

I have made a loop and I have made this:

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?

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!

[philipplehmann]

Hi there

I would recommend the following topics:

To define points : Reference / Processing.org
To draw lines with corners : Reference / Processing.org
To interpolate between the lines : Map / Examples / Processing.org

Here is a sketch how you could approach this conceptually:

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)

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

[humano]

Thank you so much! I hace tried whit this :

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?

[philipplehmann]

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

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

[philipplehmann]

100 lines

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

[humano]

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

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?

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

[philipplehmann]

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

[humano]

Oopsy, you are right!
Thanks a lot!

[humano]

SOS!!!

// Storm of panic and confussion

What is wrong here?

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

Oh my god look at this!

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

[philipplehmann]

The fill is covering stuff.