# File Listing Order

**URL:** <https://discourse.processing.org/t/file-listing-order/7148>\
**Category:** Coding Questions\
**Created:** [January 4, 2019, 4:43am UTC](https://discourse.processing.org/t/file-listing-order/7148 "2019-01-04T04:43:52Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 4, 2019, 2:29pm UTC](https://discourse.processing.org/t/file-listing-order/7148/21 "2019-01-04T14:29:14Z")

</div>

exactly, but i could not see that from your above code

 ![snap_0006](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/181458d0c2ef59189f5a86a147d39ad2c85256e7.jpeg)

 ![2019-01-04_21-33-23_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/050199b43247094401e8892b0d5e4694f4cf8566.png)

thanks.

by the way, the

```auto
"extensions=,png

```

is tricky, from where you know?

> <https://github.com/processing/processing/blob/master/core%2Fsrc%2Fprocessing%2Fcore%2FPApplet.java#L6693>

say something like

> // “extension=js” or “extensions=js|csv|txt” (no dot)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 5, 2019, 10:40am UTC](https://discourse.processing.org/t/file-listing-order/7148/22 "2019-01-05T10:40:45Z")

</div>

> [@kll](#):
>
> by the way, the
> 
> ```auto
> "extensions=,png
> 
> ```
> 
> is tricky, from where you know?

I’ve actually studied its source code in order to know I had to use commas.  
And also that an initial comma is needed even for the 1st extension!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 5, 2019, 11:02am UTC](https://discourse.processing.org/t/file-listing-order/7148/23 "2019-01-05T11:02:10Z")

</div>

> [@kll](#):
>
> Exactly, but I could not see that from your above code.

When I need to code a very simple sketch, w/o any animations or even functions, I use what is so called “static sketch”.

The standard 1 is called “interactive sketch”, in which we can have the callbacks **setup()** & **draw()**.

More info on them here: [Processing Overview / Processing.org](http://Processing.org/tutorials/overview/)

Here’s the my “static sketch” converted to “dynamic sketch”: 😀

```java
static final String PICS_EXTS = "extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp,wbmp";

void setup() {
  final File dir = dataFile("");
  println(dir);

  String[] imagePaths = {};
  int imagesFound = 0;

  if (dir.isDirectory()) {
    imagePaths = listPaths(dir.getPath(), "files", "recursive", PICS_EXTS);
    imagesFound = imagePaths.length;
  }

  printArray(imagePaths);
  println("Found", imagesFound, "image(s)");

  exit();
}

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 6, 2019, 8:27pm UTC](https://discourse.processing.org/t/file-listing-order/7148/24 "2019-01-06T20:27:31Z")

</div>

I’m having trouble using this code to load my images, it seem like “loadimage” wants a string and not a file.

Is there a way to extract the file name from the File? or convert it to a string?

Thanks

Phil

```auto

import java.util.Date;

int imageHeight = 800;
PImage img;  
int numFrames = 5;
int currentFrame = 0;
boolean gotFolder = false;
int position=0;

 
 
void setup() {

  noStroke();
  
size(500, 400);
 
  String path = "/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/";

  ArrayList<File> allFiles = listFilesRecursive(path);
 

  for (File f : allFiles) {
      currentFrame++;
   
    println("Filename: " + f);
    
   img = loadImage(f); //THIS LINE ERRORS
   
        
  }

  noLoop();
  
  
  
}
// Nothing is drawn in this program and the draw() doesn't loop because
// of the noLoop() in setup()
void draw() {

}

// 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;
  }
}

// This function returns all the files in a directory as an array of File objects
// This is useful if you want more info about the file
File[] listFiles(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    File[] files = file.listFiles();
    return files;
  } else {
    // If it's not a directory
    return null;
  }
}

// Function to get a list of all files in a directory and all subdirectories
ArrayList<File> listFilesRecursive(String dir) {
   ArrayList<File> fileList = new ArrayList<File>(); 
   recurseDir(fileList,dir);
   return fileList;
}

void recurseDir(ArrayList<File> a, String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    // If you want to include directories in the list
    a.add(file);  
    File[] subfiles = file.listFiles();
    java.util.Arrays.sort(subfiles); //Sorts all files by name
    for (int i = 0; i < subfiles.length; i++) {
      // Call this function on all files in this directory
      recurseDir(a, subfiles[i].getAbsolutePath());
    }
  } else {
    a.add(file);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 6, 2019, 8:29pm UTC](https://discourse.processing.org/t/file-listing-order/7148/25 "2019-01-06T20:29:35Z")

</div>

That’s because it wants a path to the file, and not the actual file itself.  
Replace:

```auto
img = loadImage(f); //THIS LINE ERRORS

```

With:

```auto
img = loadImage(f.getAbsolutePath()); //THIS LINE DOES NOT ERROR :v

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 6, 2019, 8:54pm UTC](https://discourse.processing.org/t/file-listing-order/7148/26 "2019-01-06T20:54:04Z")

</div>

Ahhh I thought that just gave me the path, not the filename too…

Thanks.

Phil

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 6, 2019, 9:13pm UTC](https://discourse.processing.org/t/file-listing-order/7148/27 "2019-01-06T21:13:36Z")

</div>

arghh one more very odd issue.

It seems like nothing draws to my sketch if I have “img = loadimage(imageName);” in my draw function. If I comment that line out I get a red background as expected. As soon as I add that line nothing draws in my sketch window but the sketch runs an loops through all the file names with errors…

```auto

import java.util.Date;

int imageHeight = 400;
PImage img;  
int currentFrame = 0;
int position=0;
String path = "/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/";

void setup() {

  noStroke();

  size(500, 400);
  //frame.setResizable(true);
  background(255, 0, 0);
}

void draw() {   

  ArrayList<File> allFiles = listFilesRecursive(path);

  for (File f : allFiles) {
    currentFrame++;

    String imageName = f.getAbsolutePath();
    if (imageName.endsWith("JPG") || imageName.endsWith("jpg")) {
      println("Filename: " + imageName);
      
     img = loadImage(imageName); 
      
  
    }
  }
}

// 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;
  }
}

