CUSTOM BATIK-LIKE PATTERN

​

- i want to create a shape, a combination of circle() and square()

​

- i want to fill() the circle() with certain color pallette, noStroke()

​

- the square() only has stroke() with certain color pallette

​

- i want to create a custom function() to generate variant of the shape

​

- i want to cover the entire canvas with the custom shape.

​

*/

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  // translate(width / 2, height / 2); // everything start in the middle

​

  let sizeSpace = 80;

  let gap = sizeSpace / 2;

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

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

      batikLike(gap + x, gap + y, sizeSpace)

    }

  }

​

}

​

function batikLike(x, y, r) {

​

  push()

  translate(x, y); //pass on x and y here instead of

  rotate(45)

  noFill();

  stroke(0, 0, 255);

  strokeWeight(2)

  square(0, 0, r - 20);

  pop()

  noFill();

  stroke(150, 80, 255);

  square(x, y, r);

​

  noStroke();

  fill(255, 0, 150);

  circle(x, y, r - 20);

}

​