let d = 0;
let canvasW = 1024;
let canvasH = 768;

let viewX = 0;
let viewY = 0;
let cellSize = 50;

function setup() {
    createCanvas(canvasW, canvasH);
}

function toScreen(x, y) {
    return [canvasW / 2 + (viewX - x) * cellSize, canvasH / 2 - (viewY - y) * cellSize];
}

function draw() {
    background(220);
    cellsX = floor(canvasW / cellSize) + 2;
    cellsY = floor(canvasH / cellSize) + 2;
    for (i = -floor(cellsX / 2); i <= floor(cellsX / 2); i++)
    {
        for (j = -floor(cellsY / 2); j <= floor(cellsY / 2); j++)
        {
            let cell = [floor(viewX) + i, floor(viewY) + j];
            let [x, y] = toScreen(cell[0], cell[1]);

            if (cell[0] % 10 == 0)
            {
                stroke(0);
                strokeWeight(3);
            }
            line(x, 0, x, canvasH);
            stroke(170);

            if (cell[1] % 10 == 0)
            {
                stroke(0);
                strokeWeight(3);
            }
            line(0, y, canvasW, y);
            stroke(170);
        }
        
    }
}

function mouseDragged() {
    viewX += movedX / cellSize;
    viewY -= movedY / cellSize;
}