// This function returns all the files in a directory as an array of File objects
// This is useful if you want more info about the file
File[] listFiles(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    File[] files = file.listFiles();
    return files;
  } else {
    // If it's not a directory
    return null;
  }
}

// Function to get a list of all files in a directory and all subdirectories
ArrayList<File> listFilesRecursive(String dir) {
  ArrayList<File> fileList = new ArrayList<File>(); 
  recurseDir(fileList, dir);
  return fileList;
}

void recurseDir(ArrayList<File> a, String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    // If you want to include directories in the list
    a.add(file);  
    File[] subfiles = file.listFiles();
    java.util.Arrays.sort(subfiles); //Sorts all files by name
    for (int i = 0; i < subfiles.length; i++) {
      // Call this function on all files in this directory
      recurseDir(a, subfiles[i].getAbsolutePath());
    }
  } else {
    a.add(file);
  }
}

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 6, 2019, 11:14pm UTC](https://discourse.processing.org/t/file-listing-order/7148/28 "2019-01-06T23:14:58Z")

</div>

I figured out the issue although not had chance to figure out a solve…

Basically the draw function doesn’t update until the entire for loop is done and therefore nothing is drawn.

Phil

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 7, 2019, 9:27am UTC](https://discourse.processing.org/t/file-listing-order/7148/29 "2019-01-07T09:27:03Z")

</div>

Multiple things all at once:

- That fix for your first error I gave you is because it was literally giving the `File` itself - the `.getAbsolutePath()` now gives a `String` with full path with the filename, and not that `File` as an object.

- And, in your current issue, the problem is that `img = loadImage(imageName);` loads the image from the disk and puts it into variable `img`, but nothing else. You have to tell it to draw it to the screen.

- Also, every time you do `img = loadImage(imageName);` you are removing what was there in `img` before by putting a new image into it.

- That code you have in `draw()` goes through all folders and directories inside of your folder that you set, and sets `img` to each one of them, and by the moment the code ends `img` has only the last image.

- Also, it’s best to use `loadImage(...` function _only_ in `setup()`, as `draw()` is run 60 times a second, and loading your image(s) from your hard drive 60 times a second is, well, pretty taxing for your hard drive and the sketch’s performance - it’s better to store it in that variable `img`, and then, inside of `draw()`, do `image(img, 0, 0);` to actually draw the image `img` from top left corner(which coordinates 0 0 point to).

Overall, I suggest you to look and replicate this example sketch:  
[https://processing.org/examples/loaddisplayimage.html](https://processing.org/examples/loaddisplayimage.html)

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 7, 2019, 4:13pm UTC](https://discourse.processing.org/t/file-listing-order/7148/30 "2019-01-07T16:13:28Z")

</div>

Thanks @Architector_4 I had stripped out the code that was actually Processing each image to help debug.

Basically my code does work but doesn’t update my draw window until it has looped through all my thousands of images and Processed them.

That works for this purpose as I process each image then save a colored barcode which is visual representation of my photos of 2018.

Thanks for all your help. I will try and figure out how to avoid the For loop when I get chance but at least I got this done and posted within the first week of 2019 🙂

 ![2018_photoBarcode](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a81f10f9523bec41adcbf33063cdf3b03ffa1514.jpeg)

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 7, 2019, 6:58pm UTC](https://discourse.processing.org/t/file-listing-order/7148/31 "2019-01-07T18:58:17Z")

</div>

Oh, that’s actually a pretty clever idea!  
Although it could be better done by loading and displaying only 1 image at a time in `draw()` - a variable `frameCount` helps with that, as it tells which time the `draw()` function is currently run.  
Here, this sketch gets all the images and makes a barcode thing while visually flashing every image it puts on the screen. You’ll have to set horizontal size manually though - set it to the amount of images to don’t leave empty space or miss out on images on the right.

```auto
String PICS_EXTS = "extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp,wbmp";
  //Picture extensions
String[] images;
  //Where we are going to put our images
int ySize = 500;
  //Vertical size
float barCodeStretch = 1;
  //Increase to something like 500 to stretch the image to form the barcode like thing.
  
void settings(){
  size(1000,ySize); //Set window size
}

void setup() {
  String path = dataPath("");
  //Path of where to look for all the iamges
  
  images = listPaths(path, "recursive", "files", PICS_EXTS);
  println("We found "+images.length+" images.");
}

void draw(){
  if(frameCount<images.length){
    image(loadImage(images[frameCount]),frameCount,-(ySize/2*(barCodeStretch-1))/2,ySize,ySize*barCodeStretch);
    //I don't know the validity of the maths for the position/scale above, but it certainly does stretch things.
  }else{
    println("Saving image...");
    saveFrame(dataPath("barcode.png"));
    println("Saved. Closing in 10 seconds");
    delay(10000); //Wait 10 000 milliseconds.
    exit();
  }
}

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 7, 2019, 7:13pm UTC](https://discourse.processing.org/t/file-listing-order/7148/32 "2019-01-07T19:13:37Z")

</div>

This is very similar to how I had it before implementing the listpaths function to sort the files alphabetical.

Thanks for taking the time to help me with this…

Phil

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 8, 2019, 2:44am UTC](https://discourse.processing.org/t/file-listing-order/7148/33 "2019-01-08T02:44:43Z")

</div>

I get a “function does not exist” error here.

images = listPaths(path, “recursive”, “files”, PICS\_EXTS);

Maybe you changed how the directory listing worked?

Could you post the full code.

Cheers

Phil

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 8, 2019, 3:50am UTC](https://discourse.processing.org/t/file-listing-order/7148/34 "2019-01-08T03:50:28Z")

</div>

i play @Architector_4 example  
and when i save the project and create a /data/ dir with some pictures in it  
the function works here. ( means also: it is the full code )

note: storing the resulting picture at the same path will on second run list this too.

so as the function not run from your code, you might post  
your code here / possibly we find the problem /

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 8, 2019, 3:56am UTC](https://discourse.processing.org/t/file-listing-order/7148/35 "2019-01-08T03:56:20Z")

</div>

```auto
String PICS_EXTS = "extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp,wbmp";
  //Picture extensions
String[] images;
  //Where we are going to put our images
int ySize = 500;
  //Vertical size
float barCodeStretch = 1;
  //Increase to something like 500 to stretch the image to form the barcode like thing.
  
void settings(){
  size(1000,ySize); //Set window size
}

void setup() {
  String path = dataPath("");
  //Path of where to look for all the iamges
  
  images = listPaths(path, "recursive", "files", PICS_EXTS);
  println("We found "+images.length+" images.");
}

void draw(){
  if(frameCount<images.length){
    image(loadImage(images[frameCount]),frameCount,-(ySize/2*(barCodeStretch-1))/2,ySize,ySize*barCodeStretch);
    //I don't know the validity of the maths for the position/scale above, but it certainly does stretch things.
  }else{
    println("Saving image...");
    saveFrame(dataPath("barcode.png"));
    println("Saved. Closing in 10 seconds");
    delay(10000); //Wait 10 000 milliseconds.
    exit();
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 8, 2019, 4:00am UTC](https://discourse.processing.org/t/file-listing-order/7148/36 "2019-01-08T04:00:48Z")

</div>

that works fine here,  
under above mentioned project environment  
if you just run it in a new processing 3.4 window i see:

 ![2019-01-08_11-06-26_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2f94ed0620ff938a31b9c1f2286c905a3ead7667.png)

insofar @GoToLoop code was more failsafe.

pls show us the error ?picture?

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 8, 2019, 4:13am UTC](https://discourse.processing.org/t/file-listing-order/7148/37 "2019-01-08T04:13:43Z")

</div>

Ahh… I figured it out… I had Processing 2.21 open.

I tried it in Processing 3 and it worked…

However, this is now going back to an earlier problem of the images not being sorted alphabetically.

Example output below.

Phil

We found 2537 images.  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180802\_214451.jpg  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180930\_144223.jpg  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180622\_103332.jpg  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180531\_082254.jpg  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180105\_164421\_700.jpg  
/Users/philspitler/Downloads/Takeout/GooglePhotos/2018/IMG\_20180320\_130226.jpg

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 8, 2019, 4:33am UTC](https://discourse.processing.org/t/file-listing-order/7148/38 "2019-01-08T04:33:14Z")

</div>

did you try a

```auto
  images = sort(images);

```

looks good here.

or lets go back:  
did that work while you use this

> [@File Listing Order](https://discourse.processing.org/t/file-listing-order/7148/6):
>
> some rearrangement // https://discourse.processing.org/t/file-listing-order/7148 // @philspitler @Architector\_4 ArrayList\<File\> myfiles; String path = "/home/pi/projects/processing/sketchbook"; boolean piconly = true; void setup() { println("\nListing info about all files in a directory and all subdirectories \n \_filter\_ piconly: "+piconly); myfiles = listFilesRecursive(path,piconly); for (File afile : myfiles) println("File: "+afile ); // afile.getAbsolutePath()…

code? ( @architector_4 version with sort and selected file types )  
if ok, you can all posts below that consider a academic exercise.

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [January 8, 2019, 4:47am UTC](https://discourse.processing.org/t/file-listing-order/7148/39 "2019-01-08T04:47:53Z")

</div>

> [@kll](#):
>
> images = sort(images);

Worked perfectly… Thanks again.

Phil

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 8, 2019, 5:21am UTC](https://discourse.processing.org/t/file-listing-order/7148/40 "2019-01-08T05:21:43Z")

</div>

Oh, yes, right, I forgot what the actual topic was about and forgot to include `sort(images);` in my actual code. Sorry! 🤪

[Previous page](https://discourse.processing.org/t/file-listing-order/7148.md?page=1)

[Next page](https://discourse.processing.org/t/file-listing-order/7148.md?page=3)