constructor(n, spacing, choice, palette) {

    this.n = n;

    this.w = width / this.n;

    this.spacing = spacing;

    this.choice = choice;

    this.cols = floor(this.w / this.spacing);

    this.rows = floor(this.w / this.spacing);

    this.x = floor(this.cols / 2);

    this.y = floor(this.rows / 2);

    this.grid = this.make2DArray();

    this.shape = new Shape();

    this.palette = palette;

​

    // Initialize the colorLerpArray

    this.colorLerpArray = Array(this.cols)

      .fill()

      .map(() => Array(this.rows).fill(0));

  }

​

  make2DArray() {

    let arr = new Array(this.cols);

    for (let i = 0; i < arr.length; i++) {

      arr[i] = new Array(this.rows).fill(0);

    }

    return arr;

  }

​

  updateWalker() {

    // Move randomly while staying within bounds

    let r = floor(random(4));

    switch (r) {

      case 0:

        if (this.x + 1 < this.cols) this.x += 1;

        break;

      case 1:

        if (this.x - 1 >= 0) this.x -= 1;

        break;

      case 2:

        if (this.y + 1 < this.rows) this.y += 1;

        break;

      case 3:

        if (this.y - 1 >= 0) this.y -= 1;

        break;

    }

  }

​

  updateLerpAmount(i, j) {

    if (this.colorLerpArray[i][j] < 1) {

      this.colorLerpArray[i][j] += 0.05;

    }

    return this.colorLerpArray[i][j];

  }

​

  mapColor(lowerH, upperH, lowerS, upperS, alpha, fillType) {

    let fh, sh, s;

    if (

      this.x >= 0 &&

      this.x < this.cols &&

      this.y >= 0 &&

      this.y < this.rows

    ) {

      let amt = this.updateLerpAmount(this.x, this.y);

      fh = map(amt, 0, 1, lowerH, upperH);

      sh = map(amt, 0, 1, upperH, lowerH);

      s = map(amt, 0, 1, lowerS, upperS);

    } else {

      fh = lowerH;

    }

​

    if (fillType == 0) {

      noFill();

      stroke(sh, s, 100);

    } else if (fillType == 1) {

      strokeWeight(1.5); // 1.5

      stroke(sh, s, 100);

      fill(fh, 100, alpha);

    }

  }

​

  updateColor(c1, c2) {

    // let c1 = color(84, 65, 78);

    // let c2 = color(197, 235, 195);

​

    let c;

    if (

      this.x >= 0 &&

      this.x < this.cols &&

      this.y >= 0 &&

      this.y < this.rows

    ) {

      let amt = this.updateLerpAmount(this.x, this.y);

      c = lerpColor(c1, c2, amt);

    } else {

      c = c1;

    }

    return c;

  }

​

  chooseShape(angle) {

    let c, c1, c2;

    switch (this.choice) {

      case 0:

        push();

        this.mapColor(30, 180, 100, 100, 80, 1);

        this.shape.astroid(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 1

        );

        pop();

        break;

      case 1:

        this.mapColor(0, 360, 100, 100, 80, 1);

        this.shape.barbell(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing,

          3,

          angle

        );

        break;

      case 2:

        this.mapColor(0, 360, 100, 100, 100, 1);

        this.shape.clover(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.75,

          4

        );

        break;

      case 3:

        push();

        noFill();

        this.mapColor(360, 0, 100, 100, 100, 0);

        this.shape.cornuSpiral(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.5,

          1,

          2,

          angle

        );

        pop();

        break;

​

      case 4:

        this.mapColor(180, 330, 100, 100, 80, 1);

        this.shape.eight(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.66,

          angle

        );

        break;

      case 5:

        push();

        strokeWeight(0.5);

        //noFill();

        this.mapColor(360, 0, 100, 100, 80, 0);

        this.shape.flower(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.25,

          1,

          8

        );

        pop();

        break;

      case 6:

        this.mapColor(0, 360, 100, 100, 100, 1);

        this.shape.gear(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.5,

          1,

          8,

          8

        );

        break;

​

      case 7:

        push();

        this.mapColor(180, 330, 20, 80, 80, 1);

        this.shape.malteseCross(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.45,

          3,

          2,

          angle

        );

        pop();

        break;

      case 8:

        this.mapColor(0, 360, 100, 100, 100, 1);

        this.shape.polygon(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.66, // .45

          3,

          angle

        );

        break;

      case 9:

        strokeWeight(0.3);

        this.mapColor(120, 300, 100, 100, 100, 1);

        this.shape.quadrifolium(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.66

        );

        break;

      case 10:

        // This shape looks better with larger grid spacing

        push();

        noFill();

        strokeWeight(0.5);

        colorMode(RGB);

        c2 = color(255, 230, 109, 130);

        c1 = color(255, 107, 107, 70);

        c = this.updateColor(c1, c2);

        stroke(c);

        //this.mapColor(0, 360, 100, 100, 100, 0);

        this.shape.rose(

          this.x * this.spacing,

          this.y * this.spacing,

          random(this.spacing * 0.4, this.spacing * 2),

          8,

          5

        );

        pop()

        break;

      case 11:

        push();

        //this.mapColor(0, 360, 100, 100, 100, 0);

        noFill();

        strokeWeight(0.5);

        colorMode(RGB);

         c1 = color(255, 230, 109, 220);

         c2 = color(78, 205, 196, 170);

         c = this.updateColor(c2, c1);

         stroke(c);

        this.shape.spiral(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.45,

          0.1,

          1,

          angle

        );

        pop();

        break;

      case 12:

        this.mapColor(0, 360, 100, 100, 80, 1);

        this.shape.supershape(

          this.x * this.spacing,

          this.y * this.spacing,

          this.spacing * 0.5,

          angle

        );

        break;

    }

  }

​

  show() {

    push();

    translate(this.spacing / 2, this.spacing / 2);

    let angle;

    if (random(1) < 0.5) {

      angle = PI / 2;

    } else {

      angle = 0;

    }

​

    this.chooseShape(angle);

​

    // circle(this.x * this.spacing, this.y * this.spacing, this.spacing * 0.5);

​

    this.updateWalker();

    pop();

  }

}

​