# Help with moving vertical lines

**URL:** https://discourse.processing.org/t/help-with-moving-vertical-lines/18848
**Category:** Coding Questions
**Created:** [March 20, 2020, 7:17pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848 "2020-03-20T19:17:01Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)
#### Post date: [March 20, 2020, 7:17pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/1 "2020-03-20T19:17:02Z")

</div>

Hi, i want to make a code that allows me to control the number of lines, the width, and other parameters beacuse im planing to import this code to resolume arena later. This is what i have so far. I made an animation of what i want to achive. Thanks in anvance!

* * *

```auto
Linea[] lineas = new Linea[100];

int posX;
int limiteUp;
int limiteDown;

int separacionLineas;
int i;
int var1;
void setup() {
  size (1080, 720);

  for ( int i =0; i<29; i++) {
    lineas[i] = new Linea();
  }

  posX = 0;
  limiteUp = height*50/100;
  limiteDown = height;

  separacionLineas = 38;
  var1 =0;
}

void draw() {

  background(0);
  stroke(255);
  strokeWeight(3);

  // float posY = ;

  for ( i =1; i<29; i++) {

    lineas[i].display(posX+i*separacionLineas, limiteUp, limiteDown-i*var1);

  }
  var1++;
  delay(50);
}

```

**and this is the Linea object**

* * *

```auto
class Linea {
  float posXa;
  float posYa;
  float posXb;
  float posYb;

  Linea() {
    
  }

  void display(float var3, float var1, float var2) {
    
    posXa = var3;
    posYa = var1;

    posYb = var2;
    line (posXa, posYa, posXa, posYb);
  }
}

```

* * *

---

<div class="post-metadata">

### Author: ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)
#### Post date: [March 20, 2020, 7:21pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/2 "2020-03-20T19:21:28Z")

</div>

![lineas processing esketch.00_00_04_24.Still001](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b7694fcc3f7016ba9c135fc6cd3401ff63bd2f9.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: [March 20, 2020, 7:50pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/3 "2020-03-20T19:50:55Z")

</div>

it looks like a sinus curve

please see [https://www.processing.org/tutorials/trig](https://www.processing.org/tutorials/trig)

---

<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: [March 20, 2020, 8:27pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/4 "2020-03-20T20:27:16Z")

</div>

here is an example that uses more the constructor and the variables inside the class

see [https://www.processing.org/tutorials/objects](https://www.processing.org/tutorials/objects)

```auto

Linea[] lineas = new Linea[100];

int posX;
int limiteUp;
int limiteDown;

int separacionLineas;
int i;
int var1=20;

void setup() {
  size (1080, 720);

  posX = 10;
  limiteUp = height*50/100;
  limiteDown = height;
  separacionLineas = 38;

  for ( int i =0; i<29; i++) {
    lineas[i] = new Linea(posX+i*separacionLineas, limiteUp, limiteDown-i*var1);
  }

  var1 =0;
}

void draw() {

  background(0);
  stroke(255);
  strokeWeight(3);

  // float posY = ;

  for (i=1; i<29; i++) {

    lineas[i].display();
    lineas[i].move();
  }
  var1++;
  delay(50);
}

// ============================================================================
//and this is the Linea object

class Linea {
  float posXa;
  float posYa;
  // float posXb;
  float posYb;

  Linea(float var3, float var1, float var2) {
    posXa = var3;
    posYa = var1;

    posYb = var2;
  }

  void display() {

    stroke(255);
    strokeWeight(3);
    line (posXa, posYa, 
      posXa, posYb);
  }

  void move() {
    posYa--;
    posYb-=2;
  }
}
//

```

---

<div class="post-metadata">

### Author: ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)
#### Post date: [March 20, 2020, 9:41pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/5 "2020-03-20T21:41:58Z")

</div>

thank you! i haven´t resolved it yet, bot you sent me in the right direction! 😊

---

<div class="post-metadata">

### Author: ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)
#### Post date: [March 21, 2020, 7:19pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/6 "2020-03-21T19:19:54Z")

</div>

i have achived what i wanted but now i have another problem. I want variable “vara1” to control the speed of the lines. but if i change it to 2, for example, every other lines gets out of fase. if i change it to 3, one every 3 lines gets out of fase, etc. i have no idea how to fix this problem. ill upload the code and an image of this out of fase problem

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

**MAIN CODE**

```auto
Linea[] lineas = new Linea[120];

int posX;
int limiteUp;
int limiteDown;

int separacionLineas;
int i;
int cantidadLineas = 108;
float inclinacion =1;

void setup() {
  size (1080, 720);

  posX = 10;
  limiteUp = height*50/100;
  limiteDown = height;
  separacionLineas = 1;

  for ( int i =0; i<cantidadLineas; i++) {
    lineas[i] = new Linea(posX*i*separacionLineas, limiteUp, limiteDown-i*inclinacion);
  }

  //var1 =0;
}

void draw() {

  background(0);
  stroke(255);
  strokeWeight(3);

  for (i=1; i<cantidadLineas; i++) {

    lineas[i].display();
    lineas[i].move();
  }
}

```

**LINEAS OBJECT**

```auto
class Linea {
  float posXa;
  float posYa;
  // float posXb;
  float posYb;
  int vara1 = 2;

  Linea(float var3, float var1, float var2) {
    posXa = var3;
    posYa = var1;

    posYb = var2;
  }

  void display() {

    stroke(255);
    strokeWeight(3);
    line (posXa, posYa, 
      posXa, posYb);
  }

  void move() {

    if (posYb<=0 || posYb>=height) {
      vara1 = -vara1;
    }
    posYb =(posYb-vara1);
  }
}

```

---

<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: [March 21, 2020, 7:29pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/7 "2020-03-21T19:29:28Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

---

<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: [March 21, 2020, 8:11pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/8 "2020-03-21T20:11:29Z")

</div>

> [@alejo\_rgb](#):
>
> lineas[i] = new Linea(posX_i_separacionLineas, limiteUp, limiteDown-i\*inclinacion);

Pass different values for vara1 here into the class

E.g. all get 2 and only number 5 gets 4

Hence the lines would move differently

---

<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: [March 21, 2020, 9:19pm UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/9 "2020-03-21T21:19:26Z")

</div>

For example when you have the circle idea, cos and sin

each object would have its own angle for the cos/sin

---

<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: [March 22, 2020, 2:16am UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/10 "2020-03-22T02:16:31Z")

</div>

Hello,

I got it to work with this modification to your code:

```auto
void display() 
    {
    //stroke(255);
    //strokeWeight(3);
    float offset = 0 ; // <-- Do some math here with vara1 and diff1 to make this work
    if (state)
      line (posXa, posYa, posXa, posYb - offset);
    else
      line (posXa, posYa, posXa, posYb);
    }

  void move() 
    {
    if (posYb <= 0) 
      {
      vara1 = -vara1;
      //println("1", posYb);
      diff1 = abs(posYb);
      println("1", diff1);
      state = true;
      }

    if (posYb > height) 
      {
      vara1 = -vara1; 
      //println("2 ", posYb);
      diff2 = abs(height-posYb);
      println("2 ", diff2);
      state = false;
      }
    posYb = posYb - vara1;  
    }

```

This is only an exploration into your code; I saw patterns and was able to modify it to work.  
I set the offset to 0; you will have to modify this yourself.  
Take a look at the outputs of the print and see if you can determine why it is behaving as it does and determine an _offset_ that works.

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

I would rework this from a fresh perspective; the above works and is over complicated. I saw patterns right away and did this as an exercise only.

Have fun with your project!

`:)`

---

<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: [March 22, 2020, 11:20am UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/11 "2020-03-22T11:20:41Z")

</div>

my version with sin (see tutorial trig I posted)

```auto
Linea[] lineas = new Linea[120];

int posX;
int limiteUp;
int limiteDown;

int separacionLineas;
int i;
int cantidadLineas = 108;
float inclinacion =1;

void setup() {
  size (1080, 720);

  posX = 10;
  limiteUp = height*50/100;
  limiteDown = height;
  separacionLineas = 1;

  for ( int i =0; i<cantidadLineas; i++) {
    lineas[i] = new Linea(posX*i*separacionLineas, limiteUp, limiteDown-i*inclinacion, map(i, 0, cantidadLineas, 0, TWO_PI));
  }

  //var1 =0;
}

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

  for (i=1; i<cantidadLineas; i++) {
    lineas[i].display();
    lineas[i].move();
  }
}

//=============================================================================================
//LINEAS OBJECT

class Linea {
  float posXa;
  float posYa;
  float posYb;

  float angle;

  Linea(float var3, float var1, 
    float var2, 
    float angle_) {
    posXa = var3;
    posYa = var1;

    posYb = var2;

    angle=angle_;
  }

  void display() {
    //stroke(255);
    //strokeWeight(3);
    line (posXa, posYa, 
      posXa, posYb);
  }

  void move() {
    posYa = sin(angle)*100+height/2; 
    posYb = posYa+200;
    angle += 0.021;
  }//func
  //
}
//

```

---

<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: [March 22, 2020, 11:39am UTC](https://discourse.processing.org/t/help-with-moving-vertical-lines/18848/12 "2020-03-22T11:39:55Z")

</div>

another sin version

```auto
Linea[] lineas = new Linea[120];

int posX;
int limiteUp;
int limiteDown;

int separacionLineas;
int i;
int cantidadLineas = 108;
float inclinacion =1;

void setup() {
  size (1080, 720);

  posX = 10;
  limiteUp = height*50/100;
  limiteDown = height;
  separacionLineas = 1;

  for ( int i =0; i<cantidadLineas; i++) {
    lineas[i] = new Linea(posX*i*separacionLineas, limiteUp, limiteDown-i*inclinacion, map(i, 0, cantidadLineas, 0, TWO_PI));
  }

  //var1 =0;
}

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

  for (i=1; i<cantidadLineas; i++) {
    lineas[i].display();
    lineas[i].move();
  }
}

//=============================================================================================
//LINEAS OBJECT

class Linea {
  float posXa;
  float posYa;
  float posYb;

  float angle;

  float speed = 0.01;

  Linea(float var3, float var1, 
    float var2, 
    float angle_) {
    posXa = var3;
    posYa = var1;

    posYb = var2;

    angle=angle_;
  }

  void display() {
    //stroke(255);
    //strokeWeight(3);
    line (posXa, posYa, 
      posXa, height/2);
  }

  void move() {
    posYa = sin(angle)*200+height/2; 
    posYb = posYa+200;

    angle +=speed;
  }//func
  //
}
//

```