Moved PImage from one side to the screen to another in loop

Hi guys,

i want to move an image across the screen from right to the left. However, one complication is that when part of the image moves beyond the left side of the screen, i want it to show up on the right side of the screen. The final result should be a image moving in a continuous loop across the screen.

Currently what i am doing is check if the image’s x coordinate is smaller than 0, and then manually setting it back to the width of the screen so that it pops back to the right side of the screen. However, this looks quite weird as the image just disappears on the left and pops up on the right.

Any help would be greatly appreciated, thanks in advance.

must be smaller than 0-img.width()-1 or so, then the image is entirely disapeared before reappearing.

(because image(…) uses the upper left corner of the image normally for x,y)


reappearing: set x to width + 2

(you can give the image position x,y negative values (<0) or very high values (>width) without a problem)

hi, thanks for your reply. This is indeed how I’ve done things right now. but i want to try to achieve the effect of having half of the image on the left and half on the right. Would that be efficient and possible?

I see

Sure possible

You need the 2nd image (on the right) as soon as x< 0 &&x > 0-img.width

Use if(…) image () for the 2nd image

Code Example

(not tested)

image(.... ,x,y) ; // normal image that you have now
if(x< 0 && x > 0 - img.width ) { // image starts leaving screen on the left
     float x1; 
     x1 = width - abs(0-x); // show image additionally on the right
     image(.... ,x1,y) ; // for the 2nd image


thank you sir, let me try this

1 Like