Thanks so much that was  really helpful. I'm almost at the end of this project. Do you think it would be simple to have if statements that change what tag I'm searching for?

For example
if (keyPressed) {
 // search for different tag
}

would you have to create an object or a whole new array?

It's better to put that in a void keyPressed method, not inside draw(). The keyPressed method could handle typing and change the searchString (see the forum). Once the user presses enter, a new search starts and new images are downloaded. The requestImage method is already threaded, but it would be best to also use threads for the xml-search, otherwise your program will stop running until the xml-stuff finishes. You could use a fixed array, but I think a flexible ArrayList is more suitable.

I feel like you'd have to stop the current array from running/looping and then switch to the next group of images - but is there a way to do this seamlessly? What I have currently just freezes the program momentarily:

1. int imageIndex = 0;
   PImage[] images;
   
   
   String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";
   String query = api + "tag=color=green&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";
   String query2 = api + "tag=red&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";
   
   XMLElement xml = new XMLElement(this, query);
   XMLElement[] photoTag = xml.getChildren("photos/photo");
   
   void setup() {
     size(500, 500);
   
    
     //text - Free text search. Searches the title, description or tags that contain this text.
     //page - Which page of results you want returned
     //per_page - Number of photos to return per page
     //api_key - Required to access API
     println(photoTag.length + " images"); // print the length of the array
     images = new PImage[photoTag.length];
     for (int i = 0; i < photoTag.length; i++) {
   //println(displayPhoto);
   
     String farm = photoTag[i].getString("farm");
     String server = photoTag[i].getString("server");
     String id = photoTag[i].getString("id");
     String secret = photoTag[i].getString("secret"); 
     String img = "http://farm"+farm+".static.flickr.com/"+server+"/"+id+"_"+secret+".jpg";
     images[i] = requestImage(img);
     }
     textAlign(CENTER, CENTER);
     smooth();
    
   }
   
   
   void draw() {
    background(0);
    if (images[imageIndex] != null) { image(images[imageIndex], 0, 0); }
    fill(0);
    ellipse(15, 15, 20, 20);
    fill(255);
    text(imageIndex + "", 16, 14);
    if (frameCount % 60 == 0) {
     imageIndex++; // what number of photo in the array are we at + 1 aka move to the next one
    if (imageIndex >= images.length) {imageIndex = 0;} // if the image number is greater or equal to the length of the array, start over
    }
    
    if (keyPressed) {
     xml = new XMLElement(this, query2);
    }
    
    
   }
   
   
   
   

Ok, I was thinking of a situation with free user input. If you only have 2 or a few queries which are known at the start, then the easiest solution is to load the images for all queries in setup. So you have not one array of images, but perhaps 2 or a few arrays of images ready. Then you can use an if statement to switch between the arrays. Obviously then you would not need to worry about threads or ArrayLists or anything. So it depends on your final goal.

Am I doing this wrong? It seems excessive so far...

import processing.serial.*;
Serial port;
float reading = 0;

int imageIndex = 0;
PImage[] imagesq1;
PImage[] imagesq2;
PImage[] imagesq3;
PImage[] imagesq4;

String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";
String query1 = api + "tag=red&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";
String query2 = api + "tag=orange&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";
String query3 = api + "tag=light-blue&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";
String query4 = api + "tag=blue&cluster_id=1&format=rest&extras=url_o&api_key=95ce1f5274641fe044058150eaafef7b";

XMLElement xml1 = new XMLElement(this, query1);
XMLElement xml2 = new XMLElement(this, query2);
XMLElement xml3 = new XMLElement(this, query3);
XMLElement xml4 = new XMLElement(this, query4);

XMLElement[] photoTag1 = xml1.getChildren("photos/photo");
XMLElement[] photoTag2 = xml2.getChildren("photos/photo");
XMLElement[] photoTag3 = xml3.getChildren("photos/photo");
XMLElement[] photoTag4 = xml4.getChildren("photos/photo");

void setup() {
  size(500, 500);
  String[] devices = Serial.list();
  port = new Serial(this, devices[0], 9600);
  port.bufferUntil('\n');
 
  //text - Free text search. Searches the title, description or tags that contain this text.
  //page - Which page of results you want returned
  //per_page - Number of photos to return per page
  //api_key - Required to access API
  println(photoTag1.length + " imagesq1"); // print the length of the array
  imagesq1 = new PImage[photoTag1.length];
  imagesq2 = new PImage[photoTag2.length];
  imagesq3 = new PImage[photoTag3.length];
  imagesq4 = new PImage[photoTag4.length];
 
  for (int i = 0; i < photoTag1.length; i++) {
//println(displayPhoto);

  String farm1 = photoTag1[i].getString("farm");
  String server1 = photoTag1[i].getString("server");
  String id1 = photoTag1[i].getString("id");
  String secret1 = photoTag1[i].getString("secret"); 
  String img1 = "http://farm"+farm1+".static.flickr.com/"+server1+"/"+id1+"_"+secret1+".jpg";
 
  String farm2 = photoTag2[i].getString("farm");
  String server2 = photoTag2[i].getString("server");
  String id2 = photoTag2[i].getString("id");
  String secret2 = photoTag2[i].getString("secret"); 
  String img2 = "http://farm"+farm2+".static.flickr.com/"+server2+"/"+id2+"_"+secret2+".jpg";
 
  String farm3 = photoTag3[i].getString("farm");
  String server3 = photoTag3[i].getString("server");
  String id3 = photoTag3[i].getString("id");
  String secret3 = photoTag3[i].getString("secret"); 
  String img3 = "http://farm"+farm3+".static.flickr.com/"+server3+"/"+id3+"_"+secret3+".jpg";
 
  String farm4 = photoTag4[i].getString("farm");
  String server4 = photoTag4[i].getString("server");
  String id4 = photoTag4[i].getString("id");
  String secret4 = photoTag4[i].getString("secret"); 
  String img4 = "http://farm"+farm4+".static.flickr.com/"+server4+"/"+id4+"_"+secret4+".jpg";
 
  imagesq1[i] = requestImage(img1);
  imagesq2[i] = requestImage(img2);
  imagesq3[i] = requestImage(img3);
  imagesq4[i] = requestImage(img3);
  }
  textAlign(CENTER, CENTER);
  smooth();
 
}


void draw() {

 background(0);
 if (imagesq1[imageIndex] != null) { image(imagesq1[imageIndex], 0, 0); }
 fill(0);
 ellipse(15, 15, 20, 20);
 fill(255);
 text(imageIndex + "", 16, 14);
 if (frameCount % 60 == 0) {
  imageIndex++; // what number of photo in the array are we at + 1 aka move to the next one
 if (imageIndex >= imagesq1.length) {imageIndex = 0;} // if the image number is greater or equal to the length of the array, start over
 }

}

void serialEvent(Serial port) {
 reading = float(port.readStringUntil('\n'));
 
 println(reading);
 background(0);
}

Whatever works. But instead of repeating the code, it would be cleaner to make a custom method that takes as a parameter the tag (String) and outputs an array of images. Something like pseudocode:

1. PImage[] imagesq1 = tagSearch("red");
2. // etc.
   
3. 
   
4. PImage[] tagSearch(String tag) {
5.   // make query with tag
6.   // xml stuff
7.   // download images (perhaps here loadImage is better)
   
8.   // return image array
9. }

Or use OOP and put it in a class for an imageArrayFromFlickrTag object.

I guess we've established there there are almost always different options to realise something.

Pick the solution that fits best with your final goal and your personal preference.

Hi! This code has been super useful to me. Thanks for sharing it!