let wG = 240;

let wB = 235;

​

let bgR, bgG, bgB;

​

let shape1X = 0;

let shape1Y = 0;

let slider;

let w;

​

function setup() {

  createCanvas(600, 600);

​

  slider = createSlider(0, 10, 5);

  // slider.position(10, 10);

  slider.style("width", "600px");

}

​

function draw() {

  background(bgR, bgG, bgB);

  noStroke();

​

  // SHAPE COMBINATIONS WILL BE:

  // 1,2,3 & 1,2,3

  // 1,4,3 & 1,2,3

  // 1,4,3 & 1,4,3

  // 6,4,3 & 6,4,3

  // 6,2,3 & 6,2,3

  // 4,8 & 4,8

  // 2,8 & 2,8

  // 2,7,9 & 2,7,9

  // 4,7,9 & 2,3,9

  // 2,4,8 & 2,8

  // 6,2,9 & 6,2,9

​

  // 1==6==9

  // 2==4

  // 3==7

  // 8

​

  // defining the pixel size which will be uniform across all motifs

  let num = slider.value();

  // let num = map(mouseX,0,width,0,10)

  w = map(mouseY, 0, height, 2, 10);

​

    // purple RGB 118, 43, 114

  // bgR = 166;

    // bgG = 36;

    // bgB = 60;

  // orange RGB 203, 88, 25

  // bg colour based on mouseY position

  // if(mouseY>=0&&mouseY<height/3){

  //   bgR=203

  //   bgG=88

  //   bgB=25

  // }else if (mouseY>=height/3&&mouseY<height*2/3){

  //   bgR = 166;

  //   bgG = 36;

  //   bgB = 60; 

  // }else{

  //   bgR = 118;

  //   bgG = 43;

  //   bgB = 114;

  // }

​

// RGB 166, 31, 67

​

// RGB 217, 75, 43

​

// RGB 115, 24, 16

  // mapping colour to mouse Y

  bgR=map(mouseY,0,height,220,145)

  bgG=map(mouseY,0,height,75,35)

  bgB=map(mouseY,0,height,67,60)

  // creating a brick repeat pattern

​

  for (r = 0; r <= width; r += 28 * w) {

    for (s = 0; s <= height; s += 28 * w) {

      if (num == 0) {

        shape1(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 1) {

        shape1(r, s);

        shape4(r, s);

        shape3(r, s);

      } else if (num == 2) {

        shape1(r, s);

        shape4(r, s);

        shape3(r, s);

      } else if (num == 3) {

        shape6(r, s);

        shape4(r, s);

        shape3(r, s);

      } else if (num == 4) {

        shape6(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 5) {

        shape9(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 6) {

        shape9(r, s);

        shape2(r, s);

        shape7(r, s);

      } else if (num == 7) {

        shape2(r, s);

        shape8(r, s);

      } else if (num == 9) {

        shape4(r, s);

        shape8(r, s);

      } else if (num == 8) {

        shape4(r, s);

        shape2(r, s);

        shape8(r, s);

      } else {

        shape6(r, s);

        shape2(r, s);

        shape3(r, s);

      }

    }

  }

​

  for (r = -14 * w; r <= width; r += 28 * w) {

    for (s = -14 * w; s <= height; s += 28 * w) {

      if (num == 0) {

        shape1(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 1) {

        shape1(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 2) {

        shape1(r, s);

        shape4(r, s);

        shape3(r, s);

      } else if (num == 3) {

        shape6(r, s);

        shape4(r, s);

        shape3(r, s);

      } else if (num == 4) {

        shape6(r, s);

        shape2(r, s);

        shape3(r, s);

      } else if (num == 5) {

        shape9(r, s);

        shape4(r, s);

        shape7(r, s);

      } else if (num == 6) {

        shape9(r, s);

        shape2(r, s);

        shape7(r, s);

      } else if (num == 7) {

        shape2(r, s);

        shape8(r, s);

      } else if (num == 9) {

        shape4(r, s);

        shape8(r, s);

      } else if (num == 8) {

        shape4(r, s);

        shape8(r, s);

      } else {

        shape6(r, s);

        shape2(r, s);

        shape3(r, s);

      }

    }

  }

​

  // }

  // else{

  //   for (r = 0; r <= width; r+=28*w) {

​

  //     for (s = 0; s <= height; s += 14 * w) {

  //       // row(r,s)

  //       shape1(r, s);

  //     shape2(r, s);

  //     shape3(r, s);

  //     }

  //   }

​

  //display grid for working

  // push();

  // for (i = 0; i < width; i += 5) {

  //   for (j = 0; j < height; j += 5) {

  //     stroke(bgR + 20, bgG + 20, bgB + 20);

  //     strokeWeight(0.1);

  //     line(i, 0, i, height);

  //     line(0, j, width, j);

  //   }

  // }

  // pop();

}

​

function shape1(x, y) {

  push();

  rectMode(CENTER);

  translate(x, y);

  noStroke();

​

  // for (i = 0; i <= w * 11; i += 2 * w) {

  //   for (j = w * 11; j >= w; j -= 2 * w) {

  //     rect(0,0,i,j);

  //   }

  // }

​

  //   CAN DO THIS AS A FOR LOOP BUT THE PAGE KEEPS CRASHING! :(

​

  fill(wR, wG, wB);

  rect(shape1X, shape1Y, w, w * 13);

  rect(shape1X, shape1Y, w * 3, w * 11);

  rect(shape1X, shape1Y, w * 5, w * 9);

  rect(shape1X, shape1Y, w * 7, w * 7);

  rect(shape1X, shape1Y, w * 9, w * 5);

  rect(shape1X, shape1Y, w * 11, w * 3);

  rect(shape1X, shape1Y, w * 13, w);

​

  fill(0);

  rect(shape1X, shape1Y, w, w * 11);

  rect(shape1X, shape1Y, w * 3, w * 9);

  rect(shape1X, shape1Y, w * 5, w * 7);

  rect(shape1X, shape1Y, w * 7, w * 5);

  rect(shape1X, shape1Y, w * 9, w * 3);

  rect(shape1X, shape1Y, w * 11, w);

​

  // for(i=9*w;i<=w*9;i+=(2*w)){

  //   rect(0,0,i)

  // }

  fill(wR, wG, wB);

  square(0, 0, w * 3);

  rect(0, 0, w * 5, w);

  rect(0, 0, w, w * 5);

​

  fill(bgR, bgG, bgB);

  square(0, 0, w);

  pop();

}

​

function shape2(x, y) {

  let shape2X = shape1X + 14 * w;

  let shape2Y = shape1Y;

  // twoFan()

​

  // let y = 7 * w;

​

  push();

  translate(x, y);

​

  noStroke();

  rectMode(CENTER);

  fill(wR, wG, wB);

  square(shape2X, shape2Y, 7 * w);

​

  fan();

​

  for (i = 0; i < 7 * w; i += w * 4) {

    for (j = 0; j < 7 * w; j += w * 4) {

      fill(0);

      noStroke();

      square(shape2X - 2 * w + i, shape2Y - 2 * w + j, w * 3);

    }

  }

  fill(bgR, bgG, bgB);

  square(shape2X, shape2Y, w);

  pop();

}

​

function shape3(x, y) {

  push();

  translate(x, y);

  rectMode(CENTER);

  fill(wR, wG, wB);

  rect(shape1X + 7 * w, shape1Y + 7 * w, w, 5 * w);

  rect(shape1X + 7 * w, shape1Y + 7 * w, w * 5, w);

​

  rect(shape1X - 7 * w, shape1Y + 7 * w, w, 5 * w);

  rect(shape1X - 7 * w, shape1Y + 7 * w, w * 5, w);

​

  fill(0);

  square(shape1X + 7 * w, shape1Y + 7 * w, w);

  square(shape1X - 7 * w, shape1Y + 7 * w, w);

  pop();

}

​

function fan() {

  // for(i=3*w;i>=(-3.5*w);i-=w){

  // }

  // CAN DO THIS AS A FOR LOOP BUT THE PAGE KEEPS CRASHING! :(

  let shape2X = shape1X + 14 * w;

  let shape2Y = shape1Y;

​

  push();

  fill(wR, wG, wB);

  noStroke();

  rect(shape2X - 3 * w, shape2Y, w, 13 * w);

  rect(shape2X - 2 * w, shape2Y, w, 11 * w);

  rect(shape2X - w, shape2Y, w, 9 * w);

​

  rect(shape2X + w, shape2Y, w, 9 * w);

  rect(shape2X + 2 * w, shape2Y, w, 11 * w);

  rect(shape2X + 3 * w, shape2Y, w, 13 * w);

​

  rect(shape2X, shape2Y - 3 * w, 13 * w, w);

  rect(shape2X, shape2Y - 2 * w, 11 * w, w);

  rect(shape2X, shape2Y - w, 9 * w, w);

​

  rect(shape2X, shape2Y + 3 * w, 13 * w, w);

  rect(shape2X, shape2Y + 2 * w, 11 * w, w);

  rect(shape2X, shape2Y + w, 9 * w, w);

​

  pop();

}

​

function shape4(x, y) {

  let shape4X = shape1X + 14 * w;

  let shape4Y = shape1Y;

​

  push();

  translate(x, y);

​

  noStroke();

  rectMode(CENTER);

​

  push();

  fill(wR, wG, wB);

  fan();

​

  pop();

​

  // fill(0)

  // rect(0,0,)

  // pop()

  fill(bgR, bgG, bgB);

  square(shape4X + 3 * w, shape4Y + 3 * w, w);

  square(shape4X + 2 * w, shape4Y + 2 * w, w);

  square(shape4X + w, shape4Y + w, w);

  rect(shape4X, shape4Y, w, w * 11);

  rect(shape4X, shape4Y, w * 11, w);

  square(shape4X - w, shape4Y - w, w);

  square(shape4X - 2 * w, shape4Y - 2 * w, w);

  square(shape4X - 3 * w, shape4Y - 3 * w, w);

  square(shape4X - w, shape4Y + w, w);

  square(shape4X - 2 * w, shape4Y + 2 * w, w);

  square(shape4X - 3 * w, shape4Y + 3 * w, w);

  square(shape4X + 3 * w, shape4Y - 3 * w, w);

  square(shape4X + 2 * w, shape4Y - 2 * w, w);

  square(shape4X + w, shape4Y - w, w);

​

  fill(wR, wG, wB);

  square(shape4X, shape4Y, w);

  pop();

}

​

function shape6(x, y) {

  push();

  rectMode(CENTER);

  translate(x, y);

​

  noStroke();

​

  fill(wR, wG, wB);

​

  rect(3 * w, 5 * w, 3 * w, w);

  rect(3 * w, -5 * w, 3 * w, w);

  rect(-3 * w, 5 * w, 3 * w, w);

  rect(-3 * w, -5 * w, 3 * w, w);

​

  rect(5 * w, 3 * w, w, 3 * w);

  rect(5 * w, -3 * w, w, 3 * w);

  rect(-5 * w, 3 * w, w, 3 * w);

  rect(-5 * w, -3 * w, w, 3 * w);

​

  square(-6 * w, -w, w);

  square(-6 * w, w, w);

  square(-6 * w, -w, w);

  square(-7 * w, 0, w);

​

  square(-w, -6 * w, w);

  square(w, -6 * w, w);

  square(-w, -6 * w, w);

  square(0, -7 * w, w);

​

  square(-w, 6 * w, w);

  square(w, 6 * w, w);

  square(-w, 6 * w, w);

  square(0, 7 * w, w);

​

  square(6 * w, -w, w);

  square(6 * w, w, w);

  square(6 * w, -w, w);

  square(7 * w, 0, w);

​

  fill(0);

  square(3 * w, 3 * w, 3 * w);

  square(-3 * w, -3 * w, 3 * w);

  square(-3 * w, 3 * w, 3 * w);

  square(3 * w, -3 * w, 3 * w);

​

  fill(wR, wG, wB);

​

  square(2 * w, 2 * w, w);

  square(2 * w, -2 * w, w);

  square(-2 * w, 2 * w, w);

  square(-2 * w, -2 * w, w);

​

  square(w, w, w);

  square(0, 0, w);

  square(-w, -w, w);

​

  square(-w, w, w);

​

  square(w, -w, w);

  pop();

}

​

function shape7(x, y) {

  push();

  translate(x, y);

  rectMode(CENTER);

  fill(0);

  rect(shape1X + 7 * w, shape1Y + 7 * w, w, 5 * w);

  rect(shape1X + 7 * w, shape1Y + 7 * w, w * 5, w);

  square(shape1X + 7 * w, shape1Y + 7 * w, 3 * w);

​

  rect(shape1X - 7 * w, shape1Y + 7 * w, w, 5 * w);

  rect(shape1X - 7 * w, shape1Y + 7 * w, w * 5, w);

  square(shape1X - 7 * w, shape1Y + 7 * w, 3 * w);

​

  fill(wR, wG, wB);

  square(shape1X + 7 * w, shape1Y + 7 * w, w);

  square(shape1X - 7 * w, shape1Y + 7 * w, w);

​

  pop();

}

​

function shape8(x, y) {

  push();

  translate(x, y);

  rectMode(CENTER);

​

  fill(0);

  square(shape1X, shape1Y, 7 * w);

  square(shape1X - 5 * w, shape1Y - 5 * w, 3 * w);

  square(shape1X - 5 * w, shape1Y + 5 * w, 3 * w);

  square(shape1X + 5 * w, shape1Y - 5 * w, 3 * w);

  square(shape1X + 5 * w, shape1Y + 5 * w, 3 * w);

​

  fill(wR, wG, wB);

  rect(shape1X, shape1Y, w, 5 * w);

  rect(shape1X, shape1Y, w * 5, w);

  square(shape1X, shape1Y, 3 * w);

​

  rect(shape1X, shape1Y, w, 5 * w);

  rect(shape1X, shape1Y, w * 5, w);

  square(shape1X, shape1Y, 3 * w);

​

  rect(shape1X - 4 * w, shape1Y, w, 15 * w);

  rect(shape1X + 4 * w, shape1Y, w, 15 * w);

  rect(shape1X, shape1Y - 4 * w, w * 15, w);

  rect(shape1X, shape1Y + 4 * w, 15 * w, w);

​

  rect(shape1X + 7 * w, shape1Y + 7 * w, w, 7 * w);

  rect(shape1X - 7 * w, shape1Y + 7 * w, w, 7 * w);

  rect(shape1X - 7 * w, shape1Y - 7 * w, 7 * w, w);

  rect(shape1X + 7 * w, shape1Y - 7 * w, 7 * w, w);

​

  fill(bgR, bgG, bgB);

  noStroke();

​

  square(shape1X - w, shape1Y, w);

  square(shape1X + w, shape1Y, w);

  square(shape1X, shape1Y + w, w);

  square(shape1X, shape1Y - w, w);

​

  pop();

}

​

function shape9(x, y) {

  push();

  rectMode(CENTER);

  translate(x + 14 * w, y + 14 * w);

​

  noStroke();

​

  fill(wR, wG, wB);

​

  square(2 * w, 2 * w, w);

  square(2 * w, -2 * w, w);

  square(-2 * w, 2 * w, w);

  square(-2 * w, -2 * w, w);

​

  square(4 * w, 2 * w, w);

  square(4 * w, -2 * w, w);

  square(-4 * w, 2 * w, w);

  square(-4 * w, -2 * w, w);

​

  square(2 * w, 4 * w, w);

  square(2 * w, -4 * w, w);

  square(-2 * w, 4 * w, w);

  square(-2 * w, -4 * w, w);

​

  square(4 * w, 4 * w, w);

  square(4 * w, -4 * w, w);

  square(-4 * w, 4 * w, w);

  square(-4 * w, -4 * w, w);

​

  square(5 * w, 3 * w, w);

  square(5 * w, -3 * w, w);

  square(-5 * w, 3 * w, w);

  square(-5 * w, -3 * w, w);

​

  square(3 * w, 3 * w, w);

  square(3 * w, -3 * w, w);

  square(-3 * w, 3 * w, w);

  square(-3 * w, -3 * w, w);

​

  square(3 * w, 5 * w, w);

  square(3 * w, -5 * w, w);

  square(-3 * w, 5 * w, w);

  square(-3 * w, -5 * w, w);

​

  square(0, 5 * w, w);

  square(5 * w, 0, w);

  square(-5 * w, 0, w);

  square(0, -5 * w, w);

​

  square(-6 * w, -w, w);

  square(-6 * w, w, w);

  square(-6 * w, -w, w);

  square(-7 * w, 0, w);

​

  square(-w, -6 * w, w);

  square(w, -6 * w, w);

  square(-w, -6 * w, w);

  square(0, -7 * w, w);

​

  square(-w, 6 * w, w);

  square(w, 6 * w, w);

  square(-w, 6 * w, w);

  square(0, 7 * w, w);

​

  square(6 * w, -w, w);

  square(6 * w, w, w);

  square(6 * w, -w, w);

  square(7 * w, 0, w);

​

  push();

  fill(0);

  square(3 * w, 2 * w, w);

  square(3 * w, -2 * w, w);

  square(-3 * w, 2 * w, w);

  square(-3 * w, -2 * w, w);

​

  square(2 * w, 3 * w, w);

  square(2 * w, -3 * w, w);

  square(-2 * w, 3 * w, w);

  square(-2 * w, -3 * w, w);

​

  rect(3 * w, 0, 3 * w, w);

  rect(-3 * w, 0, 3 * w, w);

  rect(0, -3 * w, w, 3 * w);

  rect(0, 3 * w, w, 3 * w);

​

  square(0, 0, 3 * w);

  pop();

​

  square(w, w, w);

  square(0, 0, w);

  square(-w, -w, w);

​

  square(-w, w, w);

​

  square(w, -w, w);

  pop();

}

​

// function twoFan() {

//   // fan1

//   noStroke();

//   fan();

​

//   // fan2

//   push();

//   angleMode(DEGREES);

//   translate(shape2X, shape2Y);

//   rotate(-180);

//   fan();

//   pop();

// }

​

//   creating a row

// function row() {

//   push();

//   for (r = 0; r <= width; r += 28 * w) {

//     shape1(r, 0);

//     shape2(r, 0);

//     shape3(r, 0);

//   }

//   pop();

// }

​