Load multiple images and pixels sequentially

This code should sample the first pixel from the first image in the folder (data folder), the second pixel from the second image, the third pixel from the third image, and so on; however, when I run the script with two images (a black image and a white image of equal size) it doesn't produce a neat grid of black and white pixels (black, white, black, white, black, white etc..), instead it creates a grid with clusters of black and white pixels of the sampled images. How do I get it to blend the pixels sequentially?

Any help would be appreciated.

Here is the code:

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

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

  //load all the images in the data folder into an array (but don't draw them)
  String[] filenames = listFileNames(dataPath(""));
  PImage[] images = new PImage [filenames.length]; //array of original images

  for (int i=0; i<images.length; i++) { 
    images[i] = loadImage (filenames[i]); //load each image
    images[i].resize(width, height); //resize it to the size of the canvas

  //for each image in the array, make a tile and draw it to the screen
  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 therows
    for (int i = 0; i < colNum; i++) { //loop through all the columns
      //for each image, make a tile
      PImage tile=images[int(random(images.length))].get(i*colWidth, j*rowHeight, colWidth, rowHeight);
      image(tile, i*colWidth, j*rowHeight); //draw the tile to the screen
      // NOTE: uncomment the code below to view the underlying grid
      // stroke(0, 255, 0);      
      // noFill();
      // rect(i*colWidth, j*rowHeight,colWidth, rowHeight);

      if (counter >= images.length) { //value of counter never exceeds amt of images in the array
        counter = 0;

void draw() {

//function to get all files in the data folder
String[] listFileNames(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    String names[] = file.list();

    StringList filelist = new StringList();

    for (String s : names) {
      if (!s.contains("DS_Store")) {
    return filelist.array();
  } else {
    // if it's not a directory
    return null;


  • (deleted duplicate thread)

  • Sorry about the duplication.

  • edited September 2015

    In line 25 it seems like you are just picking images at random images[int(random(images.length))], try to use your counter variable instead: images[counter]

  • Thanks for answering Poersch. I have researched counter the last few days and played around with the code, but I can't seem to get it working :-(

  • edited September 2015

    If people realized how counter productive micro managing forums were , they would be silent. Nothing boils me searching for results then hitting dead ends by someone interrupting a subject to pint out its in the wrong category or posted twice. STOP IT. Its not helpful.

Sign In or Register to comment.