let rows = 4; //Number of rows

let state = 0;

let strk = 1;

​

function setup() {

  createCanvas(400, 400);

  buttons();

  pattern();

  // color();

}

​

function pattern() {

  background(220);

​

  let w = width / cols;

  let h = height / rows;

​

  for (let x = 0; x <= width; x += w) {

    for (let y = 0; y <= height; y += h) {

      // noStroke();

      strokeWeight(sstrk.value() / 10);

      fill(sred.value(), sgreen.value(), sblue.value());

      setshape(x, y, w, h);

    }

  }

}

​

function setshape(x, y, w, h) {

  if (state === 0) {

    // strokeWeight(5);

    ellipse(x + w / 2, y + h / 2, w, h);

  }

  if (state === 1) {

    // strokeWeight(5);

    rect(x, y, w, h);

  }

  if (state === 2) {

    // strokeWeight(5);

    triangle(x, y + h, x + w, y + h, x + w / 2, y);

  }

}

​

function buttons() {

  button = createButton("X +");

  button.mousePressed(xup);

​

  button = createButton("X -");

  button.mousePressed(xdwn);

​

  button = createButton("Y +");

  button.mousePressed(yup);

​

  button = createButton("Y -");

  button.mousePressed(ydwn);

​

  bellipse = createButton("Ellipse");

  bellipse.mousePressed(setstate0);

​

  bsquare = createButton("Rectangle");

  bsquare.mousePressed(setstate1);

​

  btriangle = createButton("Triangle");

  btriangle.mousePressed(setstate2);

​

  sstrk = createSlider(0, 100, 10);

  // sstrk.position(width-150,height)

  sstrk.style("width", "135px");

  sstrk.input(strkwght);

  createElement("label", "Stroke Weight");

​

  createElement("br");

​

  sred = createSlider(0, 255, 100);

  sred.style("width", "135px");

  sred.input(pattern);

  createElement("label", "Red");

​

  createElement("br");

​

  sgreen = createSlider(0, 255, 100);

  sgreen.style("width", "135px");

  sgreen.input(pattern);

  createElement("label", "Green");

​

  createElement("br");

​

  sblue = createSlider(0, 255, 100);

  sblue.style("width", "135px");

  sblue.input(pattern);

  createElement("label", "Blue");

​

  createElement("br");

​

  button = createButton("Reset");

  button.mousePressed(reset);

}

​

function strkwght() {

  var strk = sstrk.value() / 10;

  strokeWeight(strk);

  pattern();

  // console.log(strk)

}

​

function xup() {

  cols += 1;

  cols = max(1, cols + 1)

  pattern();

}

​

function xdwn() {

  cols -= 1;

  cols = max(1, cols - 1)

  pattern();

}

​

function yup() {

  rows += 1;

  rows = max(1, rows + 1)

  pattern();

}

​

function ydwn() {

  rows -= 1;

  rows = max(1, rows - 1)

  pattern();

}

​

function reset() {

  cols = 4; //Number of columns

  rows = 4; //Number of rows

  sred.value(100);

  sgreen.value(100);

  sblue.value(100);

  pattern();

}

​

function setstate0() {

  state = 0;

  pattern();

}

​

function setstate1() {

  state = 1;

  pattern();

}

​

function setstate2() {

  state = 2;

  pattern();

}

​