# ArrayList - having different images when moving using arrow keys

**URL:** https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669
**Category:** Coding Questions
**Created:** [November 24, 2020, 6:41pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669 "2020-11-24T18:41:14Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 6:41pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/1 "2020-11-24T18:41:14Z")

</div>

Hi, I’m using ArrayList to store the multiple amounts of images I have. i want to do is if I move left by using arrow keys, the images that pointing towards left move etc. this goes for up, down and right as well.

code inside my player class…

```auto
class Gunner{
ArrayList <PImage> images;
  int imageCounter = 0;

Gunner(int x, int y)
  {
    PImage img;
    this.x = x;
    this.y = y;
    //this.speedX = speedX;
    //this.speedY = speedY;

    images = new ArrayList<PImage>(); //allocates the memory - empty \
    for (int count =1; count<=4; count++) //load images into arrayList
    {
      img = loadImage("soldier" + count +".png");
      img.resize(80, 80);
      images.add(img);
    }
  }

void render()
  { //choose next image to display - change every 10th call
    int imageNumber = imageCounter/10; //get position of image from arrayList
    PImage currentImage = images.get(imageNumber);
    imageCounter++;
    if (imageCounter==40)
    {
      imageCounter=0;
    }
    image(currentImage, this.x, this.y);
  } 

} //end of class

```

in main:

```auto
PImage background;
int y3=0; //global variable background location
Gunner player; //declare instance of Survivor

void setup()
{

  size(600, 400); //size of canvas
  background = loadImage("back.jpg");
  background.resize(width, height);

  player = new Gunner(width/2, height/2); //player starting point, could be chnaged?

} //end of setup

void draw()
{
fill(0);
    drawBackground();
    drawScorecard();
    player.update();
}

void keyPressed() { //possibly could add an pause for my game ?????
  if (key == CODED) {
    if (keyCode == UP && player.y >= 0 ) //inside top of screen 
      player.y-=9; 
    else if (keyCode == DOWN && player.y <= height -90) 
      player.y+=9;
    else if (keyCode == RIGHT && player.x<= width -50)
      player.x+=9;
    else if (keyCode == LEFT && player.x > 0 +1)
      player.x-=9;
  }
} //end of keypressed()

void drawBackground() {
  image(background, 0, y3); //draw background twice adjacent
  image(background, 0, y3-background.height);
} //end of drawBackground

void drawScorecard()
{
  fill(255, 255, 0);
  textSize(26);
  text("Score: " + score, 10, 50);

  text(timer.getRemainingTime(), 20, 20); //display seconds remaining top left
}//end of drawScorecard

```

how would I use ArrayList to determine when my player moves left it will show these images and when my player moves right these images will show??

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 6:42pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/2 "2020-11-24T18:42:05Z")

</div>

Summary,

if i move left, show images that are moving left  
if i move right, show images that are moving right  
etc…

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 7:07pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/3 "2020-11-24T19:07:39Z")

</div>

> [@TheGullible1](#):
>
> if I move left by using arrow keys, the images that pointing towards left move

you need to store for each Image individually where it is pointing.

So make a new `class PointingImage`:

```auto
PImage image;
int pointingDirection = 0; // 0 is up, 1, east, 2 south, 3 west 

```

Replace

```auto
ArrayList <PImage> images;

```

with

> [@TheGullible1](#):
>
> `ArrayList <PointingImage> images;`

when a key is pressed loop over the images and display only where the key matches the pointingDirection

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 7:09pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/4 "2020-11-24T19:09:22Z")

</div>

how would i call that in keypressed?

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 7:10pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/5 "2020-11-24T19:10:01Z")

</div>

would it be player.PointingImage

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 7:12pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/6 "2020-11-24T19:12:44Z")

</div>

> [@Chrisir](#):
>
> when a key is pressed loop over the images and display only where the key matches the pointingDirection

make a global var pointingDirectionFromKey

if(key==UP)  
pointingDirectionFromKey=0; // North

etc.

and then when display the images check `if(image.pointingDirection == pointingDirectionFromKey)`

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 7:14pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/7 "2020-11-24T19:14:17Z")

</div>

if i wanted to do it for a class which doesnt use keypressed()  
how would I do that?

eg have an object that moves on its own.  
would that be inside the object’s class in void move()

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 7:20pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/8 "2020-11-24T19:20:27Z")

</div>

> [@TheGullible1](#):
>
> would it be player.PointingImage

```auto
class Gunner{
      ArrayList <PointingImage> images; // !!!!!!!!!!!!!!

```

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 7:25pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/9 "2020-11-24T19:25:11Z")

</div>

> **[ArrayList \\ Language (API) \\ Processing 3+](https://processing.org/reference/ArrayList.html)**

  
im sorry im confused, i still dont understand lot of arraylist and how it works. the fact that its in my class means what exactly to me??

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 8:24pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/10 "2020-11-24T20:24:08Z")

</div>

make a new `class PointingImage` as I described

```auto
class Gunner{
      ArrayList <PointingImage> images; // !!!!!!!!!!!!!!

```

and then `player.images.get(0).image;`

Chrisir

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 8:39pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/11 "2020-11-24T20:39:59Z")

</div>

thats only getting 1 image,

could i do:  
`player.images.get(1-4).image;`

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 8:40pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/12 "2020-11-24T20:40:40Z")

</div>

Yes, in a for loop

see reference ArrayList

> **[ArrayList \\ Language (API) \\ Processing 3+](https://www.processing.org/reference/ArrayList.html)**

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 8:41pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/13 "2020-11-24T20:41:50Z")

</div>

ahhh, i get it. thank you so much. love you(no homo) \<3

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 8:42pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/14 "2020-11-24T20:42:52Z")

</div>

Show your entire code and your current attempt to get real help.

YOU need to write the code and to test it.

---

<div class="post-metadata">

### Author: ![TheGullible1](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 24, 2020, 8:43pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/15 "2020-11-24T20:43:38Z")

</div>

ill write my code and if i get stuck, ill reply back on here.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 24, 2020, 8:59pm UTC](https://discourse.processing.org/t/arraylist-having-different-images-when-moving-using-arrow-keys/25669/16 "2020-11-24T20:59:47Z")

</div>

so when you load your images - presumably in the constructor of Gunner class

you say something like add the new image name “xy” to the ArrayList and it’s facing left.

You need to do this “manually”, so write a new line for each image because you have to decide for each image if its `pointingDirection ` is 0,1,2 or 3