PImage Arrays and auto scrolling photo strip

Processing Coding Questions
1

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.

Thanks!

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

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,

EnhancedLoop7

2 Likes
3

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
4

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

EnhancedLoop7