let beadSize = 20;

let cols, rows;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cols = ceil(width / beadSize);

  rows = ceil(height / beadSize);

  // Set up beads array

  beads = new Array(cols);

  for (let x = 0; x < cols; x++){

    beads[x] = new Array(rows).fill(false);

  }

} 

​

function draw() {

  background(255);

  drawGrid();

  drawBeads();

  drawCurrent();

  drawPreview();

}

​

function drawPreview(){

  push();

  fill(255, 100);

  noStroke();

  rect(0, 0, cols, rows);

  stroke(0);

  for (let i = 0; i < cols; i++){

    for (let j = 0; j < rows; j++){

      if (beads[i][j]){

        point(i, j);

      }

    }

  }

  pop();

}

​

function drawBeads(){

  push();

  noStroke();

  fill(0);

  for (let i = 0; i < cols; i++){

    for (let j = 0; j < rows; j++){

      if (beads[i][j]){

        square(i * beadSize, j * beadSize, beadSize);

      }

    }

  }

  pop();

}

​

function drawCurrent(){  

  let mCol = floor(mouseX / beadSize);

  let mRow = floor(mouseY / beadSize);

  fill(255, 0, 0, 50);

  noStroke();

  square(mCol * beadSize, mRow * beadSize, beadSize);

}

​

function drawGrid(){

  push();

  stroke(200);

  for (let x = 0; x < width; x+= beadSize){

    line(x, 0, x, height);

  }

  for (let y = 0; y < height; y+= beadSize){

    line(0, y, width, y);

  }

  pop();

}

​

function mousePressed(){

  let mCol = floor(mouseX / beadSize);

  let mRow = floor(mouseY / beadSize);

  beads[mCol][mRow] = !beads[mCol][mRow];

}