# Mover varias imagenes

**URL:** <https://discourse.processing.org/t/mover-varias-imagenes/17651>\
**Category:** Español\
**Created:** [February 9, 2020, 4:57am UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651 "2020-02-09T04:57:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pandther](https://avatars.discourse-cdn.com/v4/letter/p/e480ec/32.png) [@Pandther](https://discourse.processing.org/u/Pandther)\
**Post date:** [February 9, 2020, 4:57am UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651/1 "2020-02-09T04:57:35Z")

</div>

Buen día, soy algo nuevo en processing; y pues la verdad estoy tratando de poner varias imagenes en una misma ventana. Es posible que con una sola variable de **PImage** , pueda colocarlas en diferentes espacios de la ventana?

```auto
PImage image1;
boolean isLoaded = false;
void setup()
{
    size(600, 700);
  background(0);
}
void keyPressed(){
  if(key=='q'){
    image1=loadImage("rojo.jpg");
    isLoaded=true;
  }
  if(key=='w'){
    image1=loadImage("índice.png");
    isLoaded=true;
  }
}
void draw()
{
    background(255);
    if(isLoaded)image(image1, 50, 50, 200, 200); 
}

```

Como se puede observar estoy tratando de que al pulsar cierta tecla me aparezca una imagen diferente, pero quiero que cuando pulse cada una, aparezca de manera ordenada. En _draw_ sé que puedo colocar las coordenadas, pero al ser varias imagenes en distintos lados de la ventana, ¿Cómo puedo hacer para que las coordenadas varíen sin que varíe la variable?

De antemano muchas gracias y cualquier comentario o sugerencia es de gran ayuda.  
🙂

---

<div class="post-metadata">

**Author:** ![bucherjo](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@bucherjo](https://discourse.processing.org/u/bucherjo)\
**Post date:** [February 9, 2020, 8:42am UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651/2 "2020-02-09T08:42:10Z")

</div>

Hello Pandther  
I don’t speak Spanish and just translated your question, so I hope I got everything right. If I got It correctly you want to use a PImage Variable multiple times but with different X- and Y-coordinates. Generally speaking you can use a PImage variable multiple times by simply using the method image(PImage, X-cord, Y-cord); multiple times. But you need to ask yourself where your different X- and Y-coordinates should come from. Do you want a Program where the coordinates of your image depend a mouse-input, a keyboard-input, or should it simply be hard coded into your program?

---

<div class="post-metadata">

**Author:** ![Pandther](https://avatars.discourse-cdn.com/v4/letter/p/e480ec/32.png) [@Pandther](https://discourse.processing.org/u/Pandther)\
**Post date:** [February 9, 2020, 7:59pm UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651/3 "2020-02-09T19:59:20Z")

</div>

I need recycle the code, bc my code is too long:

```auto
PImage image1, image2, image3, image4, image5, image6;

boolean isLoaded = false;
boolean isLoad=false;
boolean isLoade =false;
boolean isLoaded1 =false;
boolean isLoaded2 =false;
boolean isLoaded3 =false;
void setup()
{
    size(600, 700);
  background(0);

}
void keyPressed(){
  if(key=='q'){
    image1=loadImage("rojo.jpg");
    isLoaded=true;
  }
  else if(key=='w'){
    image2=loadImage("índice.png");
    isLoad=true;
  }
  else if(key=='e'){
    image3=loadImage("Sin título.png");
    isLoade=true;
  }
  else if(key=='r'){
    image4=loadImage("Sin título2.png");
    isLoaded1=true;
  }
  else if(key=='t'){
    image5=loadImage("Sin título3.png");
    isLoaded2=true;
  }
  else if(key=='y'){
    image6=loadImage("Sin título4.png");
    isLoaded3=true;
  }
}

void draw()
{
    if(isLoaded){
      image(image1, 50, 50, 180, 180);
    }
    if(isLoad){
      image(image2, 350, 50, 180, 180);
    }
    if(isLoade){
      image(image3, 50, 280, 180, 180);
    }
    if(isLoaded1){
      image(image4, 350, 280, 180, 180);
    }
    if(isLoaded2){
      image(image5, 50, 500, 180, 180);
    }
    if(isLoaded3){
      image(image6, 350, 500, 180, 180);
    }
}

```

I guess that I could use only one boolean variable, and only one PImage variable, but I don’t know how to make that. When I use only one PImage (image1) with diferent variables (indice, sin título, sin título1, etc). _Draw_ only is showing one image for KeyPressed. I want to appear all the images in the window.

Thx for the support.

---

<div class="post-metadata">

**Author:** ![bucherjo](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@bucherjo](https://discourse.processing.org/u/bucherjo)\
**Post date:** [February 9, 2020, 9:48pm UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651/4 "2020-02-09T21:48:44Z")

</div>

You could improve the length of your sketch by completely deleting the void draw() section of your code (still write void draw(){} but with nothing inside it) and only using void setup() and void keyPressed(). Then you put all loadImage(); statements into the void setup section of the code and for every individual letter inside keyPressed you add an image(); statement, which prints the corresponding image to your canvas.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 12, 2020, 12:47am UTC](https://discourse.processing.org/t/mover-varias-imagenes/17651/5 "2020-02-12T00:47:25Z")

</div>

¿Sabes cómo usar `class`? ¿Puedes usar clases para resolver esto? Combinar cada x, y con un PImages y ponerlos en una lista (como ArrayList o ArrayList) podría ser lo mejor solución.