Hello all,

I created a photo slideshow for an exhibition I'm making. I also posted a question about taking the pictures. I created this code from different codes I found on the forum and in the refrence. I'm quite happy with it only it runs kinda slowly. And an other thing is that I'm not happy with is the end position of the photo's. I want to have the end position as random as possible over the whole screen but right now they end mostly from the left bottom corner to the right top corner.
How can I get the end position more random than it is right now??
Below is the whole code.

Code:

import processing.opengl.*;

 PImage b; // The image that we are sliding in
float x; // The drawing x position of the image we are sliding in
float y; // The drawing y position of the image we are sliding in
float easing = 0.10; // The slowdown multiplier of the slide
float r = random(-45, 45); // The random rotation of the image
float dx;
float dy;

int numFrames = 20;  // The number of frames in the animation
int image_count = 0; // Keep track of the amount of images we already slided in
PImage[] images; // List with images
ArrayList previous_drawn_images = new ArrayList(); // Previous drawn array
ArrayList previous_drawn_image = new ArrayList(); // The last previous drawn image (used to save coordinates and rotation)

void setup() 
{
  size(800, 800, OPENGL); 
  smooth();
  noStroke();
  frameRate(30);

  // Start by reading the images
  readImages();

  // Make sure a image is selected
  b = images[0];
}

void draw() {
  // Clear the whole background
  background( 51 );

  // Draw all previous images
  for(int i = 0; i < previous_drawn_images.size(); i++)
  {
    previous_drawn_image = (ArrayList) previous_drawn_images.get(i);
    drawImage(images[i], (Float) previous_drawn_image.get(0), (Float) previous_drawn_image.get(1), (Float) previous_drawn_image.get(2));    
  }

  // Slide in a new image (calculate the x and y coordinates
  // These change every draw, starting with a big dx and dy (fast moving), slowing down by multiplying with easing
  dx = width/2 - x;
  if(abs(dx) > 1) {
    x += dx * easing;
  }
  
  dy = height/2 - y;
  if(abs(dy) > 1) {
    y += dy * easing;
  }

  // Draw the new image with the new x and y coordinates
  drawImage(b, x, y, r);
  
  // If dy is almost finished
  if(dy < 5)
  {
     // Put the old image in the stack, so we can repaint them for we print the new image
     if(image_count < images.length - 1)
     {
	 image_count++;

	 // Save the x, y and rotation of the last printed image, so we can reprint it
	 previous_drawn_image = new ArrayList();
	 previous_drawn_image.add(new Float(x));
	 previous_drawn_image.add(new Float(y));
	 previous_drawn_image.add(new Float(r));
	 previous_drawn_images.add(previous_drawn_image);
     }
     // Reset some stuff if we are at the end of all images
     else {
	 previous_drawn_image = new ArrayList();
	 previous_drawn_images = new ArrayList();
	 image_count = 0;

	 // Reread all images if we are at the end
	 readImages();
     }

     // Assign new images
     b = images[image_count];

     // Reset some stuff after every image
     r = random(-45, 45);
     dx = width/2;
     dy = height/2;
     x = random(0, width);
     y = 0;
  }
}

// This function returns all the files in a directory as an array of Strings  
String[] listFileNames(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    String names[] = file.list();
    return names;
  } 
  else {
    // If it's not a directory
    return null;
  }
}

void readImages() {
  String image_path = "/Users/menno/Documents/Processing/main/";
  String[] filenames = listFileNames(image_path);
  //println(filenames[5]);

  int j = 0;
  for(int i = 0; i < filenames.length; i++)
  {
    String[] tmp_string = match(filenames[i], ".png");

    if (tmp_string != null)
    {
	j++;
    }
  }
  
  images = new PImage[j];
  j = 0;
  for(int i = 0; i < filenames.length; i++)
  {
    String[] tmp_string = match(filenames[i], ".png");

    if (tmp_string != null)
    {
	images[j] = loadImage(image_path + filenames[i]);
	j++;
    }
  }
  
  println(millis() + ": New images read from directory");
}

void drawImage(PImage image_to_draw, float x, float y, float r)
{
  fill(0,0,0,50);
  pushMatrix();
  rectMode(CENTER);
  rotate(radians(r));
  rect(x+4, y+4, 330, 250);
  popMatrix();

  fill(255,255,255);
  pushMatrix();
  rotate(radians(r));
  rectMode(CENTER);
  rect(x, y, 330, 250);
  image(image_to_draw, x-160, y-120, 320, 240);
  popMatrix(); 
}
 

Hey Arie,

I rewrote the program from scratch as that was more efficient. Some remarks:

