# Slide Show Animation

**URL:** <https://discourse.processing.org/t/slide-show-animation/10595>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 1:51pm UTC](https://discourse.processing.org/t/slide-show-animation/10595 "2019-04-24T13:51:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcop](https://avatars.discourse-cdn.com/v4/letter/j/6f9a4e/32.png) [@jcop](https://discourse.processing.org/u/jcop)\
**Post date:** [April 24, 2019, 1:51pm UTC](https://discourse.processing.org/t/slide-show-animation/10595/1 "2019-04-24T13:51:36Z")

</div>

```auto
PImage france2;
PImage france3;
PImage france4;

void setup(){
 size(1000,600);
 smooth();
 france2 = loadImage("New Yotk.jpg");
 france3 = loadImage("france.jpg");
 france4 = loadImage("madrid.jpg");
}

void draw(){
 background(0);
 image(france2, 0, 0);
 image(france3, 0, 0);
 image(france4, 0, 0);

}

```

Is there any way to animate this so if be presented sort of like a slide show?

---

<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:** [April 24, 2019, 2:26pm UTC](https://discourse.processing.org/t/slide-show-animation/10595/2 "2019-04-24T14:26:19Z")

</div>

Yes, make an int `counter` which image to show

Show only one image depending on `counter` - use `if` here (or `switch()`)

Then make a timer and after 3 secs increment your int `counter`

When it’s \> 2 set `counter` back to 0

Below is a simple example for a timer

Regards, Chrisir

```auto
int counter=0;
int counter1=0; 
int intTimer;  

void setup() {
  size(700, 700);
  background(0); 

  intTimer=millis();
}

void draw() {

  background(0); 
  text(counter
    +"\n"
    +counter1, 23, 23); 

  // manage timer 
  if (millis()-intTimer > 1200) {
    counter++;
    intTimer=millis();
  }//if

  counter1++;
}

```

---

<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:** [April 29, 2019, 4:50pm UTC](https://discourse.processing.org/t/slide-show-animation/10595/3 "2019-04-29T16:50:27Z")

</div>

First, load your images into an array.

```auto
PImage[] slides;
void setup(){
  size(1000,600);
  slides = new PImage[3];
  slides[0] = loadImage("New Yotk.jpg");
  // ...
}

```

As in the example by Chrisir, use a global counter to determine which slide you are currently displaying.

```auto
int counter = 0;

```

Draw that slide:

```auto
void draw(){
 background(0);
 image(slides[counter], 0, 0);
}

```

Now if you want auto-timing, you can add that code. Or, if you want manual control, you can add that code. Or a back button. Or a reset button. Whatever that code is, it changes the counter, which changes what gets drawn.

```auto
void keyReleased(){
  if(key==' ') {
    counter = (counter + 1)%slides.length;
  }
}

```