I am implementing a feature in a Civilization-inspired pixel game in which the user can use arrow keys to shift the viewport. Pixel data is generated before rendering and is stored in an object arraylist.

My solution defines the top-left (viewTL[column,row]) and bottom-right (viewBR[column,row]) boundaries of the viewport, and all pixels within range will be rendered. Boundaries are adjustable through arrow keys (e.g. when right key pressed, top-left and bottom-right boundaries shift right one pixel).

However, shifting the viewpoint right will render in the right-most column of pixels from the original viewpoint, instead of rendering in the next column of pixels. These duplicated pixels can also be separated from the original viewport with consecutive keypresses in different directions (e.g. pressing right, then down while duplicated pixels have been rendered in will make the pixels stick to the edge of the screen while the original viewpoint moves down as normal).

I am still learning Processing, so I don't understand what is causing this. I've attached a stripped-down copy of the code below. Thank you in advance.

// Tile Size
int gs = 10;
// Noise Scale
float ns = 0.01;
ArrayList<Tile> tiles = new ArrayList<Tile>();
// Boundaries
int[] viewTL = {0,0};
int[] viewBR = {100,100};
class Tile {
  int col, row;
  TileType type;
  Tile(int col, int row, TileType type) {
    super();
    this.col = col;
    this.row = row;
    this.type = type;
  }
  void Render() {
    type.Render(this);
  }
}
// Renders Tile
class TileType {
  color fill = color(#ffffff);
  void Render(Tile tile) {
    int sf = width/(viewBR[0]-viewTL[0]);
    fill(fill);
    rect((tile.col-viewTL[0])*sf, (tile.row-viewTL[1])*sf, sf, sf);
  }
}
class DeepOcean extends TileType {
  DeepOcean() {
    this.fill = #016a86;
  }
}
class Snow extends TileType {
  Snow() {
    this.fill = #0f0f0f;
  }
}

// Iterates through array of all tiles to find those in range, then calls for each to be rendered
void render() {
  for (Tile t : tiles) {
    if (t.col >= viewTL[0] && t.col <= viewBR[0] && t.row >= viewTL[1] && t.row <= viewBR[1]) {
      t.Render();
    }
  }
}
void setup() {
  size(1000,1000);
  rectMode(CORNER);
  // Iterates through every square, determines biome from noise and adds info to tiles arraylist
  for (int y=0; y<height/gs; y  ) {
    for (int x=0; x<width/gs; x  ) {
      float biome = noise(x*ns, y*ns);
      if (biome < 0.5) {tiles.add(new Tile(x, y, new DeepOcean()));} 
      else {tiles.add(new Tile(x, y, new Snow()));}
    }
  }
  render();
}

void draw() {
  if (keyPressed == true) {
    if (keyCode == RIGHT) {
      // e.g. shifts the x component of the top left boundary by 1
      viewTL[0]  = 1;
      viewBR[0]  = 1;
      // after updates, render with new viewport
      render();
    } else if (keyCode == LEFT) {
      viewTL[0] -= 1;
      viewBR[0] -= 1;
      render();
    } else if (keyCode == UP) {
      viewTL[1] -= 1;
      viewBR[1] -= 1;
      render();
    } else if (keyCode == DOWN) {
      viewTL[1]  = 1;
      viewBR[1]  = 1;
      render();
    }
  }
}

CodePudding user response：