grid template with coordinate display by Owen Roberts

*/

var u = 20; // one unit = 20 px

​

function setup() {

    createCanvas(400, 400);

}

​

function draw() {

    // grid with scale of 20 px

    // comment function to remove grid, mouse position

    grid();

    displayMousePosition();

​

    // START YOUR DRAWING HERE!

}

​

function grid() {

    background(200);

    stroke(220);

    strokeWeight(1);

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

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

            line(x, 0, x, height);

            line(0, y, width, y);

        }

    }

}

​

function displayMousePosition() {

    textFont('menlo');

    textSize(14);

    noStroke();

    text("x:" + mouseX, 10, 20);

    text("y:" + mouseY, 10, 40);

  stroke('black'); // reset stroke

}