sequence of images

edited November 2013 in Using Processing

Hello everyone, I'm new to Processing and I'm having some troubles with (in my opinion) a simple sketch in which i want to visualize an interactive sequence of images called 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg... like a sort of interactive powerpoint presentation.

I'd like that 0.jpg runs when the sketch starts, 1.jpg when 't' is hitten and the other ones sequently when ENTER is hitten.

These are my attempts to the problem:

1) ---------------------------------------------

PImage img0;
PImage img1;

int maxImages = 3; // Total # of images
int imageIndex = 2; // Initial image to be displayed is the first

PImage[] img = new PImage[maxImages]; 

void setup() {
  size(1280, 800);
  smooth();
  img0 = loadImage("0.jpg");
  img1 = loadImage("1.jpg");
  for (int i = 2; i < img.length; i ++ ) {
    img[i] = loadImage( i + ".jpg" );
  }
}

void draw() {
  image(img0, 0, 0);
  if (keyPressed) {
    if (key == 't') {
      image(img1, 0, 0);
    }
  } 
  else {
    if  (key == '\n') {
      for (int i = 0; i < img.length; i++) {
        image(img[i], 0, 0);
      }
    }
  }
}

2) ------------------------------------------------

PImage img0;
PImage img1;
int numFrames = 3;
PImage[] images = new PImage[numFrames];
int currentFrame = 2;

void setup() {
  size(1280, 800);
  smooth();
  img0 = loadImage("0.jpg");
  img1 = loadImage("1.jpg");
  for (int i = 2; i < images.length; i++) {
    String imageName = i + ".jpg";
    images[i] = loadImage(imageName) ;
  }
}

void draw() {
  image(img0, 0, 0);
  if (key == 't') {
    image(img1, 0, 0);
  } 
  else {
    if  (key == '\n') {
      image(images[currentFrame], 0, 0);
      currentFrame++;
    }
  }
}

3) -----------------------------------------------

int maxImages = 5; // Total # of images
int imageIndex = 0; // Initial image to be displayed is the first
int i=0;

PImage[] images = new PImage[maxImages];

void setup() {
  size(1280, 800);


  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( i + ".jpg" );
  }
}

void draw() {

  image(images[0], 0, 0);
  image(images[imageIndex], 0, 0);
  if (key == '\n') {


    imageIndex = (imageIndex + 1) % images.length;
  }
}

4) -----------------------------------------------

PImage img0;
PImage img1;
PImage img2;
PImage img3;
PImage img4;

void setup() {
  size(1280, 800);
  smooth();
  img0 = loadImage("0.jpg");
  img1 = loadImage("1.jpg");
  img2 = loadImage("2.jpg");
  img3 = loadImage("3.jpg");
  img4 = loadImage("4.jpg");
}

void draw() {
  image(img0, 0, 0);
  if (key == 't' || key == 'T') {
    image(img1, 0, 0);
  } 
  if (key == 'a' || key == 'A') {
    image(img2, 0, 0);
  }
  if (key == 's' || key == 'S') {
    image(img3, 0, 0);
  }
  if (key == 'd' || key == 'D') {
    image(img4, 0, 0);
  }
}

Only the fourth version works but it does the job not in the way i want..

Any suggestions?

Comments

  • edited November 2013

    2) is probably the closest of a good solution... But!

    PImage img0; // You don't need these two
    PImage img1;
    int numFrames = 3;
    PImage[] images = new PImage[numFrames];
    int currentFrame = 2;
    
    void setup() {
      size(1280, 800);
      smooth();
      img0 = loadImage("0.jpg");
      img1 = loadImage("1.jpg");
      for (int i = 2; i < images.length; i++) {
        String imageName = i + ".jpg";
        images[i] = loadImage(imageName) ;
      }
    }
    
    void draw() {
      image(img0, 0, 0); // Why always display the first one? Even more if you overwrite it.
      if (key == 't') {
        image(img1, 0, 0);
      }
      else {
        if  (key == '\n') {
          image(images[currentFrame], 0, 0);
          currentFrame++;
        }
      }
    }
    

    Better manage keys in the keyPressed() function, in general.

    Something like that (untested!):

    int numFrames = 5;
    PImage[] images = new PImage[numFrames];
    int currentFrame = 0;
    
    void setup() {
      size(1280, 800);
      smooth();
      for (int i = 0; i < images.length; i++) {
        String imageName = i + ".jpg";
        images[i] = loadImage(imageName);
      }
    }
    
    void draw() {
      image(images[currentFrame], 0, 0);
    }
    
    void keyPressed() {
      if (key == 't') {
        currentFrame = 1;
      } else if (key == '\n') {
        currentFrame++;
        if (currentFrame >= images.length) {
          currentFrame = 0; // Or 1, or 2
        }
      }
    }
    

    [EDIT] Fixed as described below

  • it works properly! thank you! only the 25th and the 26th lines make same errors when accidentally i press enter a time more that the sketch requests..

  • well, it seems that in some way the loop doesn't close with these two lines...

  • Should be if (currentFrame >= images.length) instead...

  • It works great! thank you!

Sign In or Register to comment.