Moving Images from an Array across the Screen

jnspcl

Hi there, I'm trying to create someting like a Newsticker with Images, which I loaded into an array. I want to move the Pictures in an endless chain from the Top to the Bottom of the Window. But I don't know how to load or show them after another and tell them to show up at bottom when they disappear at the top... hope you understand my problem ;)

Here is what I have so far:

PImage[] thumbs = new PImage[6]; float x; float y;

void setup() { for (int i = 0; i < thumbs.length; i++) { thumbs[i] = loadImage("thumb"+i+".jpg"); } }

void draw() { background(0); y = y-3; for (int i = 0; i < thumbs.length; i++) { image(thumbs[i], x, y); }

jeremydouglass

Use modulo:

https://processing.org/reference/modulo.html

Decide how far you want to wrap -- maybe just beyond the height of the screen in both directions? That way no matter how far your ticker scrolls (float y), each image will appear at it wrapped (modulo) pixel location.

jnspcl

Hm sorry, but I don't get what you mean...

Right now it works with one Image. I'm resetting the variable for y-coordinate to 0 if my Image reaches the Top of the Window. But now I want to do that with an array of Images, so that one after another is drawn in a line.

jeremydouglass

@jnspcl --

Given a strip of moving values, you want any values above the maximum length (images that scroll off the screen) to wrap back around to the minimum length. That is what Processing modulo is for -- it wraps things above the maximum back around to the minimum.

Here is an example based on your sketch that uses text to demonstrate. Notice that once you have a bunch of offsets, scrolling your list of objects up or down (or left or right) is just a matter of adding to 0 or subtracting from height (or width).

// ScrollingStripTest
// forum.processing.org/two/discussion/23134/moving-images-from-an-array-across-the-screen#latest
// 2016-06-19

String thumbs[] = new String[6]; 
float x; 
float y;
float thumbSpacing;
float thumbStripLength;
float thumbSpeed;

void setup() { 
  for (int i = 0; i < thumbs.length; i++) { 
    thumbs[i] = i + " ";
  }
  y=0;
  x=10;
  thumbSpacing = height/4;
  // only show 4 out of 6 full objects
  // on the screen at a any given time --
  // objects will disappear/reappear only while fully off-screen.
  thumbStripLength = thumbSpacing*thumbs.length;
  // how long the strip of all objects is.
  // 6 objects are 6/4ths of the screen
  thumbSpeed = 1;
}

void draw() { 
  background(0); 
  y = y + thumbSpeed;
  for (int i = 0; i < thumbs.length; i++) { 
    text( thumbs[i], x,        (y + i * thumbSpacing) % thumbStripLength ); // scroll down
    text( thumbs[i], x + 20, - (y + i * thumbSpacing) % thumbStripLength + height ); // scroll up
    // objects could be text, shapes, images, whatever.
    ellipse(x + 40, (y + i * thumbSpacing) % thumbStripLength, 10, 10);
    rect(x + 60,  - (y + i * thumbSpacing) % thumbStripLength + height, 10, 10);
  }
}

jeremydouglass

jnspcl

@jeremydouglass

Thank you, looks good. But when I try to adapt it to my case it doesn't work, maybe it's because I use a PImage Array?

PImage[] thumbs = new PImage[6];
float x; 
float y;
float thumbSpacing;
float thumbStripLength;
float thumbSpeed;

void setup() { 
  size(800,600);
  for (int i = 0; i < thumbs.length; i++) { 
   // thumbs[i] = i + " ";
   thumbs[i] = loadImage("thumb"+i+".jpg");
  }
  y=0;
  x=100;
  thumbSpacing = height/4;
  // only show 4 out of 6 full objects
  // on the screen at a any given time --
  // objects will disappear/reappear only while fully off-screen.
  thumbStripLength = thumbSpacing*thumbs.length;
  // how long the strip of all objects is.
  // 6 objects are 6/4ths of the screen
  thumbSpeed = 1;
}

void draw() { 
  background(0); 
  y = y + thumbSpeed;
  for (int i = 0; i < thumbs.length; i++) { 
    //text( thumbs[i], x,        (y + i * thumbSpacing) % thumbStripLength ); // scroll down
    //text( thumbs[i], x + 20, - (y + i * thumbSpacing) % thumbStripLength + height ); // scroll up
    //  image(thumbs[i], x +20 , (y + i * thumbSpacing) % thumbStripLength + height );
    // objects could be text, shapes, images, whatever.
    image(thumbs[i], x +20 , (y + i * thumbSpacing) % thumbStripLength + height );
    //ellipse(x + 40, (y + i * thumbSpacing) % thumbStripLength, 10, 10);
    //rect(x + 60,  - (y + i * thumbSpacing) % thumbStripLength + height, 10, 10);
  }
}

jeremydouglass

What do you mean "it doesn't work"?

It doesn't move? The images don't load? You don't see the right thing on the screen? You get an error message? If so, what is that message? etc. etc.

jeremydouglass

You didn't copy the line correctly from the example.

You wrote:

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

y = the y offset, plus some spacing per image, plus the full height of the screen. That will always be off the edge of the screen!

You wanted:

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

y = the full height of the screen MINUS (the y offset plus some spacing per image). That will be on the screen (or close, depending on the thumbStripLength).

jnspcl

@jeremydouglass

oh yeah, I think it was a little bit too late for me yesterday... the minus is a good point ;) THANK YOU very much for your help! ^:)^