Request Image from URL - within draw loop

rumlac

Hello, I have been looking at the example for request image (below) and am trying to figure out how to alter it so that the request image part is within the draw loop.

The reason for with is that I want to be able to display an instagram image each time a user posts a new photo.

At the moment, I am using:

      newphoto = loadImage(newphotoURL, "png");
      image(newphoto, 100, 100);

This happens when the user hovers over a circle that represents a new post.

The issue I am having is that when the user hovers over the circle, there is a slight stutter as the requested image is accessed from its URL.

Instead, what I am trying to do is show a black placeholder while the photo is still being loaded from its URL, in order to stop the stutter as the sketch waits for the image to load.

The problem is, I don't know how many images there will be, or what the image will be so I can't really do the same thing as below.

Based on the description above, is this a. possible, b.the best way of preventing a stutter in the draw loop when an image is loaded from the web?

Thanks!

Here is the example:

int imgCount = 12;
PImage[] imgs = new PImage[imgCount];
float imgW;

// Keeps track of loaded images (true or false)
boolean[] loadStates = new boolean[imgCount]; // aray size = number of images.

// For loading animation
float loaderX, loaderY, theta;

void setup() {
  size(640, 360);
  imgW = width/imgCount;

  // Load images asynchronously
  for (int i = 0; i < imgCount; i++){
    imgs[i] = requestImage("PT_anim"+nf(i, 4)+".gif");
  }
}

void draw(){
  background(0);

  // Start loading animation
  runLoaderAni(); // draw placeholder when image is loading 

  for (int i = 0; i < imgs.length; i++){
    // Check if individual images are fully loaded
    if ((imgs[i].width != 0) && (imgs[i].width != -1)){
      // As images are loaded set true in boolean array
      loadStates[i] = true;
    }
  }
  // When all images are loaded draw them to the screen  //When image is loaded draw it on the screen
  if (checkLoadStates()){ //this recieves a boolean value from function
    drawImages();
  } 
}

void drawImages() {
  int y = (height - imgs[0].height) / 2;
  for (int i = 0; i < imgs.length; i++){
    image(imgs[i], width/imgs.length*i, y, imgs[i].height, imgs[i].height);
  }
}

// Loading animation
void runLoaderAni(){
  // Only run when images are loading
  if (!checkLoadStates()){
    ellipse(loaderX, loaderY, 10, 10);
    loaderX += 2;
    loaderY = height/2 + sin(theta) * (height/8);
    theta += PI/22;
    // Reposition ellipse if it goes off the screen
    if (loaderX > width + 5){
      loaderX = -5;
    }
  }
}

// Return true when all images are loaded - no false values left in array 
boolean checkLoadStates(){
  for (int i = 0; i < imgs.length; i++){
    if (loadStates[i] == false){
      return false;
    } 
  }
  return true;
}

GoToLoop

If you read about requestImage(), you'd know that checking out for PImage's width or height, whether they're greater than 0, is what determines a successfully loaded image: :-B
https://Processing.org/reference/requestImage_.html

rumlac

I have put this in the draw loop, it removes the stutter but is not displaying the image at all.

 newPhoto = requestImage(newPhotoURL, "png");

      if (newPhoto.width == 0) {

      } else if (newPhoto.width == -1) {

      } else {
        image(newPhoto, 100,100);
      }

GoToLoop

I just hope you're not calling requestImage() @ 60 FPS! :(|)

rumlac

30 fps, I can't have requestImage in the setup though because when the sketch starts, the image URLs are unknown. Would I need something that requests the image when the circle is first hovered over but doesn't keep requesting the image on every frame?

Chrisir

That would be a boolean flag like getNewImage

set to true when hover

set to false when image is beginning to load

don't set true when image name is not new

Are there chances that images occur twice ? Then please Store Images and load only new ones

Chrisir

boolean getNewImage=false;