title: Javascript P5, drawing a grid on a canvas
body: <p>I'm carrying out a P5 assignment for college and struggling to understand some code I found online. I've included a screenshot of the output of the code and the actual code below. I understand the logic of creating the basic grid, but I was wondering if someone could explain to me how exactly it changes the size of the squares? </p>
  
  <p>Here is a codepen link to see it working:
  <a href="https://codepen.io/therealpamelahalpert/pen/rNaYrbP" rel="nofollow noreferrer">https://codepen.io/therealpamelahalpert/pen/rNaYrbP</a></p>
  
  <pre><code>'use strict';
  
  var stepX = 60;
  var stepY = 60;
  
  var maxDistance = 600;
  
  function setup() {
      createCanvas(1240, 1748);
      noStroke();
      colorMode(HSB, 360, 100, 100);
  }
  
  function draw() {
      clear();
  
      for (var gridY = 0; gridY &lt; height; gridY += stepY) {
          for (var gridX = 0; gridX &lt; width; gridX += stepX) {
              //Creating the variable distanceBetweenTwoPoints which is getting the distance between 2 points on the canvas
              distanceBetweenPoints = dist(mouseX, mouseY, gridX, gridY);
  
              var diameter = distanceBetweenPoints / maxDistance * 60;
                  strokeWeight(4);
                  stroke(0,0,0);
                  rect(gridX, gridY, diameter, diameter);
          }
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lbrg4.png" rel="nofollow noreferrer">Output of the code</a></p>