Making an image change when you press the keyboard, like a slideshow

Processing Coding Questions
1

Hello, I just need help with a simple code.

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!

1 Like
2

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() :

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()

4

this part before setup has to be deleted

5

No ; after void keyPressed

void keyPressed {
....
....
}

  • please don’t delete or change posts

  • my answers now don’t make sense anymore

7

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?

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++;
  
}
8

size() should be first line in setup() always

no image display in setup()

9

no semicolon here please

Does it work?

10 

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.

11

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]);
12

You need a ; after this line

It should work now

13 

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.

1 Like
14

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

15

So at the end of keyPressed() say

if(index<0) index=0;
if(index>2) index=2;
16

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.

17

That is unfortunate

Are the images in the Sketch folder?
Or its data folder ?

Names are case sensitive

Maybe restart processing or your computer

18

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 !

1 Like
19

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.

1 Like
20

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