Infinite scrolling?!

[josephh]

Hi @doordewar,

Thank you for posting this thread because it was a great challenge!

Here is my take on this:

The first thing was to get 100 images from an API somewhere and here is a useful one: https://picsum.photos/

Using this bash script to do download them automatically:

# download.sh

set -B

for i in {1..100}; do
  let id=i*2
  wget -O $i.png https://picsum.photos/id/$id/200
done

$ bash download.sh

Then this is a schema of the different variables and the layout:

The idea is to display the images linearly and have an infinite scroll. The first step was to have a working scroll effect with the mouse which I did with simple velocity/acceleration stuff.

Next was to display the current scroll position with a scroll bar, for this the map() function is quite useful.

Last step was to load/unload images as soon as you scroll too far. This was the most tricky part but I figured out the way to do this with a LinkedList to easily add or remove images.

So the images are loaded and removed as chunks (of 5 for example) as soon as you go too far so you only have a fixed amount of loaded images at every time.

This is the final code:

// Joseph HENRY
// https://discourse.processing.org/t/infinite-scrolling/34028

import java.util.LinkedList;

// Images are stored in a LinkedList for FIFO insert and removal
LinkedList<PImage> images;

int totalImages = 100;

// The amount of images loaded in memory
int imagesBufferSize = 10;

// Individual image height
int imageHeight = 200;

// The total height of images
int totalHeight = totalImages * imageHeight;

// Image offset of scroll
int imagesOffset = 0;

// Chunk size of images loaded/unloaded when scrolling
int imagesChunkLoadingSize = 5;

// The scroll position in pixels
int scrollPosition = 0;

// Scroll velocity added to the position
float scrollVelocity = 0;

// Scroll acceleration added to the velocity
float scrollAcceleration = 0;

int scrollBarWidth = 10;

/**
 * Taken from: https://easings.net/#easeOutCubic
 */
float easeOutCubic(float x) {
  return 1 - pow(1 - x, 3);
}

/**
 * Loads an image at the specified index
 */
PImage loadImageAtIndex(int i) {
  return loadImage(str(i) + ".png");
}

void setup() {
  size(200, 500);

  images = new LinkedList<PImage>();
  
  // First load a chunk of images
  for (int i = 1; i <= imagesBufferSize; i++) {
    images.add(loadImageAtIndex(i));
  }
}

void displayScrollBar() {
  // Scrollbar backdrop
  noStroke();
  fill(0, 200);
  int scrollBarX = width - scrollBarWidth;
  rect(scrollBarX, 0, scrollBarWidth, height);

  // Loaded area bar
  float loadedAreaY = map(imagesOffset * imageHeight, 0, totalHeight, 0, height);
  float loadedAreaHeight = map(images.size(), 0, totalImages, 0, height);
  fill(#9664A0);
  rect(scrollBarX, loadedAreaY, scrollBarWidth, loadedAreaHeight, 10);

  // Scroll handle bar
  int visibleSize = height;
  float scrollHandleHeight = (float) visibleSize / totalHeight * height;
  float scrollHandlePosition = map(scrollPosition, 0, totalHeight - height, 0, height - scrollHandleHeight);
  fill(#7982DE);
  rect(scrollBarX, scrollHandlePosition, scrollBarWidth, scrollHandleHeight, 10);
}

void handleImageLoading() {
  // Compute the limits of the loaded images
  int firstImageYPosition = imagesOffset * imageHeight;
  int lastImageYPosition = firstImageYPosition + images.size() * imageHeight;
  
  // Determine if we are close to the limits
  boolean closeToFirstImage = scrollPosition < firstImageYPosition + imageHeight / 2.0;
  boolean closeToLastImage = scrollPosition > lastImageYPosition - height - imageHeight / 2.0;

  if (closeToFirstImage || closeToLastImage) {
    int offsetAdd = 0;

    for (int i = 0; i < imagesChunkLoadingSize; i++) {
      int nextImageIndex = closeToFirstImage ? imagesOffset - i : images.size() + imagesOffset + 1 + i;
      
      // If the image can be loaded (we are not at the boundaries)
      if (nextImageIndex >= 1 && nextImageIndex <= totalImages) {
        PImage img = loadImageAtIndex(nextImageIndex);
        
        // Append at the end or the beginning depending on the direction
        if (closeToFirstImage) {
          images.addFirst(img);
          images.removeLast();
        } else {
          images.addLast(img);
          images.removeFirst();
        }

        offsetAdd += (closeToFirstImage ? -1 : 1);
      }
    }
    
    // Update the image offset
    imagesOffset += offsetAdd;
  }
}

void updateScrollPhysics() {
  // Introduce drag in acceleration and velocity
  scrollAcceleration *= 0.9;
  scrollVelocity += scrollAcceleration;
  
  scrollVelocity *= 0.95;
  scrollPosition += scrollVelocity;
  
  // Limit the scroll min and max value
  scrollPosition = constrain(scrollPosition, 0, totalHeight - height);
}

void displayImages() {
  for (int i = 0; i < images.size(); i++) {
    PImage img = images.get(i);
    image(img, 0, (i + imagesOffset) * imageHeight - scrollPosition);
  }
}

void draw() {
  background(255);

  displayImages();
  displayScrollBar();

  handleImageLoading();

  fill(255, 0, 0);
  textSize(15);
  text("Loaded " + images.size() + " images", 10, 30);

  updateScrollPhysics();
}

void mouseDragged() {
  // When dragged use the cursor movements
  scrollPosition -= mouseY - pmouseY;
}

void mouseReleased() {
  // Compute the cursor y diff
  int diffY = -(mouseY - pmouseY);
  
  // Cancel velocity when going in the other direction
  if (!(scrollAcceleration < 0 && diffY < 0) || !(scrollAcceleration > 0 && diffY > 0)) {
    scrollVelocity = 0;
  }
  
  // Add movement to the scroll
  scrollVelocity = diffY / 10.0;
  scrollAcceleration = diffY / 5.0;
}

Have fun!