A little Art

• The goals for today
  • An ASCII Chessboard
  • A Grahpical Chessboard
• At the end of chapter 2, he asks you to draw an ascii chessboard.
  • nothing yet
  • I noticed that if I just loop over rows and columns the sum will be

    0+0  0+1 0+2 ...      0 1 2 3 4 5 6 7
    1+0  1+1 1+2 ...  =>  1 2 3 4 5 6 7 8
    ...
    7+0  7+1 7+2 ...      7 8 9 10 11 12
        

  • If we just make the even sums a _ and the odd sums a # we have a chessboard.

  • 'use strict'
    
    const SIZE = 8
    let row,col;
    let text="";
    
    for(row = 0; row < SIZE; row ++) {
       for (col = 0; col < SIZE; col ++) {
           if ((row+col)%2 == 0) {
              text += "_";
           } else {
              text += "#";
           }
       }
       text += "\n";
    }
    console.log(text);
    

  • However, we can write to a section of the html document.
    • I need a named section, a div will be nice.

    • <div id="outputSpace"> nothing yet</div>
      

    • This needs to be declared in the document BEFORE the script attempts to reference the id outputSpace
    • We can get a pointer to this division with

    • document.getElementById("outputSpace") 

    • Finally, we can change the text of this division with

    • document.getElementById("outputSpace").innerText = text;

    • 'use strict'
      
      const SIZE = 8
      let row,col;
      let text="";
      
      for(row = 0; row < SIZE; row ++) {
         for (col = 0; col < SIZE; col ++) {
             if ((row+col)%2 == 0) {
                text += "_";
             } else {
                text += "#";
             }
         }
         text += "\n";
      }
      text += "\n";
      document.getElementById("outputSpace").innerText = text;
      

    • We will be making extensive use of the html 5 canvas.
      • a reference
      • I declared one

      • <canvas id="chessboard" width="400", height="400",
                   style="border:1px solid #000000;">
        </canvas> 

      • Note: you need the </canvas> tag or you will be in trouble.
      • You need to gain access to it in your javascript code.

      • let canvas = document.getElementById("chessboard"); 

      • A drawing context is an environment.
        • reference
        • It provides an object that you can draw to.
      • We care about two contexts supported by the html 5 canvas.
        • 2d is a simple 2d drawing environment.
        • webgl is a context for webgl.
      • We will grab the drawing context, as well as the width and height of the canvas.

      • let ctx = canvas.getContext('2d');
        let width = canvas.width;
        let height = canvas.height;

    • I need to figure out how big to make my squares.
      • If the board is a square, I want size/8
      • What if it is not?
        • How about min(width, height)/2
      • Javascript has a math library
        • reference
        • This includes Math.min()

    • let boardSize = Math.min(width, height);
      let squareSize = boardSize/SIZE;
      

    • The 2d context supports many different commands.
      • We will look at these in more detail later but we need two now.
      • context.fillRect
        • reference
        • Takes x,y, widht height.
        • In our case, width and height are just squareSize.
        • But what are x and y.
        • Think About this.
        • 

        • ctx.fillRect(col*squareSize, row*squareSize,squareSize, squareSize);
          

      • The second thing we need is the fill color.
        • context.fillStyle
        • reference.
        • We will discuss values we can use later.
        • I will use "red", or "black".

        • if ((row+col)%2 == 0) {
             ctx.fillStyle = "red";
          } else {
             ctx.fillStyle = "black";
          } 

    • The final code

    • let canvas = document.getElementById("chessboard");
      let ctx = canvas.getContext('2d');
      let width = canvas.width;
      let height = canvas.height;
      
      let boardSize = Math.min(width, height);
      let squareSize = boardSize/SIZE;
      
      for(row = 0; row < SIZE; row ++) {
         for (col = 0; col < SIZE; col ++) {
             if ((row+col)%2 == 0) {
                ctx.fillStyle = "red";
             } else {
                ctx.fillStyle = "black";
             }
             ctx.fillRect(col*squareSize, row*squareSize,squareSize, squareSize);
         }
      }