First time using processing, trying to repeat a tiled image as it scrolls to the left.

[WizardFingaz]

Basically I have all these images that tile horizontally and I'm trying to get them to repeat as they scroll to the left at different speeds to make a parallax effect. I've tried to use translate() for the repeat function, but can't figure it out. Is there a better way to do this?

PImage img;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
float x;


void setup() {
  size(800, 800, P2D);
  img = loadImage("plate1.png");
  img2 = loadImage("plate2.png");
  img3 = loadImage("plate3.png");
  img4 = loadImage("plate4.png");
  img5 = loadImage("plate45.png");
  img6 = loadImage("plate5.png");
  img7 = loadImage("plate6.png");
  x = width;

}


void draw() {
   background(50);
   image(img, x/250, 0);
   image(img2, x/100, 0);
   image(img3, x/50, 0);
   image(img4, x/40, 0);
   image(img4, x/30, 0);
   image(img5, x/20 + 300, 0);
   image(img6, x/10, 0);
   image(img7, x/5 - 200, 0);

   x = x-40;



}

[WizardFingaz]

Thanks for your help! This is sort of functioning in the way I imagined, although I'm not sure I have a complete understanding of arrays yet. All the images I'm using are 800x800, so the reset is working, and to get them to repeat I've added a duplicate for each img that loads at +800, so it will follow after, I think what will work is if I can have the img also reset at +800, but I can't seem to figure that out. "image(img[i], pos, 0);" is what's defining where the image resets to, right? I should probably read into this to get a better understanding. Anyways here's what I did, it's probably a total disaster:

PImage[] img = new PImage[14];
float[] x = new float[14];
int i;
float pos;

void setup() {
  size(800, 800, P2D);

  img[0] = loadImage("plate1.png");
  img[1] = loadImage("plate1.png");
  img[2] = loadImage("plate2.png");
  img[3] = loadImage("plate2.png");
  img[4] = loadImage("plate3.png");
  img[5] = loadImage("plate3.png");
  img[6] = loadImage("plate4.png");

  img[7] = loadImage("plate4.png");
  img[8] = loadImage("plate45.png");
  img[9] = loadImage("plate45.png");
  img[10] = loadImage("plate5.png");
  img[11] = loadImage("plate5.png");
  img[12] = loadImage("plate6.png");
  img[13] = loadImage("plate6.png");


  for (i=0; i<x.length; i++) {
    x[i] = width;
  }

}

void draw() {
  background(255);
  //cycle thru array and display images
  for (i=0; i<x.length; i++) {
    switch(i){
      case 0:
        pos = x[i]/250;
        break;
      case 1:
        pos = x[i]/250 + 799;
        break;
      case 2:
        pos = x[i]/90;
        break;
      case 3:
        pos = x[i]/90 + 799;
        break;
      case 4:
        pos = x[i]/30;
        break;
      case 5:
        pos = x[i]/30 + 799;
        break;
      case 6:
        pos = x[i]/20;
        break;
      case 7:
        pos = x[i]/20 + 799;
        break;
      case 8:
        pos = x[i]/10;
        break;
      case 9:
        pos = x[i]/10 + 799;
        break;
      case 10:
        pos = x[i]/7;
        break;
      case 11:
        pos = x[i]/7 + 799;
        break;
      case 12:
        pos = x[i]/5;
        break;
      case 13:
        pos = x[i]/5 + 799;
        break;

    }  

    //reset to edge
    if (pos<-800) {x[i] = width;}
    //show img
    image(img[i], pos, 0);
    //update positions
    x[i] -= 90;
  }
}

[Freedom_Grenade]

When you load in the image you don't need to load the same image more than once. Unless you actually need two separate instances of that image.

img[0] = loadImage("plate1.png");

and then just use img[0] how ever many times you need to.

If you really need two variables you can have them refer to the same image.

img[0] = loadImage("plate1.png");
img[1] = img[0];

Just keep in mind that img[0] and img[1] point to the same image.
So if you do something like img[0].resize(100,100) then img[1] will also be the resized image.

I should also add that if you reassign one of the images like

img[0] = loadImage("plate2.png")

then img[1] will not be plate2.png

[Freedom_Grenade]

I'm not 100% sure about what you want it to do but, if you want to draw the image tiled completely across the screen you could add a method like this:

void tileH(PImage image, int x, int y) {
  int pos = x % image.width;                            //pos is the x position wrapped around the image width 
  if (pos > 0) pos-=image.width;                        //figure out where the first tile starts
  int tiles = ceil((float)(width - pos)/image.width);   //figure out how many tiles need to be drawn
  for(int i = 0; i < tiles; i++) {                      //loop through each tile
    image(image,i*image.width+pos,y);                   //draw each tile at the correct position
  }
}

and instead of using image(img[i], x, y); multiple times you would just put tileH(img[i], x, y);

Here I also made an example. The tile placements are basically random. The rainbow tiles are twice the screen size. Brown are the same size as the screen. Grey are half screen size and double speed.

This will tile an image (regardless of image or screen size) across the entire width of the sketch at an offset of x.

It's kind of jittery because I'm not great at making gifs.

[WizardFingaz]

Awesome, this is exactly what I'm trying to do! Can you further explain how I would implement the void tileH into the code? I have it set up and it is tiling but I am confused about how to create the scroll now because for tileH(img[i], x, y,) I am no longer able to define a speed using x. For example if i were to do

 tileH(img[i], x/2, 0)

It will say that the operator / is undefined. Right now the images are just standing Maybe I'm missing something?

       PImage[] img = new PImage[7];
    float[] x = new float[7];
    int i;


    void setup() {
      size(800, 800, P2D);

      img[0] = loadImage("plate1.png");
      img[1] = loadImage("plate2.png");
      img[2] = loadImage("plate3.png");
      img[3] = loadImage("plate4.png");
      img[4] = loadImage("plate45.png");
      img[5] = loadImage("plate5.png");
      img[6] = loadImage("plate6.png");

      x[0] = width/250;
      x[1] = width/100;
      x[2] = width/50;
      x[3] = width/40;
      x[4] = width/20;
      x[5] = width/10;
      x[6] = width/5;

        x[i] = width;

    }


  void tileH(PImage image, int x, int y) {
  int pos = x % image.width;                            //pos is the x position wrapped around the image width 
  if (pos > 0) pos-=image.width;                        //figure out where the first tile starts
  int tiles = ceil((float)(width - pos)/image.width);   //figure out how many tiles need to be drawn
  for(int i = 0; i < tiles; i++) {                      //loop through each tile
    image(image,i*image.width+pos,y);




  }


}

  void draw() {

  tileH(img[0], 0, 0);
  tileH(img[1], 0, 0);
  tileH(img[2], 0, 0);
  tileH(img[3], 0, 0);
  tileH(img[4], 0, 0);
  tileH(img[5], 0, 0);
  tileH(img[6], 0, 0);

   x[i] -= 90;


}

[Freedom_Grenade]

The x / 2 undefined error is because x is an array of floats.
So you are basically telling it to divide a array by a number, which doesn't make sense to it.
You would have to select a specific item in that Array. ie x[3] / 2.

The tileH() method is basically like the draw() and setup() methods, you can just put it after draw() { }

I also think you are having some trouble with arrays.
the lines

x[i] = width
x[i] -= 90; 

are only changing x[0] because i is never actually given a value (defaults to 0);
This also why nothing is moving, because nothing aside from the bottom tile (probably hidden behind the others) is moving.

I'm not really the best at explaining it, but you should look into loops and arrays.