let grid = [];

let bw;

let offset;

let X_labels = [];

let Y_labels = [];

let max_labels = 0;

let input;

let loaded = false;

​

function setup() {

  createCanvas(500, 500);

  loadJSON("nonogram.json",dataLoaded);

  createButton("Clear").mouseReleased(() => {

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

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

        grid[mi][ni] = 0;

      }

    }

  }).position(0,height+20);

​

  d = pixelDensity();

  resetGrid();

}

​

function draw() {

  if (loaded) {

    bw = (width) / (boxes_x + max_labels);

    background(240);

    stroke(100);

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

      if (ni % 5 == 0) {

        strokeWeight(1.0);

      } else {

        strokeWeight(0.5);

      }

      line(ni * bw + offset, 0, ni * bw + offset, height);

      line(0, ni * bw + offset, width, ni * bw + offset);

    }

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

      line(ni * bw, offset, ni * bw, height);

      line(offset, ni * bw, width, ni * bw);

    }

    printLabels();

    showChecked(grid);

  }

}

​

function mousePressed() {

  if (loaded) {

    let mi = floor((mouseY - offset) / bw);

    let ni = floor((mouseX - offset) / bw);

    if (mi >= 0 & mi < boxes_x & ni >= 0 & ni < boxes_x) {

      grid[mi][ni] = (grid[mi][ni] + 1) % 3;

    }

  }

}

​

function showChecked(grid_in) {

  noStroke();

  fill(0, 150);

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

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

      if (grid_in[mi][ni] == 1) {

        fill(100);

        rect(ni * bw + offset, mi * bw + offset, bw, bw);

      } else if (grid_in[mi][ni] == 2) {

        fill(200);

        rect(ni * bw + offset, mi * bw + offset, bw, bw);

      }

    }

  }

}

​

function printLabels() {

  textAlign(CENTER, CENTER);

  // Rows:

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

    push();

    translate(offset - (Y_labels[mi].length - 0.5) * bw, offset + bw * (mi + 0.5));

    noStroke();

    fill(0);

    for (let ni = 0; ni < Y_labels[mi].length; ni++) {

      text(Y_labels[mi][ni].toString(), ni * bw, 0);

    }

    pop();

  }

​

  // Columns:

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

    push();

    translate(offset + bw * (ni + 0.5), offset - (X_labels[ni].length - 0.5) * bw);

    noStroke();

    fill(0);

    for (let mi = 0; mi < X_labels[ni].length; mi++) {

      text(X_labels[ni][mi].toString(), 0, mi * bw);

    }

    pop();

  }

}

​

function resetGrid() {

  grid = [];

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

    grid.push([]);

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

      grid[mi].push(0);

    }

  }

  bw = width / (boxes_x + max_labels);

  offset = bw * (max_labels);

}

​

function dataLoaded(data) {

  boxes_x = data.boxes_x;

  X_labels = data.X_labels;

  Y_labels = data.Y_labels;

  max_labels = data.max_labels;

  bw = width / (boxes_x + max_labels);

  offset = bw * (max_labels);

  resetGrid();

  loaded = true;

}