Is there a way to have an image on top of animation?

Processing Coding Questions
1

Hi,
I’m very new to processing, so I’m sorry if I make many mistakes! I have to use processing for a project and I was able to get this down:

Lines[] lines = new Lines[100];

void setup(){
size(800,800);
for(int i = 0; i < lines.length; i++){
lines[i] = new Lines();
}
}

void draw(){
background(0);
for(int i = 0; i < lines.length; i++){
lines[i].update();
lines[i].show();
}
}

class_lines
class Lines {
float x;
float y;

Lines(){
y = random (0,300);
}

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

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

Is there a way to place an image into here without the moving lines being drawn on top of it? I want to have the lines move under a png file, but I can’t seem to figure out if there’s a way to do this.
Any help would be great! Thanks!

2

You load your image in setup and then add the image in your sketch in the last step of draw(). The image will be drawn on top of the animation, or the animation will play behind the drawn image.

Kf

3

That was easy, thank you! Another issue I had was that the lines don’t start at the bottom once I run the sketch. How can I fix this? In other words, what I’m trying to do is have the lines start at the bottom and go up to the top in a continuous loop.

4

Wouldn’t you change this: y = random (0,300);

for y= random(height,height*2);?

This makes sure lines are drawn randomly below the bottom edge of your sketch. The line swill start moving up and when they reach the top of the sketch, they cycle back to the bottom. Notice initially all the lines are drawn in between height and height*2 meaning that those lines will not be visible. Doing this will ensure

  1. All line start at the bottom
  2. All lines are randomly distributed when they start moving up.

Kf

5

The way I’m seeing it now is that the lines are continuously form and go up from the bottom, which works, but if I were to want a certain amount of lines to go from the bottom to top until the last line reaches the top and then have it restart how would I go about doing that?

6

There are different ways to accomplish this. It is preferable that you provide your approach as putting this extra effort will help you in your creative task. Designing is the best part of coding. Anyways, there are two approaches:

If you use an array, as what you are doing now, then I would reset my lines not a zero (0) but when the lines reaches -height (aka. negative height). Then, your lines moves in the space from 2*height to -height or the equivalent of 3 screen heights. This is not efficient but it does the job.

Notice that instead of doing this, you could introduce conditionals to draw the lines only when they are in the drawing area (when y is between 0 and height)

The second way (my preference) is to use an ArrayList instead of an array. You can add and remove elements dynamically. When a line reaches the top of the sketch, you will remove it from the list. When the list is empty, then you regenerate all the lines so they start from the bottom. For the array list, you can check this and this references. Notice that when removing from an array list, you need to do it when interacting the list backwards.

Kf