- I've used a photo class
- still using your assumption that the images are 320 x 240
- the program currently reads jpg and png files from the data directory
- loads all existing images in setup
- checks for new images every draw cycle
- only calls loadPhotos when there are indeed new images
- only loads the new images
- only moves photos that haven't reached their destination
- see the code introduction for some more features

Hope this helps.

Amnon

Code:

//***************************************************************//
// Dynamic Image Slideshow
// by amnonP5 <http://amnonp5.wordpress.com>
// 
// space = Add slide
//     z = Turn ON / OFF the autoplay function
//     x = Delete last slide
//     c = Clear all slides
// 
// Comment IN / OUT: print added image message to console
// Comment IN / OUT: auto-reset slideshow at last slide
// 
//***************************************************************//

import processing.opengl.*;

ArrayList photos = new ArrayList();
String[] loadFilenames;
PImage[] loadPhotos;
int counter, fileCount;
boolean autoPlay = false; // by default autoplay is OFF

void setup() {
  size(1280,720,OPENGL);
//  size(screen.width,screen.height,OPENGL); // full screen mode
  smooth();
  loadPhotos = new PImage[10000]; // maximum of 10.000 images
  loadFilenames();
  loadPhotos(); // all existing images are loaded in setup
  fileCount = loadFilenames.length;
}

void draw() {
  background(51);
  checkNew(); // checks for new images in the data directory every draw cycle
  if(autoPlay) {autoPlay();}
  for (int i = 0; i < photos.size(); i++) {
    Photo s = (Photo) photos.get(i);
    s.display();
    s.move();
  }
//  if (photos.size() == fileCount) {photos.clear();} // reset slideshow when it reaches the last slide
}

void loadFilenames() {
  java.io.File folder = new java.io.File(dataPath("")); // reads files from data folder
  java.io.FilenameFilter imgFilter = new java.io.FilenameFilter() {boolean accept(File dir, String name) {return name.toLowerCase().endsWith(".jpg") || name.toLowerCase().endsWith(".png");} };
  loadFilenames = folder.list(imgFilter);
}

void loadPhotos() {
  for (int i = fileCount; i < loadFilenames.length; i++) { // only load new images
    loadPhotos[i] = loadImage(loadFilenames[i]);
//    println("Photo added: " + loadFilenames[i]); // print added image message to console
  }
}

void checkNew() {
  loadFilenames();
  if (loadFilenames.length > fileCount) {loadPhotos(); fileCount = loadFilenames.length;} // only call loadPhotos if there are new images
}

void autoPlay() {
  counter++;
  if (counter >= 60 && photos.size() < loadFilenames.length) {photos.add(new Photo(random(80,width-80),random(60,height-60),random(-30,30))); counter=0;}
}

void keyPressed() {
  if (key == 'z') {if(autoPlay) {autoPlay = false;} else {autoPlay = true;}}
  if (key == ' ') {if (photos.size() < loadFilenames.length) {photos.add(new Photo(random(80,width-80),random(60,height-60),random(-30,30)));}}
  if (key == 'x') {if (photos.size() > 0) {photos.remove(photos.size()-1);}}
  if (key == 'c') {photos.clear();}
}

class Photo {
  PImage photo;
  float targetXpos;
  float targetYpos;
  float rotation;
  float xpos;
  float ypos;
  float easing;

  Photo(float targetXposTemp, float targetYposTemp, float rotationTemp) {
    photo = loadPhotos[photos.size()];
    xpos = width/2;
    ypos = -130;
    targetXpos = targetXposTemp;
    targetYpos = targetYposTemp;
    rotation = rotationTemp;
    easing = 0.1;
  }

  void display() {
    rectMode(CENTER);
    imageMode(CENTER);
    noStroke();

    pushMatrix();

    translate(width/2,height/2);
    rotate(radians(rotation));
    translate(-width/2,-height/2);

    translate(xpos,ypos);

    fill(0,0,0,50);
    rect(4,4,330,250);
    fill(255,255,255);
    rect(0,0,330,250);
    image(photo,0,0,320,240);

    popMatrix(); 
  }

  void move() {
    if (dist(xpos,ypos,targetXpos,targetYpos) > 1) { // only move if the destination has not been reached
    xpos = (1-easing) * xpos + (easing) * targetXpos;
    ypos = (1-easing) * ypos + (easing) * targetYpos;
    }
  }
}
 

Whoaaa Nice. You're my hero!! Works excellent

In addition to changing the path in loadFilenames, you also need to change the path in the loadPhotos function. Otherwise they are not using the same directory.

In the function loadPhotos() replace this...

Code:

    loadPhotos[i] = loadImage(loadFilenames[i]); 

by this...

Code:

    loadPhotos[i] = loadImage("/Users/menno/Documents/Processing/main/" + loadFilenames[i]); 

Does it work now?