How do I make these objects loop?

AlfieChillar

Hi, I am currently working on a simple sketch of a piano keyboard moving infinitely across the screen. I've plotted the keys, and using xPos I've made them all move across screen together. I've put a line saying that if xPos is less than -70 (off screen) it should then become 1860 (just off screen on the right but ready to move back on screen), but when I do this it moves all of the objects off screen to the right.

I sort of understand what I'm doing wrong, but I don't know how to fix it. What should I do?

Here is my code:

int xPos=0;

void setup(){
  size(1800, 900);
  background(194, 237, 222);
}

void draw(){
  background(194, 237, 222);

  xPos=xPos-1;

  noStroke();
  fill(255, 100);

  rect (xPos-40, 10, 50, 200);
  rect (xPos+20, 10, 50, 200);
  rect (xPos+80, 10, 50, 200);
  rect (xPos+140, 10, 50, 200);
  rect (xPos+200, 10, 50, 200);
  rect (xPos+260, 10, 50, 200);
  rect (xPos+320, 10, 50, 200);
  rect (xPos+380, 10, 50, 200);
  rect (xPos+440, 10, 50, 200);
  rect (xPos+500, 10, 50, 200);
  rect (xPos+560, 10, 50, 200);
  rect (xPos+620, 10, 50, 200);
  rect (xPos+680, 10, 50, 200);
  rect (xPos+740, 10, 50, 200);
  rect (xPos+800, 10, 50, 200);
  rect (xPos+860, 10, 50, 200);
  rect (xPos+920, 10, 50, 200);
  rect (xPos+980, 10, 50, 200);
  rect (xPos+1040, 10, 50, 200);
  rect (xPos+1100, 10, 50, 200);
  rect (xPos+1160, 10, 50, 200);
  rect (xPos+1220, 10, 50, 200);
  rect (xPos+1280, 10, 50, 200);
  rect (xPos+1340, 10, 50, 200);
  rect (xPos+1400, 10, 50, 200);
  rect (xPos+1460, 10, 50, 200);
  rect (xPos+1520, 10, 50, 200);
  rect (xPos+1580, 10, 50, 200);
  rect (xPos+1640, 10, 50, 200);
  rect (xPos+1700, 10, 50, 200);
  rect (xPos+1760, 10, 50, 200);
  rect (xPos+1820, 10, 50, 200);


  fill(0);
  rect (xPos+64,10,30,120);
  rect (xPos+124,10,30,120);
  rect (xPos+244,10,30,120);
  rect (xPos+304,10,30,120);
  rect (xPos+364,10,30,120);
  rect (xPos+364,10,30,120);
  rect (xPos+484,10,30,120);
  rect (xPos+544,10,30,120);
  rect (xPos+664,10,30,120);
  rect (xPos+724,10,30,120);
  rect (xPos+784,10,30,120);
  rect (xPos+904,10,30,120);
  rect (xPos+964,10,30,120);
  rect (xPos+1024,10,30,120);
  rect (xPos+1144,10,30,120);
  rect (xPos+1204,10,30,120);
  rect (xPos+1324,10,30,120);
  rect (xPos+1384,10,30,120);
  rect (xPos+1444,10,30,120);
  rect (xPos+1564,10,30,120);
  rect (xPos+1624,10,30,120);

  if (xPos < -60) xPos = 1860;

}

Chrisir

unfortunately this sounds more easy than it is

Chrisir

It could be that it would make you happy not to check the left border of the screen against the first but against the last key

make your if against the last key of the keyboard

thus it looks more natural and it jumps over only when the entire keyboard has almost dissapeared on the left

maybe that it what you are aiming at

it turned out to be a lot easier than I first thought ;-)

Chrisir ;-)

AlfieChillar

I see what you mean, but what I want is for it to be a continual flow of keys. The idea being that as each key leaves screen it loops around, meaning it is essentially an infinite keyboard.

Chrisir

yes, I afraid you say that.

you need to learn more techniques then

Chrisir

I think you need an array of tto store all the positions there.

then you can tell each key separately when to jump from the left to the right side

see reference

Chrisir

when you use arrays, the simple idea is to use a for-loop over them

you can have one array for the white and one for the black keys

TfGuy44

ARGH! CUSS WORDS! I GIVE UP!

int startX = 10;

void setup(){
  size(1000,300);
  noStroke();
}

void draw(){
  background(0,120,0);

  startX--;
  if(startX < -480){
    startX+=480;
  }
  fill(255);
  for( int i=startX; i<2*width; i+=60){
    rect(i, 10, 50, 200);
  }
  int j = 0;
  fill(0);
  for( int i = startX; i<2*width; i+=60){
    j++;
    j %= 7;
    if(j!=2 && j != 5){
      rect (i-20,10,30,120);
    }
  }
}

AlfieChillar

Wow! Perfect! I don't suppose you could link me a page or somethine with the basic concepts of what you did just so I could learn? But wow! That's exactly what I was looking for! Thank you!

TfGuy44

NO! It's not perfect! That's not what you want at all! kicks the air Watch it for a while and you'll see why. breaks things The black keys jump! rage quit

Chrisir

• make one array with all black keys xpos

• make one array with all white keys xpos

in setup() use a for loop: fill both with data like i*60+4

in draw() use a for loop: display all keys

in draw() use a for loop: move all keys using -1 and check them for being < 0

;-)

koogs

hopefully this is clear.

i've left the key drawing as is. but it should be a loop. or two.

    // scrolling keyboard
    // acd 2015 

    public static final int WIDTH_OF_KEYS = 420;
    int xPos=0;

    void setup(){
      size(1800, 900);
      background(194, 237, 222);
      noStroke();
    }

    void draw(){
      background(194, 237, 222);

      xPos = xPos - 1;

      // draw enough sets of keys to fill the screen and a couple more
      // as the first and last will be partial  
      for (int i = 0 ; i < 2 + (width / WIDTH_OF_KEYS) ; i++) {
        drawKeys(xPos + (i * WIDTH_OF_KEYS));
      }

      // if the first set is entirely off the screen
      // reset to left edge
      if (xPos <= -WIDTH_OF_KEYS) {
        xPos = 0;
      }
    }

    // draws one set of keys 
    void drawKeys(int x) {
      // white keys (make this a loop)
      fill(255, 100);
      rect (x, 10, 50, 200);
      rect (x + 60, 10, 50, 200);
      rect (x + 120, 10, 50, 200);
      rect (x + 180, 10, 50, 200);
      rect (x + 240, 10, 50, 200);
      rect (x + 300, 10, 50, 200);
      rect (x + 360, 10, 50, 200);

      // black keys (make this a loop)
      fill(0);
      rect (x + 44, 10, 30, 120);
      rect (x + 104, 10, 30, 120);
      rect (x + 224, 10, 30, 120);
      rect (x + 284, 10, 30, 120);
      rect (x + 344, 10, 30, 120);
    }