# Making an image change when you press the keyboard, like a slideshow
**URL:** https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139
**Category:** Coding Questions
**Tags:** homework
**Created:** [December 12, 2022, 8:37pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139 "2022-12-12T20:37:12Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 8:37pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/1 "2022-12-12T20:37:12Z")
Hello, I just need help with a simple code.
```auto
PImage [] images = new PImage[3]
images[0] = loadImage("ImageOne.jpg");
images[1] = loadImage("ImageTwo.jpg");
images[2] = loadImage("ImageThree.jpg");
```
I have several images in an array, and I just don’t quite understand how to swap between the different images in the array, such as by pressing left and right on the keyboard. Like a slideshow, basically. I think I have to change the index number of the array but I don’t really understand what the code would be to do that. I know this is probably extremely simple, but I’m an absolute beginner so any help would be appreciated!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 8:49pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/2 "2022-12-12T20:49:20Z")
You need a Sketch with functions `setup()` and `draw()`
- In setup() load the images
- In draw() say: `image(images[index]);`
**The function `keyPressed()`**
In function `keyPressed()` :
```auto
if(keyCode==LEFT)
index--;
else if(keyCode==RIGHT)
index++;
```
And check when `index` is too small or too high
* * *
**The index variable**
index has to be a global variable `int index=0;`
Same for `PImage [] images = new PImage[3];`
This means, it belongs before setup()
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:22pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/4 "2022-12-12T22:22:53Z")
> [@Darkafterzoom](#):
>
> ```auto
> images[0] = loadImage("Mouth1.jpg");
> images[1] = loadImage("Mouth2.jpg");
> images[2] = loadImage("Mouth3.jpg");
>
> ```
this part before setup has to be deleted
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:25pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/5 "2022-12-12T22:25:09Z")
No ; after void keyPressed
```auto
void keyPressed {
....
....
}
```
- please don’t delete or change posts
- my answers now don’t make sense anymore
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 10:28pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/7 "2022-12-12T22:28:14Z")
Yeah, sorry, the initial post I sent I realized it had an error in it so I wanted to delete it and redo it, but I didn’t expect you to respond as fast as you did. Apologies for that! Can you tell me how this looks, then?
```auto
int index=0;
PImage [] images = new PImage[3]
void setup() {
images[0] = loadImage("Mouth1.jpg");
images[1] = loadImage("Mouth2.jpg");
images[2] = loadImage("Mouth3.jpg");
size(600,600);
img = loadImage("Mouth1.png");
image(img, 196, 238, 146, 86);
img = loadImage("Mouth2.png");
image(img, 196, 238, 146, 86);
img = loadImage("Mouth3.png");
image(img, 196, 238, 146, 86);
}
void draw() {
image(images[index]);
}
void keyPressed(); {
if(keyCode==LEFT)
index--;
else if(keyCode==RIGHT)
index++;
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:29pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/8 "2022-12-12T22:29:06Z")
size() should be first line in setup() always
no image display in setup()
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:29pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/9 "2022-12-12T22:29:25Z")
> [@Darkafterzoom](#):
>
> ` void keyPressed(); {`
no semicolon here please
**Does it work?**
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 10:37pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/10 "2022-12-12T22:37:52Z")
```auto
int index=0;
PImage [] images = new PImage[3]
void setup() {
size(600,600);
images[0] = loadImage("Mouth1.jpg");
images[1] = loadImage("Mouth2.jpg");
images[2] = loadImage("Mouth3.jpg");
}
void draw() {
image(images[index]);
img = loadImage("Mouth1.png");
image(img, 196, 238, 146, 86);
img = loadImage("Mouth2.png");
image(img, 196, 238, 146, 86);
img = loadImage("Mouth3.png");
image(img, 196, 238, 146, 86);
}
void keyPressed() {
if(keyCode==LEFT)
index--;
else if(keyCode==RIGHT)
index++;
}
```
This is what I have now. It’s saying "Syntax Error - error on “void.”, specifically line 7, void setup. I’m not exactly sure why.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:39pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/11 "2022-12-12T22:39:19Z")
> [@Darkafterzoom](#):
>
> ```auto
> img = loadImage("Mouth1.png");
> image(img, 196, 238, 146, 86);
>
> img = loadImage("Mouth2.png");
> image(img, 196, 238, 146, 86);
>
> img = loadImage("Mouth3.png");
> image(img, 196, 238, 146, 86);
>
> ```
Delete this
Why did you put this in…
- it is redundant to our array `images` and where we display an image from it in draw(): ` image(images[index]);`
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:40pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/12 "2022-12-12T22:40:19Z")
> [@Darkafterzoom](#):
>
> `PImage [] images = new PImage[3]`
You need a ; after this line
It should work now
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 10:52pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/13 "2022-12-12T22:52:09Z")
```auto
int index=0;
PImage [] images = new PImage[3];
void setup() {
size(600,600);
images[0] = loadImage("Mouth1.jpg");
images[1] = loadImage("Mouth2.jpg");
images[2] = loadImage("Mouth3.jpg");
}
void draw() {
image(images[index]);
}
void keyPressed() {
if(keyCode==LEFT)
index--;
else if(keyCode==RIGHT)
index++;
}
```
I looked over it a few times, it looks good, but I am getting an error about the void draw saying `"The method image(PImage, float, float) in the type Papplet is not applicable for the arguments (PImage). The function image() expects parameters like: image(PImage, float, float)"`
I tried adding some more values to image, `image(images[index],0,0);`, which actually did allow the program to load, but I now get a `"NullPointerException"` and the program crashes. I’ve seen this many times before and I never quite understand why it happens.
Thank you again for your patience thus far, by the way! I’m learning a lot from this.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:53pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/14 "2022-12-12T22:53:38Z")
You should get an error but only when you press - or +
a few times, not initially!!!
Do you receive red text saying image not found?
Remember to press ctrl-t in processing
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 10:59pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/15 "2022-12-12T22:59:48Z")
> [@Chrisir](#):
>
> And check when index is too small or too high
So at the end of `keyPressed()` say
```auto
if(index<0) index=0;
if(index>2) index=2;
```
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 11:05pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/16 "2022-12-12T23:05:31Z")
Yeah, even with your changes, running the program just results in a blank grey screen with a red message saying `"NullPointerException.`" The program becomes unresponsive and I have to close it manually, and then it simply says `"Could not run the sketch."`, nothing about the images … it’s trying to load something that doesn’t exist, I think? But I’m not sure what it would be since the code seems normal from what I’m seeing.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 12, 2022, 11:07pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/17 "2022-12-12T23:07:06Z")
That is unfortunate
Are the images in the Sketch folder?
Or its data folder ?
Names are case sensitive
Maybe restart processing or your computer
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 11:24pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/18 "2022-12-12T23:24:01Z")
Hmm yeah I’m not sure why it isn’t working. Hopefully if I mess around with it I can figure it out. Thank you so much for what you’ve done, though !
---
### Author:  [@Darkafterzoom](https://discourse.processing.org/u/Darkafterzoom)
#### Post date: [December 12, 2022, 11:30pm UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/19 "2022-12-12T23:30:28Z")
Ah actually I figured it out, for whatever reason changing the format of the images to JPEG made it work! If I could ask one last question, do you know how to make it so that the previous image also disappears when you move to the next one? I’m not sure if that’s just a quick touchup or if it would require another chunk of code. It’s not very important, but just curious.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 13, 2022, 7:17am UTC](https://discourse.processing.org/t/making-an-image-change-when-you-press-the-keyboard-like-a-slideshow/40139/20 "2022-12-13T07:17:23Z")
Just the first line in draw()
`background (0);` to delete the screen
**Remark**
You can also change the behavior when index has reached first or last element: at the moment it just stops.
It could also loop: when index is \<0 set index to 2 and vice versa
- so it doesn’t stop but loop