Infinite scrolling images

[oli7er]

Hi everyone,

I have been attempting a sketch, which scrolls through images, each image has an 2 more images placed both on top and below it ( visually similar to how an instagram post will have the username/profile photo above and a like/comment/save below).

I have got as far as creating a sketch which does this for one image at a time, once the image is out of frame the following image will be displayed, I would like the images to instead roll continuously without the background showing in between each time the image is displayed.

On one of the forums I found a guide achieving something similar to what I am attempting, the only issue is my images have a fixed width but varying heights between them, something this code requires to be fixed:

Infinite scrolling?!

@josephh @ASHER Thanks to both of you, actually amazing! Incredibly useful and already learning many tricks from it (like the linked list). I think this thread will be very resourceful for more people Currently knees deep on creating an interaction metaphor for exchanging privacy/novel information, all part of a challenge to make people feel at home in digital spaces (@home?). If I find time, I am going to try to add an HTML reader, so I can blend in things like websites and articles. M…

Does anyone have an what a better approach might be?

    String l=dataPath("/Users/ollie/Desktop/img");
    PImage[] img = new PImage[50];
    PImage top, bot;
    float m;
    float tH, bH, iH, fH;
    int j = 0;
    
    void setup() {
      size(500, 500);
      imageMode(CORNER);
      top = loadImage("dftFriendTop.png");
      bot = loadImage("dftFriendBot.png");
    }
    
    void imgLoad() {
      img[j] = loadImage(l+"//"+"imgr"+j+".jpg");
      tH = top.height;
      bH = bot.height;
    }
    
    void draw() {
      imgLoad();
      background(255);
      iH = img[j].height;
      
      image(top, 0, m - iH - tH);
      image(img[j], 0, m - iH);
      image(bot, 0, m - bH);
    
      m = m - 5;
      fH = tH + iH + bH;
    
      if (m < 0) {
        m = (fH + height);
        j = j + 1;
      }
      if (j >= 50) {
        j = 0;
      }
    }

[glv]

Hello,

@oli7er

Does anyone have an what a better approach might be?

This is just one of many ways to do this:

// Infinite Scrolling
// v1.0.0
// GLV 2022-05-21

color [] colors = {color(255, 0, 0), color(0, 255, 0), color(0, 0, 255)};

//Initialize colors
color c0 = colors[2];
color c1 = colors[1]; 
color c2 = colors[0];

int x, y;

void setup() 
  {
  size(400, 200);
  println(y%3, (y+1)%3, (y+2)%3);
  }

void draw() 
  {
  background(0);

  x+=1;
  
  if (x >= 200)
    {
    y++;
    x=0;
    println(y%3, (y+1)%3, (y+2)%3);
    
    c2 = colors[y%3]; 
    c1 = colors[(y+1)%3];
    c0 = colors[(y+2)%3];
    }
 
  //0
  fill(c0);
  rect(-200+x, 0, 200, 200);
  
  //1
  fill(c1);
  rect(0+x, 0, 200, 200);
  
  //2
  fill(c2);
  rect(200+x, 0, 200, 200);
  }

I was able to modify above to work with an array of many images.

The above was just the first thing that came to mind and a first pass at this.

:)