# How loop 2 diferent images

**URL:** <https://discourse.processing.org/t/how-loop-2-diferent-images/11470>\
**Category:** Coding Questions\
**Created:** [May 21, 2019, 6:24pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470 "2019-05-21T18:24:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:24pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/1 "2019-05-21T18:24:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 21, 2019, 6:28pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/2 "2019-05-21T18:28:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:32pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/3 "2019-05-21T18:32:45Z")

</div>

Hey TfGuy44!

Thank you so much for the fast answer

you mean like this?

```auto
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?

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:42pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/4 "2019-05-21T18:42:32Z")

</div>

i found it. I send you an email

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 21, 2019, 6:42pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/5 "2019-05-21T18:42:46Z")

</div>

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: \</\>

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:46pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/6 "2019-05-21T18:46:34Z")

</div>

```auto
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

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:47pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/7 "2019-05-21T18:47:40Z")

</div>

please check the email

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 21, 2019, 6:49pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/8 "2019-05-21T18:49:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 6:52pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/9 "2019-05-21T18:52:14Z")

</div>

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

```auto

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 21, 2019, 6:53pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/10 "2019-05-21T18:53:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![johnpt](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@johnpt](https://discourse.processing.org/u/johnpt)\
**Post date:** [May 21, 2019, 7:04pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/11 "2019-05-21T19:04:20Z")

</div>

it ends here right?

```auto
    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
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 21, 2019, 7:08pm UTC](https://discourse.processing.org/t/how-loop-2-diferent-images/11470/12 "2019-05-21T19:08:34Z")

</div>

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?