let squares = [];

let x, y;

​

function setup() {

    createCanvas(400, 400);

    rectMode(CENTER);

    textAlign(CENTER);

​

    x = width / (size + 1);

    y = height / (size + 1);

​

    let i = 0;

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

        for (let k = 0; k < size; k++) {

            squares[k + j * 4] = new Square(i);

            i++;

        }

    }

}

​

function draw() {

    background(0);

    rect(200, 200, width - x, height - y);

    let i = 0;

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

        for (let k = 0; k < size; k++) {

            squares[k + j * 4].display(k,j);

        }

    }

}

​

function mousePressed() {

    for(let i = 0; i < size*size; i++) {

        if(Math.abs(squares[i].x - mouseX) < x/2 && Math.abs(squares[i].y - mouseY) < y/2) {

    }

}

}

class Square {

​

    constructor(num) {

        this.val = num;

    }

​

    display(k, j) {

        stroke(255);

        if(this.val != 0) fill('red');

        else fill(255);

        rect(k*x+x, j*y+y, x, y);

        if(this.val != 0)

            text(this.val, (k+1)*x, (j+1)*y);

    }

​

}