var gridResolution;

var gridResolutionStep;

var cols, rows;

var drawing;

​

function setup() {

  createCanvas(256, 256);

  gridResolution = 8; // Initial value

  gridResolutionStep = 1; // increment value

  cols = floor(width / gridResolution);  // Determine the number of cols

  rows = floor(height / gridResolution);  // determine the number of rows

  drawing = createGraphics(width, height);

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    gridResolutionStep = min(gridResolutionStep + 1, 7); // why not increment the value by 1?

    gridResolution = pow(2, gridResolutionStep); // Since the number of grids and colums must double

    cols = floor(width / gridResolution);

    rows = floor(height / gridResolution);

  }

  if (keyCode === DOWN_ARROW) {

    gridResolutionStep = max(gridResolutionStep - 1, 0);

    gridResolution = pow(2, gridResolutionStep);

    cols = floor(width / gridResolution);

    rows = floor(height / gridResolution);

  }

}

​

var now = 0;

var last = 0;

var dt = 0;

​

function draw() {

  now = millis();

  dt = dt + 0.001  // changed to undertand it for the moment , Zoffset changes

  last = now;

​

  background(220);

  drawing.clear();

  drawing.loadPixels();

  var sx, sy, shade;

  for (var i = 0; i < rows; i++) { // to display the number of rows

    for (var j = 0; j < cols; j++) { // to display the number of colums

      sx = floor(i * gridResolution);  // Depending on the resolution ,how big each cell should   

      sy = floor(j * gridResolution);  // be

      shade = floor(map(noise(j / cols, i / rows, dt), 0, 1, 0, 255)); // Gives it a shade based on perlin noise

      for (var y = sy; y < sy + gridResolution; y++) {    // shading each pixel of the cell with 

        for (var x = sx; x < sx + gridResolution; x++) {  // the same color

          var index = (x + y * width) * 4; // since pixels are arranged in a 1D array , formula used

          drawing.pixels[index] = shade;

          drawing.pixels[index + 1] = shade;

          drawing.pixels[index + 2] = shade;

          drawing.pixels[index + 3] = 255;

        }

      }

    }

  }

  drawing.updatePixels();

  image(drawing, 0, 0);

  fill(255);

  text(frameRate(), 10, 10); // display framerate

}