04/01/2024

Htet Aung Lin

 */

​

function setup() {

  createCanvas(400, 400);

  pattern();

  var b = createButton("Generate new patterns colors");

  b.mousePressed(pattern);

}

​

function pattern() {

  background("white");

  noStroke();

​

  for (var x = 0; x <= width; x += 99) {

    for (var y = 0; y <= width; y += 99) {

      //First Square Row

      var r = random(255);

      var g = random(255);

      var b = random(255);

      fill(r, g, b);

      push();

      translate(x, y);

      rect(0, 0, 20, 20, 0, 10, 0, 10); //left top

      rect(22, 0, 20, 20, 10, 0, 10, 0); //right top

      rect(22, 22, 20, 20, 0, 10, 0, 10); //right bottom

      rect(0, 22, 20, 20, 10, 0, 10, 0); //left bottom

​

      fill("white");

      var circleSize = random(2, 10);

      circle(10, 10, circleSize); //left top

      circle(32, 10, circleSize); //right top

      circle(32, 32, circleSize); //right bottom

      circle(10, 32, circleSize); //left bottom

      pop();

​

      //Second Square Row

      fill(r, g, b);

      push();

      translate(x + 49.5, y + 49.5);

      rect(0, 0, 20, 20, 0, 10, 0, 10); //left top

      rect(22, 0, 20, 20, 10, 0, 10, 0); //right top

      rect(22, 22, 20, 20, 0, 10, 0, 10); //right bottom

      rect(0, 22, 20, 20, 10, 0, 10, 0); //left bottom

​

      fill("white");

      circle(10, 10, circleSize); //left top

      circle(32, 10, circleSize); //right top

      circle(32, 32, circleSize); //right bottom

      circle(10, 32, circleSize); //left bottom

      pop();

​

      //Rotated shape

      fill(r, g, b);

      push();

      translate(x + 70, y - 9);

      rotate(PI / 4);

      rect(0, 0, 20, 20, 0, 10, 0, 10); //left top

      rect(22, 0, 20, 20, 10, 0, 10, 0); //right top

      rect(22, 22, 20, 20, 0, 10, 0, 10); //right bottom

      rect(0, 22, 20, 20, 10, 0, 10, 0); //left bottom

      pop();

​

      //Rotated Shape Red

      fill("red");

      push();

      translate(x + 20, y + 40);

      rotate(PI / 4);

      rect(0, 0, 20, 20, 0, 10, 0, 10); //left top

      rect(22, 0, 20, 20, 10, 0, 10, 0); //right top

      rect(22, 22, 20, 20, 0, 10, 0, 10); //right bottom

      rect(0, 22, 20, 20, 10, 0, 10, 0); //left bottom

      pop();

    }

  }

}

​