Help with moving vertical lines

Processing Coding Questions
1

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!

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

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);
  }
}
1 Like
2

lineas processing esketch.00_00_04_24.Still001
lineas processing esketch.00_00_04_24.Still0011918Ă—1080 46.1 KB

3

it looks like a sinus curve

please see https://www.processing.org/tutorials/trig

1 Like
4

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

see https://www.processing.org/tutorials/objects


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;
  }
}
//
2 Likes
5

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

1 Like
6

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
desfasada11070Ă—714 933 Bytes

MAIN CODE

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

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

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

1 Like
8

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

1 Like
9

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

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

1 Like
10

Hello,

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

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

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!

:)

2 Likes
11

my version with sin (see tutorial trig I posted)

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
  //
}
//
1 Like
12

another sin version

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
  //
}
//
2 Likes