Ortho & Diag - OpenProcessing

mySketch
xxxxxxxxxx
 
let sqSize = 32;
let nRows = 8;
let nCols = 8;
​
function setup() {
  createCanvas(sqSize * nCols, sqSize * nRows);
}
​
function draw() {
  background(220);
  fill(255);
  for (let i = 0; i < nRows; i++) {
    for (let j = 0; j < nCols; j++) {
      rect(j * sqSize, i * sqSize, sqSize);
    }
  }
​
  let srcRow = Math.floor(mouseY / sqSize);
  let srcCol = Math.floor(mouseX / sqSize);
  
  let diagNW = [];
  for(let i = 1; i <= Math.min(srcRow, srcCol); i++){
    diagNW.push([srcRow - i, srcCol - i]);
  }
  
  let diagSE = [];
  for(let i = 1; i <= Math.min(nRows - 1 - srcRow, nCols - 1 - srcCol); i++){
    diagSE.push([srcRow + i, srcCol + i]);
  }
  
  let diagNE = [];
  for(let i = 1; i <= Math.min(srcRow, nCols - 1 - srcCol); i++){
    diagNE.push([srcRow - i, srcCol + i]);
  }
  
  let diagSW = [];
  for(let i = 1; i <= Math.min(nRows - 1 - srcRow, srcCol); i++){
    diagSW.push([srcRow + i, srcCol - i]);
  }
  
  let orthoN = [];
  for(let i = 1; i <= srcRow; i++){
    orthoN.push([srcRow - i, srcCol])
  }
  
  let orthoS = [];
  for(let i = 1; i <= nRows - 1 - srcRow; i++){
    orthoS.push([srcRow + i, srcCol])
  }
  
  let orthoW = [];
  for(let i = 1; i <= srcCol; i++){
    orthoW.push([srcRow, srcCol - i])
  }
  
  let orthoE = []; 
  for(let i = 1; i <= nCols - 1 - srcCol; i++){
    orthoE.push([srcRow, srcCol + i])
  }
  //spread operator
  let allDiag = [...diagNW, ...diagSE, ...diagNE, ...diagSW];
  fill(0);
  /*
  for(let i = 0; i < allDiag.length; i++){
    square(allDiag[i][0] * sqSize, allDiag[i][1] * sqSize, sqSize);
  }
  */
  //destructuring
  for(let [row, col] of allDiag){
    square(col * sqSize, row * sqSize, sqSize);
  }
  
  let allOrthos = [...orthoN, ...orthoS, ...orthoW, ...orthoE];
  fill(0);
  for(let [row, col] of allOrthos){
    square(col * sqSize, row * sqSize, sqSize);
  }
}