Chess board overfilling height

Processing Coding Questions
1

Hi

I’ve just started using processing. I’ll put the code below, but first the problem.

I have to setup a 14x14 chessboard in a 672x672 board (plus a 120 pixel-wide sidebar, where each tile is 48 pixels square. I set up a 2D array, and create a Tile object, which knows its array reference (eg 0,1 for 2nd tile in 1st array) which I refer to as board_x and board_y. The pixel_x is equal to board_x x 48, and pixel_y is board_y x 48. Each Tile has a draw method. From the main app, I iterate over the array containing the tiles, to call the draw method and print the board. The board is the right width, but the bottom row is only partially visible in the canvas, as you can see in the attached image.

ksnip_20230412-173915
ksnip_20230412-173915946×802 285 KB

Code fragments below:

// dimensions variables
    public static final int CELLSIZE = 48;
    public static final int SIDEBAR = 120;
    public static int HEIGHT = 14 * CELLSIZE; // = 672
    public static int WIDTH = HEIGHT + SIDEBAR; // = 792

// settings
size(WIDTH,HEIGHT)

// in setup() instantiate the board of tiles (one per Board array cell)
        for (int x = 0; x < BOARD_WIDTH; x++) {
            for (int y = 0; y < BOARD_WIDTH; y++) {
                this.B[x][y] = new Tile(x, y, this);
            }
        }

// in the draw() method of the main app
        for (int x = 0; x < BOARD_WIDTH; x++) {
            for (int y = 0; y < BOARD_WIDTH; y++) {
                this.B[x][y].draw();
            }
        }

// Tile class
public class Tile {
    App app; // access to the canvas

    int boardX, boardY, pixelX, pixelY, cellSize;
    String base_colour; // dark or light for tile

    public Tile(int x, int y, App app) {
        this.app = app;
        this.cellSize = app.CELLSIZE;
        this.boardX = x;
        this.boardY = y;
        this.pixelX = this.boardX * this.cellSize;
        this.pixelY = this.boardY * this.cellSize;
        // set base colour
        if ((this.boardX + this.boardY) % 2 == 0) {
            this.base_colour = "light";
        } else {
            this.base_colour = "dark";
        }
    }

    public void tick() {

    }

    public void draw() {
        this.app.setFillColour(this.base_colour);
        System.out.println("Draw tile (" + this.boardX + "," +
                this.boardY + "); pixel ref = ("
                + this.pixelX + "-" + (this.pixelX + this.cellSize) + ","
                + this.pixelY + "-" + (this.pixelY + this.cellSize) + ")");
        this.app.rect(this.pixelX, this.pixelY, this.cellSize, this.cellSize);
    }
}
2

What values do you have in size() ?

Why not just increase the app height?

3

I edited the code. size(WIDTH,HEIGHT) equates to size(792,672)

Have to keep the app height as defined (it’s an assignment).

4

This code worked for me (see image) using Processing 4.2 on Mac osx see if it works for you?

public static final int CELLSIZE = 64;
public static final int SIDEBAR = 120;
public static int HEIGHT = 14 * CELLSIZE; // = 672
public static int WIDTH = HEIGHT + SIDEBAR; // = 792

void settings () {
  size(WIDTH, HEIGHT);
}

void setup() {
 background(200);
  int cell = 0;
  noStroke();
  for (int row = 0; row < 14; row++) {
    for (int col = 0; col < 14; col++) {
      int c = (cell & 1) == 0 ? color(255) : color(0);
      fill(c);
      rect(col * CELLSIZE, row * CELLSIZE, CELLSIZE, CELLSIZE);
      cell++;
    }
    cell++;
  }
  saveFrame("temp.png");
}

temp
temp1016×896 2.74 KB

5

Hi thanks that was very helpful. Unfortunately we have to use Java 8, which means I think we’re stuck with processing 3.3.7???

I ran your code under that version and have the same problem.

6

Can you please show your entire runable code

7

Full Sketch

public static final int CELLSIZE = 48;

void setup() {
  // 672+200 x 672 (SIDEBAR = 120)
  size( 872, 692);

  background(200);

  int cell = 0;
  noStroke();
  for (int row = 0; row < 14; row++) {
    for (int col = 0; col < 14; col++) {
      int c = (cell & 1) == 0 ? color(255) : color(0);
      fill(c);
      rect(col * CELLSIZE, row * CELLSIZE,
        CELLSIZE, CELLSIZE);
      cell++;
    }
    cell++;
  }
  saveFrame("temp.png");
}
8

I have tried my code using the last three stable (official) releases of Processing that is

P2 2.2.1 (had to move call to size() method to start of setup)
P3 3.5.1
P4 4.2.0
and in all cases my code worked as required. You should not be using any other version

Each version of Java extends the language giving it new features. So all you have to do is limit your source code to Java 8 language syntax. If your sketch ends up using any Java 9+ features then I will be totally amazed, shocked and stunned.

2 Likes
9

I’m so sorry for the runaround: it turned out to be a red herring related to how my system draws the window. I added your saveFrame("temp.png"); at the end of my draw and then opened the image after running it. It displays exactly as I expected it to. So I’ll now look into why KDE under Ubuntu 22.10 is showing a window that doesn’t display the full internal dimensions.

Thanks very much for your help on this @quark. Your code ended up giving me the clue to get to the bottom of the problem.

1 Like