p5.jsでパターンデザイン作成

const w=480; //画面の横幅
const N=4; //画面の横幅に対する円の個数
const d=w/N; //円の半径
const num = 12; // 円の数
col=["#004577","#fff"]; //円の色（配列）

function setup() {
   createCanvas(w, w);
   noStroke();
   noLoop();
}

function draw() {
   for(let j=0;j<N*4+2;j++){ // y座標の最後は円２個分を付け足す
      const y = d*j/4; //円のy座標の重なり

     //if文 2で割った時の余りが１
     //円のx座標を半径分ずらす or ゼロ 
     const dx = (j%2==1) ? d/2 : 0 ;

      for(let i=0;i<N+1;i++){
         const x = d*i;
         push();
         translate(x+dx, y); //x座標をdx分だけ移動
         for(let k=0;k<num;k++){
          fill(col[k%2]); //２で割った余り 0 or 1

           //translateで移動した位置を（0,0）として円を書く
           circle(0, 0, d*(1/num*(num-k)));
         }
         pop();
      }
   }
}

const w=400;
const N=9;
const d=w/N;
const col = ["#52b788", "#333"];

function setup() {
   createCanvas(w, w);
   noStroke();
   noLoop();
}

function draw() {
   for(let i=0;i<N;i++){
      const x = d*i;
      for(let j=0;j<N;j++){
         const y = d*j;
         push();
         translate(x, y);
         fill(col[(i+j)%2]);
         rect(0, 0, d);
         pop();
      }
   }
}

function setup() {
   createCanvas(400, 400);
 }
 
 function draw(){ 
   background(255);
   noStroke();
 
   const step = 20;
   
   for (let y = 0; y <= height; y += step) {
     if(y % (step*2) == 0){
       for (let x = 0 ; x <= width; x += step) {
         if(x % (step*2) == 0){ 
         fill('rgba(153,204,255,1)');
           rect(x, y, step, step);
         }else{ 
         fill('rgba(153,204,255,0.65)');
           rect(x, y, step, step);
         }
       }
     }else{
       for (let x = 0; x <= width; x += step*2) {
         fill('rgba(153,204,255,0.65)');
         rect(x, y, step, step);
       }
     }
   }
 }

const w = 500;
const h = 500;
const size   = 20;
const space  = 40;
const color1 = "#eac7cd";
const color2 = "#dd9dbf";


function setup() {
  createCanvas(w, h);
  background(color1);
}

function draw() {
  noStroke();

  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill(color2);
      heart(x, y, size);
    }
  }
}

function heart(x, y, size) {
  beginShape();
  vertex(x, y);
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size); //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);
}

const w=300; //正方形タイルの横長さの総合計
const N=6; //正方形タイルの枚数
const d=w/N; //正方形タイル１枚あたりの長さ
const col = ["#4cd64e", "#a6f2a7"];//タイルの色（配列）
const yohaku = 7; //タイルの余白


function setup() {
   createCanvas(w + (N-1)*yohaku,w + (N-1)*yohaku); //キャンバスサイズ
   noStroke();//タイルの枠線を書かない
   background(0, 0, 0) // 背景色（タイルの溝）
   noLoop();
}

function draw() {
   for(let i=0;i<N;i++){
      const x = (d+yohaku)*i; // 余白分を足したX座標
      for(let j=0;j<N;j++){
         const y = (d+yohaku)*j; // 余白分を足したY座標
         push();
         translate(x,y); //座標を移動
         fill(col[(i+j)%2]); //塗りつぶし色を設定、割り算で 0 or 1
         rect(0, 0, d);
         pop();
      }
   }
}