Slide Show Animation

Processing Coding Questions
1 
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?

1 Like
2

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

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++;
}
1 Like
3

First, load your images into an array.

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.

int counter = 0;

Draw that slide:

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.

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