PImage Arrays and auto scrolling photo strip

Hi everyone!

New member to the forum here (and processing). So thank you in advance to whoever might be able to help out.

I’m working towards a bigger coding project for developing a photo projection installation, and as this is the first major project I have worked on coding in Java I am having trouble getting my head even around the basics.

Basically what I am trying to achieve is a simple photo strip that goes across a projection screen entering from the right and exiting the left (1920x1080 resolution). Pending final image size there may be 4-5 images seen on screen at once. But with a possibility of going up to 100 or more images to go through. This is why I figured an array would be best suited for this task.

In any case, the code below is pretty much based entirely off something I’ve found online [https://forum.processing.org/two/discussion/23134/moving-images-from-an-array-across-the-screen], and its creating the effect I’m after. The only issue is that I am unable to turn the direction from vertical to horizontal. And when I change the length or height (which is what I thought would be the controlling variable for this. It says ‘the global variable is not set’.

Can anyone understand how the direction can be changed? or if there’s entirely a better method to approach this issue.


PImage[] thumbs = new PImage[6];
float x; 
float y;
float thumbSpacing;
float thumbStripLength;
float thumbSpeed;
void setup() { 
  for (int i = 0; i < thumbs.length; i++) { 
   thumbs[i] = loadImage("thumb"+i+".jpg");
  thumbSpacing = height/2;
  thumbStripLength = thumbSpacing*thumbs.length;
  thumbSpeed = 0.5;
void draw() { 
  x = x + thumbSpeed;
  for (int i = 0; i < thumbs.length; i++) { 
image(thumbs[i], y +20 , - (x + i * thumbSpacing) % thumbStripLength + height );

So the only place I see actual movement? Would be in the line that says:

x = x + thumbSpeed;

Considering I have none of the pictures in your code example, forgive me for not running your sketch and actually trying out a solution? But I would say, maybe you can try:

y = y + thumbSpeed; ?

If not, then next I would try switching the x and y arguments inside of the image:

So I’d have:

image(thumbs[i], - (x + i * thumbSpacing) % thumbStripLength + height, y +20 );

Instead of what is there currently. Because I do see that you want the x-value to change, but in your current sketch, the y-value is what is changing because it has the x variable there, and hence is the part moving (if that makes sense :smiley: )

Hopefully that works,



It worked, I understand how that works now too! Thanks so much for your help. I’m going to keep working on this.

1 Like

@ChrisTMChen I am glad to hear that! I wish you the best on your project :smiley: