Photo grid visualization

Processing Coding Questions
1

So I want to make something like this with a bunch of pictures (which are ordered). Any ideas how should I arrange them them with processing to get a similar result? I think I have to use an array for the photos and a loop, but I’m not quite sure how.

2

Landscape and portrait format images

main problem is when you have a mix of landscape and portrait format images…

better all are landscape format images…

(Sketch doesn’t read the landscape format meta information of the image (whether it’s landscape or portrait format) but just checks whether width or height of the image is bigger (in setup and in draw))

What it does

this sketch takes only .jpg and .JPG images

all images are loaded and resized in setup()

then all images are displayed in draw()

Remark

You can make the initial loading faster when you make a copy of your image folder(!) and then resize all images on the hard drive (using the program Irfanview or so) and then skip the resize part in setup().

Remark

at the end of setup() you can order the array images:

  • You can have a global float array brightness of same size as the array images

  • calculate the brightness of all images, store the results in the array brightness and then sort the array images by the values in the array brightness

I leave this to you

The sketch

The sketch can be further simplified.

Chrisir


// image grid 

// the array "images" 
PImage[] images; // global scope 

//set up an underlying grid structure
int colWidth = 99; //column width
int rowHeight = 99; //row height

// how many columns and rows do we have?
int colNum;
int rowNum;

void setup() {
  size (1029, 768); 
  background(0); 

  colNum = (width-10)/colWidth;
  rowNum = (height-10)/rowHeight;

  //load all the images in the data folder into the array "images" (but don't draw them)
  String[] filenames = listFileNames(dataPath("")); // C:/Users/Vibhore/Documents/Processing/TP1/data/

  // ERROR: 
  if (filenames==null) {
    println("Unable to find the folder: "
      +dataPath("")
      +"\nAbort.");
    exit();
    return;
  }

  images = new PImage [filenames.length]; //array of original images

  println (images.length
    +" images found."); 

  // ERROR: 
  if (filenames.length==0) {
    println("No images found, abort. ");
    exit();
    return;
  }

  // load and resize all images 
  for (int i=0; i<images.length; i++) {
    // print(filenames[i]+", ");
    print(".");
    images[i] = loadImage (filenames[i]); //load each image

    if (images[i].width>=images[i].height) {
      //landscape image (width is bigger than height -> image is wider)
      images[i].resize(colWidth, 0);  // resize it (0 means automatic / proportional)
    } else {
      // portrait mode image (height is bigger than width)
      images[i].resize(0, rowHeight); //resize it
    }
  }
} // func 

void draw() {
  //
  background(0); 
  noLoop();

  int counter = 0; //start at first image, keep track of what image you're on

  for (int j = 0; j < rowNum; j++) { //loop through all the rows
    for (int i = 0; i < colNum; i++) { //loop through all the columns

      // Check: landscape image or portrait mode image ? 
      if (images[i].width>=images[i].height) { 
        image(images[counter], i*(colWidth+2)+5, j*(rowHeight+2)+5); //draw the tile to the screen
      } else {
        float offset = (colWidth - images[counter].width) / 2; 
        image(images[counter], (i*(colWidth+2)) + offset+5, j*(rowHeight+2)+5); //draw the tile to the screen
      }

      counter++;

      if (counter >= images.length) { //value of counter never exceeds amount of images in the array
        break;
      }//if
    }//inner for loop

    if (counter >= images.length) { //value of counter never exceeds amount of images in the array
      break;
    }
  }//outer for loop
}// func

// -------------------------------------------------------------------------

String[] listFileNames(String dir) {
  //Function to get all files in the data folder (the folder "dir").
  //Returns a String array.
  //Returns null when dir is not a folder. 

  File file = new File(dir);

  // If it's not a directory, we leave here 
  if (!file.isDirectory()) {
    return null;
  }

  // It's a directory
  // get all files names
  String names[] = file.list();
  // target list
  StringList filelist = new StringList();

  for (String s : names) {
    if (!s.contains("DS_Store") && 
      (s.contains(".JPG") || s.contains(".jpg") ) ) {
      filelist.append(s);
    }//if
  }//for 

  return filelist.array();
}//func 
//
1 Like