p5.js checkers/chessboard draw with nested loop

Question

I want to print a chess/checkers board and with the help of a tutorial came to this code. I understand everything that's happening apart from this line: rect(i * squareSize,j * squareSize,squareSize, squareSize);

The thing I do not get is why you multiply i by the variable squareSize.

My first intuition was to the rects inside the if/else statements below the fill functions and not below the else.

Can anyone explain to me what I am missing and why my method does not work and multiplying by squareSize is necessary?

I have added my working code as a snippet below.

 const WIDTH = 400;
    const HEIGHT = 400;
    const ROWS = 10;
    const COLS = 10;
    var squareSize = WIDTH/10;
    
    function setup() { 
      createCanvas(400, 400);
    } 
    
    function draw() { 
      background(220);
      drawBoard();
    }
    
    function drawBoard(){
      for(var i = 0; i < ROWS; i++)
        {
          for(var j = 0; j < COLS; j++)
            {
              if((i+j) % 2 == 0)
              {
              fill(0);
              } 
              else 
                {
                  fill(255);
                }
              rect(i * squareSize,j * squareSize,squareSize, squareSize);
            }
        }
      noLoop();
    }

html, body {
  margin: 0;
  padding: 0;
}

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

score 0 · Accepted Answer · answered Aug 13 '18 at 17:09

why my method does not work

I'm a bit confused: your code seems to work fine. What's not working about it?

The thing I do not get is why you multiply i by the variable squareSize.

One of the best things you can do when you have a question like this is to get out some graph paper and draw out a few examples.

Let's say you have a paper that's 1000x1000, and you want to draw a 10x20 (10 columns x 20 rows) grid on it.

How wide is each square? Each square is 100 wide, since 1000/10 = 100.
What is the x value of column 0, column 1, column 2, etc?
- The x value of column 0 is 0, since it's the left-most edge.
- The x value of column 1 is 100, since it's one column (which are 100 wide) away from the left-most edge.
- The x value of column 2 is 200, since it's two columns away from the left-most edge.
How tall is each square? Each square is 50 wide, since 1000/20 = 50.
What is the y value of row 0, row 1, row 2, etc?
- The y value of row 0 is 0, since it's the top-most edge.
- The y value of row 1 is 50, since it's one row (which are 50 wide) away from the top-most edge.
- The y value of row 2 is 100, since it's two rows away from the top-most edge.

Notice that for the x and y values of each column and row, we're multiplying the column or row index (your i and j variables) by the size of the columns and rows (your squareSize variable).

If this still isn't clear, try drawing out a few examples.

I understand the confusion, what I meant by my method was creating the rectangles inside the if and the else. Something like:
if((i+j) % 2 == 0) { fill(0); rect(arg,arg,arg,arg); } else { fill(255); rect(arg,arg,arg,arg); } After your explanation I feel quite stupid because it is so obvious, but I guess I just had a blockade :) Thanks for your response. — user10218185, Aug 13 '18 at 20:59

p5.js checkers/chessboard draw with nested loop

1 Answers1