let length = 5;

let spacing = 50;

​

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  background(220);

​

  // our loop for drawing the grid of crosses

  for (let x = spacing; x < width; x += spacing) {

    for (let y = spacing; y < height; y += spacing) {

      // use push and pop to define what specifically you want the transforms to effect

      push();

      translate(x, y);

​

      // distance function to then use it as a drive to effect rotation and stroke colour

      if (dist(x, y, mouseX, mouseY) < 100) {

        rotate(radians(45)); // rotate by 45 degrees

        stroke(255, 0, 0); // change stroke to red

        strokeWeight(5);

        length = 20;

      } else {

        stroke(0); // else just make the stroke black

        strokeWeight(1); // set stroke to 1px

        length = 5; // set length back to 5

      }

      axis(); // our function to draw the axis

      pop();

    }

  }

}

​

// a function that will draw our axis for us

function axis() {

  strokeCap(SQUARE); // you can also choose what stroke cap you want to have in P5.js

  line(-length, 0, length, 0); // line on the x axis

  line(0, -length, 0, length); // line on the y axis

}

​