const colors = ["#f82f1d","#fcad2a","#1c80b4","#ffe7c1","#0d0e08"]

​

// bauhaus?ぽいものを作る

function setup() {

  createCanvas(800, 800);

  pg = createGraphics(width, height);

  pg.noStroke();

}

​

function draw() {

  background("#0d0e08");

  stripe();

  grid(5,pg);

  image(pg,0,0);

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

    saveCanvas(canvas, 'canvas', 'png');

  }

};

​

​

// 参考：https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124

const stripe = () =>{

  let stripe_width = 10;

  noStroke();

  fill(220);

  for(let i=0; i<width; i+=stripe_width*5){

    rect(i, 0, stripe_width, height);

  }

}

​

  /** num個で分割したグリッドを画面いっぱいに生成する

   * @method grid

   * @param  {Number}        num           画面の分割数

   */

  const grid = (num, pg) => {

    const n1 = num + 1;

​

    const margin_left = width / n1 / n1;

    const margin_bottom = height / n1 / n1;

​

    const nw = width / n1;

    const nh = height / n1;

​

    for (let i = 0; i < num; i++) {

      for (let j = 0; j < num; j++) {

        const x = nw * i + margin_left * (i + 1);

        const y = nh * j + margin_bottom * (j + 1);

        pg.fill(random(colors));

        const rand = random(0,1);

        if(rand > 0.4 && rand < 0.8){

          pg.circle(x + nw / 2, y + nw / 2, nw); 

        }else if(rand <0.4){

          pg.rect(x,y,nw,nw);

        }else{

          pg.circle(x + nw / 2, y + nw / 2, nw); 

          pg.rect(x,y,nw,nw/2);

        }

      }

    }

};

​