Generating Patterns

  by Qingyun Zhu

  11.14.2022

*/

​

var columnSlider, rowSlider;

​

function setup() {

  createCanvas(400, 400);

  var saveImageButton = createButton("Save Image");

  saveImageButton.mousePressed(saveImage);

  columnSlider = createSlider(1, 100, 10);

  rowSlider = createSlider(1, 100, 10);

  columnSlider.input(pattern);

  rowSlider.input(pattern);

  pattern();

}

function star(x,y,radius)

  {

    push();

    translate(x,y);

    for(i=0;i<5;i++)

      {

        rotate(PI*72/180);

        bezier(radius/2,0,2,-1.5*radius,-2,-1.5*radius,-radius/2,0);

      }

    pop()

  }

​

function saveImage() {

  save("star_image.jpg");

}

​

​

function pattern() {

  background(220);

  let cols = columnSlider.value();

  let rows = rowSlider.value();

  let w = width / cols; // width of one column

  let h = height / rows; // height of one row

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

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

​

      push();

      translate(x, y);

      // randomize color

      var r = random(256);

      var g = map(y, 0, height, 0, 256);

      var b = random(256);

      fill(r, g, b);

      stroke(r, g, b);

      let sh = round(random(1, 3)); //shape

      if (sh === 1) {

        strokeWeight(5);

        line(w/2, 0, w/10*9, h);

        line(w/2, 0, w/10, h);

        line(0, h/2.5, w, h/2.5);

        line(w/10, h, w, h/2.5);

        line(0, h/2.5, w/10*9, h);

      } else if (sh === 2) {

        star(w,h,20);

      } else if (sh === 3) {

        noFill();

        strokeWeight(5);

        line(w/6.5,0,w/6.5,h/4);

        line(w/20,h/10,w/5,h/10);

      }

      pop();  

      }

    }

}

​

​

​

​