Draw lines that go from bottom to top?

Hi,
I’m very new to processing, so I’m sorry if I make mistakes or have trouble understanding something. I wanted to design a code that drew x amount of lines starting at 0 and went up to the height of my setup then stopped after the last line drawn reached to the top and then have the process start over. I was advised to use an arraylist and was able to come up with this:

ArrayList<Lin> lines;

void setup() {
  size(900, 900);
  lines = new ArrayList<Lin>();
}

void draw() {
  background(0);
  lines.add(new Lin());
  for (int i = 0; i <lines.size(); i++) {
    Lin l = (Lin) lines.get(i);
    l.run();
  }

  if (lines.size()>height) {
    lines.remove(0);
  }
}

class Lin {
  float x;
  float y;

  Lin() {
    y=random(height, height*2);
    x = 0;
  }

  void run() {
    move();
    display();
  }

  void move() {
    y = y-2;
    if (y<0) {
      y=height;
    }
  }

  void display() {
    stroke(255);
    line(x, y, width, y);
  }
}

However I am having a hard time figuring out where or how to set an x amount of lines to be drawn. Because of this, I can’t figure out how I would go about removing the lines from the first to reach the top - last and then having the process start again once the last line reaches to the top. If anyone could help that would be great!

Hi josie,

Please format your code. No need to create a new post, you can simply edit the previous one.

I’m not sure I get your question though… for the behavior of your lines, what do you want:

  • To behave like they do in your code? meaning that it is horizontal lines that takes the full length and then move up ?
  • To be vertical lines that starts small and then “grow” bigger until they reach the top and when the first on reach the top then you want the second to start reaching for the top and so on ?

In both cases i’m assuming that the 0 you are referring is the bottom of the screen even if in reality it is the top of the screen.

You need to be a bit more precise on the way you want to add your lines? Every second, at random time, all at once, … ?

Also:

  • In you Lin class, you are using a float x but you never initialize it
  • You add your new lines at a random position between height and 2*height but you said you want them the start at 0 (meaning the bottom?)
  • You are creating a line at every frame so at 60 frames per second it makes quite a lot of lines
  • You want to remove the lines when the number of lines is more than the height of the screen. While this is correct it makes no real logic in your case

Hi,

Yes, I want horizontal lines that take the full length and then move up. However, I only want a certain amount of lines created and once the last line of lets say 200 lines reaches the top, I want the process to start over.

I liked the appearance of the lines when drawn at random and in the code they appeared to start at the bottom, but if this isn’t the case then how would I be able to edit the spacing between the lines if I don’t make y random?

I hadn’t thought about the way I wanted to add the lines, I liked how it looked in the code, so I’m not sure which way would preserve that appearance the best.

I know that a lot of lines are being created which is why I wanted to know if there was a way to cap it at a certain amount? For example, have it create only 200 lines.

This is what I am trying to do. I was able to do this using an array in a different code, but all the lines did not start at the bottom because of the position I specified (I took these pictures at the moment they best represented what I am trying to do) so I was advised to make an array list and remove the lines when they got to the top instead.

I really just want a group of lines that look like this to continuously move from the bottom to top.

Is this something like this you are looking for ?

final int nbOfLines = 50;
ArrayList<CustomLine> lines;

void setup() {
  size(900, 900);
  frameRate(60);
  
  lines = new ArrayList<CustomLine>();
  
  createLines();
}


void draw() {
  background(20);
  
  for (int i = 0; i < lines.size(); i++) {
    lines.get(i).run();
  }
  
  if (lines.get(lines.size() - 1).isOutOfScreen()) {
    createLines();
  }
}


void createLines() {
  lines.clear();
  int y = height;
  
  for (int i = 0; i < nbOfLines; i++) {
    y += random(10) + 1;
    lines.add(new CustomLine(y));
  }
}


class CustomLine {
  private int y;

  CustomLine(int y) {
    this.y = y;
  }
  
  void run() {
    move();
    display();
  }

  void move() {
    y -= 2;
  }

  void display() {
    stroke(200);
    line(0, y, width, y);
  }
  
  boolean isOutOfScreen() {
    return y < 0;
  }
}

The idea is to have a method that create as many lines as needed.
Then in the draw loop, it first moves the lines up and then it checks if the last line is out of screen. If so, you create a new bunch of line and it starts over and over.

Yes! Thank you! That is exactly what I wanted. If you don’t mind, could I ask you some questions about the code to get a further understanding?

 for (int i = 0; i < nbOfLines; i++) {
    y += random(10) + 1;
    lines.add(new CustomLine(y));

what does the y+= random(10) + 1 mean?

void move() {
    y -= 2;
  }

why y-=2?

lines.clear();
int y = height;

for (int i = 0; i < nbOfLines; i++) {
  y += random(10) + 1;
  lines.add(new CustomLine(y));
}

This for loop is used to create the proper number of lines.

To do that, I need to figure out where I want the line to be initially since my constructor is expecting it.

The idea is to create all those lines outside of the screen (below to be precise) and randomly spaced. Since I want to start outside of the screen, my first line should be at minimum at y = height wich is the initial value of y. Then for each new line the y value is incremented by a random value:

y += random(10) + 1;

random(10) gives us a float between 0 included and 10 excluded so random(10) + 1 gives us a float between 1 included and 11 excluded. Since y is defined as an int, only the whole part is kept so y is increment by 1, 2, 3, …, 8, 9, 10.

The + 1 is only there to avoid getting a zero in wich case the next line would be at the same place as the previous line.


void move() {
  y -= 2;
}

There is no particular reason I used 2. The bigger the number the faster the animation that’s all.

Note that the speed will also depend on your frame rate. If the frame rate is low the speed will decrease and the other way around.