var gridResolution;

var gridResolutionStep;

var cols, rows;

var drawing;

function setup() {

  createCanvas(256, 256);

  gridResolution = 8;

  gridResolutionStep = 1;

  cols = floor(width / gridResolution);

  rows = floor(height / gridResolution);

  drawing = createGraphics(width, height);

}

​

function keyPressed() {

 if(keyCode === UP_ARROW) {

   gridResolutionStep = min(gridResolutionStep + 1, 7);

   gridResolution = pow(2, gridResolutionStep);

   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 + min(1, (now - last) / 1000);

  last = now;

  background(220);

  drawing.clear();

  drawing.loadPixels();

  var sx, sy, shade;

  for(var i = 0; i < rows; i++) {

    for(var j = 0; j < cols; j++) {

       sx = floor(i * gridResolution);

       sy = floor(j * gridResolution);

       shade = floor(map(noise(j / cols, i / rows, dt), 0, 1, 0, 255));

       for(var y = sy; y < sy + gridResolution; y++) {

         for(var x = sx; x < sx + gridResolution; x++) {

           var index = (x + y * width) * 4;

           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);

}