# Infinite scrolling images
**URL:** https://discourse.processing.org/t/infinite-scrolling-images/36967
**Category:** Coding Questions
**Created:** [May 19, 2022, 3:39pm UTC](https://discourse.processing.org/t/infinite-scrolling-images/36967 "2022-05-19T15:39:09Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@oli7er](https://discourse.processing.org/u/oli7er)
#### Post date: [May 19, 2022, 3:39pm UTC](https://discourse.processing.org/t/infinite-scrolling-images/36967/1 "2022-05-19T15:39:10Z")
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?!](https://discourse.processing.org/t/infinite-scrolling/34028/4):
>
> @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 sunny 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?
```auto
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;
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 22, 2022, 1:10am UTC](https://discourse.processing.org/t/infinite-scrolling-images/36967/2 "2022-05-22T01:10:39Z")
Hello,
> [@oli7er](#):
>
> Does anyone have an what a better approach might be?
This is just one of many ways to do this:
```auto
// 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.
`:)`