non_width = 20;

non_pix = 15;

offset = 50;

pix = [];

​

function setup() {

  createCanvas(400, 400);

  for (let mi = 0; mi < non_width; mi++) {

    let tmp = [];

    for (let ni = 0; ni < non_width; ni++) {

      tmp.push(0);

    }

    pix.push(tmp)

  }

}

​

function draw() {

  background(220);

  fill(0);

  noStroke();

  text("Stage: " + stage.toString(), 10, 20);

  translate(offset, offset);

  stroke(0);

  for (let mi = 0; mi < non_width; mi++) {

    for (let ni = 0; ni < non_width; ni++) {

      fill(255 * (1 - pix[mi][ni]));

      rect(ni * non_pix, mi * non_pix, non_pix, non_pix);

    }

  }

  if (mouseIsPressed) {

    let mx = floor((mouseX - offset) / non_pix);

    let my = floor((mouseY - offset) / non_pix);

    if (mx >= 0 && mx < non_width && my >= 0 && my < non_width) {

      pix[my][mx] = 1;

    }

  }

  // columns

  for (let mi = 0; mi < non_width; mi++) {

    for (let ni = 0; ni < non_width; ni++) {

      //

    }

  }

  // rows

  for (let mi = 0; mi < non_width; mi++) {

    for (let ni = 0; ni < non_width; ni++) {

      //

    }

  }

}

​

function keyPressed() {

  if (key == "n") {

    stage++;

  } else if (key == "p") {

    stage--;

  }

}