# How loop 2 diferent images

Hey guys. I’m a student and I have a processing class. I have to do a game to pass.
I just started and I can’t make one of the png image moving.
So the clouds are moving to the right side, and I want the airplane to come from the left side and stop in the middle to start the mousePressed. I’m stuck in this point. Can you guys help me?

You have two variables, `x` and `y`. One of them is the x position of the cloud. The other is the x position of the plane.

… That’s right. You have a variable called `y` that is an x position.

That’s confusing!

A good first step, I think, would be to give your variables better names. Maybe one could be `cloud_x`? What about the other?

2 Likes

Hey TfGuy44!

Thank you so much for the fast answer

you mean like this?

``````float cloud_x;
float plane_y;
int value = 0;
PImage fundo;
PImage nuvens;
PImage aviao;

void setup() {
size (950, 560);
fundo = loadImage("gamebackground2.png");

nuvens = loadImage("nuvens.png");
cloud_x=-1000;

aviao =loadImage ("aviao.png");
plane_y=700;

}

void draw() {
image(fundo, 0, 0);

image(aviao,plane_y, 20, 950, 560);//posição
plane_y = plane_y + 4;//velocidade
if(plane_y<width){
plane_y=0;//onde começa

image(nuvens,cloud_x, 20, 950, 560);//posição
cloud_x = cloud_x + 2;//velocidade
if(cloud_x>width){
cloud_x=-1000;//onde começa
}
}
}
``````

btw what is your email?

i found it. I send you an email

A good start. Now we can see that one variable is for the plane, and the other is for the cloud. The plane’s variable is still called `plane_y`, but it is an x position, but we can fix that in a second.

The next thing to do it to press Ctrl + t in the Processing editor to auto-format your code. Then post your code on the forums, formatted properly.

You can tell to forums to format your code by putting it between two sets of three back-ticks: ``` code ```

Or just highlight your code and hit the format like code button, which looks like this: </>

1 Like
``````float cloud_x;
float plane_y;
int value = 0;
PImage fundo;
PImage nuvens;
PImage aviao;

void setup() {
size (950, 560);
fundo = loadImage("gamebackground2.png");

nuvens = loadImage("nuvens.png");
cloud_x=-1000;

aviao =loadImage ("aviao.png");
plane_y=700;
}

void draw() {
image(fundo, 0, 0);

image(aviao, 20, plane_y, 950, 560);//posição
plane_y = plane_y + 4;//velocidade
if (plane_y<width) {
plane_y=0;//onde começa

image(nuvens, cloud_x, 20, 950, 560);//posição
cloud_x = cloud_x + 2;//velocidade
if (cloud_x>width) {
cloud_x=-1000;//onde começa
}
}
}
``````

yeah the position make sense. but stills dont move

please check the email

Great! Now that we can see your code formatted properly, does anything unusual stand out to you about it?

Look at the lines of code that move and draw the cloud. What conditions must be true for those lines to run? Is that the right condition, even?

you mean about his?
plane_y = plane_y + 4;//velocidade
if (plane_y<width) {
plane_y=20;//onde começa```
type or paste code here

Yes. Where does that conditional statement end? Which closing brace, `}`, matches with that if statement’s opening brace, `{`?

it ends here right?

``````    image(nuvens, cloud_x, 20, 950, 560);//posição
cloud_x = cloud_x + 2;//velocidade
if (cloud_x>width) {
cloud_x=-1000;//onde começa
} //here
}
}
``````

Yep! So if the plane’s x position is less than `width` (that is, the plane is on the screen), you set the plane’s position to 0 and then move and draw the cloud. Is that right?