let offset;

let cellsize;

let cellsR, cellsC;

let zOff = 0;

let nOff = 0.1;

​

function setup() {

  createCanvas(600, 800);

​

  cellsize = 20;

  cellsR = int(height / cellsize);

  cellsC = int(width / cellsize);

  offset = 5;

​

  grid = [];

​

  let threshold = 1.0 / 8.0;

​

  for (let r = 0; r < cellsR; r++) {

    grid[r] = [];

    for (let c = 0; c < cellsC; c++) {

      if (

        r < offset ||

        c < offset ||

        r >= cellsR - offset ||

        c >= cellsC - offset

      ) {

        grid[r][c] = null;

      } else {

        let n = noise(c * nOff, r * nOff, zOff * nOff);

        let t;

        if (n < 1 / 8) t = "up";

        else if (n < 2 / 8) t = "upright";

        else if (n < 3 / 8) t = "right";

        else if (n < 4 / 8) t = "downright";

        else if (n < 5 / 8) t = "down";

        else if (n < 6 / 8) t = "downleft";

        else if (n < 7 / 8) t = "left";

        else t = "upleft";

​

        grid[r][c] = t;

      }

    }

  }

​

  // drawingContext.shadowOffsetX = 0;

  // drawingContext.shadowOffsetY = 0;

  // drawingContext.shadowBlur = 50;

  // drawingContext.shadowColor = color("#800080");//)'black';

}

​

let frameCtr = 0;

function draw() {

  let bg_c;

  if (frameCtr < 10) bg_c = map(frameCtr,0,10,221,20);

  else bg_c = map(frameCtr,10,20,20,222);

  background(bg_c);

  frameCtr+=0.01;

  if (frameCtr > 20) frameCtr = 0;

​

  fill(40);

  noStroke();

  rectMode(CENTER);

  let cs = cellsize / 2;

  for (let r = 0; r < cellsR; r++) {

    for (let c = 0; c < cellsC; c++) {

      if (grid[r][c] != null) {

        fill(0);

        square(c * cellsize + cs-5, r * cellsize + cs-5, cellsize - 2);

        fill(50);

        square(c * cellsize + cs-4, r * cellsize + cs-4, cellsize - 2);

        fill(100);

        square(c * cellsize + cs-3, r * cellsize + cs-3, cellsize - 2);

        fill(150);

        square(c * cellsize + cs-2, r * cellsize + cs-2, cellsize - 2);

        fill(200);

        square(c * cellsize + cs-1, r * cellsize + cs-1, cellsize - 2);

        let t = grid[r][c];

        if (t == "up") fill(20);

        else if (t == "upright") fill(40);

        else if (t == "right") fill(color("#800080"));

        //fill (80)

        else if (t == "downright") fill(120);

        else if (t == "down") fill(180);

        else if (t == "downleft") fill(200);

        else if (t == "left") fill(220);

        else fill(240);

​

        square(c * cellsize + cs, r * cellsize + cs, cellsize - 2);

      }

    }

  }

​

  if (frameCount % 10 == 0) {

    for (let r = 0; r < cellsR; r++) {

      for (let c = 0; c < cellsC; c++) {

        if (

          r < offset ||

          c < offset ||

          r >= cellsR - offset ||

          c >= cellsC - offset

        ) {

          continue;

        } else {

          let n = noise(c * nOff, r * nOff, zOff * nOff);

          let t;

          if (n < 1 / 8) t = "up";

          else if (n < 2 / 8) t = "upright";

          else if (n < 3 / 8) t = "right";

          else if (n < 4 / 8) t = "downright";

          else if (n < 5 / 8) t = "down";

          else if (n < 6 / 8) t = "downleft";

          else if (n < 7 / 8) t = "left";

          else t = "upleft";

​

          grid[r][c] = t;

        }

      }

    }

    zOff++;

  }

​

  // noLoop();

}

​