p5.js で様々なパターンを描画してみた


# 1. はじめに

**p5.js**とは、ProcessingをJavaScriptに移植したもので、
ビジュアルコーディングに特化したJavaScriptライブラリです。

p5.js 公式サイト
https://p5js.org/

今回は p5.jsを使用して、様々な模様を描いてみます。

# 2. 準備

まず最初に、p5.jsを使用するための準備をします。

## 2-1. p5.js 取得

p5.jsを使用するにあたって、htmlファイルに p5.jsを読み込ませる必要があります。

以下リンク先からp5.jsをダウンロードして読み込ませるか、CDNのリンクを貼り付けるか、どちらかの方法で、p5.jsを使用することができます。

p5.js： Download
https://p5js.org/download/

![スクリーンショット 2020-05-15 17.39.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/88602534-c755-46d8-b4d5-ac5920627f2f.png)

以下の画面で、p5.jsをローカルにダウンロードする場合は[p5.js]を、CDNのリンクを取得する場合は[CDN]をクリックします。

![スクリーンショット 2020-05-15 17.39.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/1d5f5f1c-21db-3f46-5759-7d86fbcb21e2.png)


今回はCDNリンクを使用して、p5.jsを読み込ませます。


※ 以下リンク先のテンプレートを使用することもできます。

CodePen： p5.jsテンプレート
https://codepen.io/p5js/pen/wreBKy

## 2-2. htmlファイル 作成

以下のような内容の htmlファイル（index.html)を作成します。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Creative Coding</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>
</body>
</html>
```

p5.jsを使用するにあたって、
前の手順[2-1. p5.js 取得]で取得したp5.jsと sketch.js を読み込ませます。

```html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>
```

p5.jsの読み込み にはCDNリンク(https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js) を使用します。

sketch.jsは、後の手順[2-3.jsファイル 作成] で配置します。

## 2-3. jsファイル 作成

描画処理を記述するjsファイル sketch.js を作成します。

下記に sketch.js の雛形を示します。

```sketch.js
function setup(){
  // 描画領域のセットアップ
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background(0);           //背景色: 黒
}

function draw(){
  // 描画
}
```

jsファイルは大まかに、**setup関数** と **draw関数**の2つで構成されます。

|関数|説明|
|:---:|:---|
|**setup()**|最初に1回実行される。主に描画領域のセットアップに使用される。|
|**draw()**|**setup関数**の後、繰り返し実行される。|


今回は、p5.jsを使用して模様を作成するために、
**setup関数**に描画領域を設定し、
**draw関数**に模様を描画する処理を記述します。

### ・ setup関数 

まず**setup関数**にて、
**createCanvas関数**で描画領域（キャンバス要素）を作成します。

また、画面に描画領域をわかりやすく表示するため、
**background関数**で描画領域の背景色を設定します。

|関数|説明|
|:---:|:---|
|**createCanvas()**|キャンバス要素を作成する。サイズはピクセル単位で設定する。|
|**background()**|キャンバスの背景に使用される色を設定する。デフォルトの背景は透明。|

### ・ draw関数

**draw関数**には、後ほど 様々な模様を描く処理を記述します。

### ・ ブラウザ表示

index.htmlをWebブラウザで開くと、以下のような画面が表示されます。

![スクリーンショット 2020-05-01 18.25.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/0e54df99-d1b8-c7e5-37ab-b4dd906e99f4.png)

**setup関数**で設定した通り、サイズ:800px × 500px、背景色:黒の 描画領域が表示されます。

# 3. コーディング

## 3-1. ボーダー

p5.jsを使用して、ボーダー柄を描きます。

###3-1-1. サンプル

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="haruka0121" data-slug-hash="KKwMgyY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="p5.js_Stripe1-1">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/KKwMgyY">
  p5.js_Stripe1-1</a> by Haruka Ogawa (<a href="https://codepen.io/haruka0121">@haruka0121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 3-1-2. 解説

以下に、ボーダー柄を描くための sketch.jsの内容を示します。

```sketch.js
function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}

function draw(){ 
  let border_width = 30;  //ボーダーの間隔
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width); //ストローク幅: ボーダーの間隔（stripe_width)
    stroke('#66CDAA');          //ストローク色: グリーン
    line(0, i, width, i);
  }
}
```

### ・ setup関数内 記述

**setup()**には、サイズ 800px × 500px、背景色 黒の 描画領域を設定します。

```js
function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}
```

### ・ draw関数内 記述

**draw()**には、ボーダー柄を描くための処理を記述します。

```js
function draw(){ 
  let border_width = 30;
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width);
    stroke('#66CDAA');
    line(0, i, width, i);
  }
}
```

ループ処理を使って、線を一定間隔で描画することで、ボーダー柄を作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/cf834847-092c-5f7c-352f-ae2927bfa287.png)


使用した関数は、以下の通りです。

|関数|説明|
|:---:|:---|
|**strokeWeight()**|図形のストローク幅を設定する。|
|**stroke()**|図形のストロークに使用する色を設定する。|
|**line()**|線（2点間の直接パス）を描画する。|

- **strokeWeight()**

**strokeWeight()**でストロークの幅を設定することができます。
**strokeWeight()**の構文は以下の通りです。

```js
strokeWeight(weight)
```

*weight*はストロークの太さで、ピクセル単位で指定します。

[参考]
p5.js Reference： strokeWeight()
https://p5js.org/reference/#/p5/strokeWeight


- **stroke()**

**stroke()**でストロークの色を設定することができます。
**stroke()**の構文は以下の通りです。

```js
stroke(value)
```

*value*はストロークの色で、ここではカラーコードで指定します。

[参考]
p5.js Reference： stroke()
https://p5js.org/reference/#/p5/stroke

- **line()**

**line()**で 始点・終点を指定し、線を描画することができます。
**line()**の構文は以下の通りです。

```js
line(x1, y1, x2, y2)
```

*x1*, *y1*は 始点のx, y座標、*x2*, *y2*は 終点のx, y座標 を指定します。

[参考]
p5.js Reference： line()
https://p5js.org/reference/#/p5/line

## 3-2. ストライプ

p5.jsを使用して、ストライプ柄を描きます。

### 3-2-1. サンプル

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="PowzGRa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="p5.js_Stripe2">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/PowzGRa">
  p5.js_Stripe2</a> by Haruka Ogawa (<a href="https://codepen.io/haruka0121">@haruka0121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### 3-2-2. 解説

以下に、ストライプ柄を描くための *sketch.js*の内容を示します。

```skech.js
function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}

function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke(); //ストローク無効化
    fill(250);  //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}
```

### ・ setup関数内 記述

**setup()**には、サイズ 800px × 500px、背景色 青（*#6666FF*）の 描画領域を設定します。

```js
function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}
```


### ・ draw関数内 記述

**draw()**には、ストライプ柄を描くための処理を記述します。

```js
function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke();  //ストローク無効化
    fill(250);   //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}
```

ループ処理を使って、長方形を一定間隔で描画することで、ストライプ柄を作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/58b5b08b-14ed-7af1-50e6-5cb8d9e8da33.png)


使用した関数は、以下の通りです。

|関数|説明|
|:---:|:---|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**rect()**|長方形を描画する。|

- **noStroke()**

**noStroke()**でストロークの描画を無効にすることができます。
**noStroke()**の構文は以下の通りです。

```js
noStroke()
```

[参考]
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke


- **fill()**

**fill()**で図形を塗りつぶす色を設定することができます。
**fill()**の構文は以下の通りです。

```js
fill(value)
```

[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

- **rect()**

**rect()**で 長方形を描画することができます。
**rect()**の構文は以下の通りです。

```js
rect(x, y, w, [h])
```

*x*,*y*は長方形のx,y 座標、
*w*は長方形の幅、
*h* （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect



## 3-3. 市松模様

p5.jsを使用して、市松模様を描きます。

### 3-3-1. サンプル

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="QWwWNXe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="p5.js_Checkered pattern">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/QWwWNXe">
  p5.js_Checkered pattern</a> by Haruka Ogawa (<a href="https://codepen.io/haruka0121">@haruka0121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 3-3-2. 解説

以下に、市松模様を描くための *sketch.js*の内容を示します。

```sketch.js
function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}

function draw(){             
  const step = 30; //各ブロックの間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{　 // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}
```

### ・ setup関数内 記述

**setup()**には、サイズ 800px × 500px、背景色 黒の 描画領域を設定します。

```js
function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}
```


### ・ draw関数内 記述

**draw()**には、市松模様描くための処理を記述します。

```js
function draw(){             
  const step = 30; //各ブロックの間隔
    
  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{  // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化 
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}
```

ここでもループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔のあけ方を２パターン作り、 
それぞれ交互に実行されるように条件文で制御します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/ed7682c3-a50d-5b7f-d23a-30d8482b3632.png)


使用した関数は、以下の通りです。

|関数|説明|
|:---:|:---|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**rect()**|長方形を描画する。|

- **noStroke()**

**noStroke()**でストロークの描画を無効にすることができます。
**noStroke()**の構文は以下の通りです。

```js
noStroke()
```

[参考]
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke


- **fill()**

**fill()**で図形を塗りつぶす色を設定することができます。
**fill()**の構文は以下の通りです。

```js
fill(value)
```

[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

- **rect()**

**rect()**で 長方形を描画することができます。
**rect()**の構文は以下の通りです。


```js
rect(x, y, w, [h])
```

*x*,*y*は長方形のx,y 座標、
*w*は長方形の幅、
*h* （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect


## 3-4. ギンガムチェック 

p5.jsを使用して、ギンガムチェック を描きます。

### 3-4-1. サンプル
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="rNaNLGw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="p5.js_Gingham check">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/rNaNLGw">
  p5.js_Gingham check</a> by Haruka Ogawa (<a href="https://codepen.io/haruka0121">@haruka0121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 3-4-2. 解説

以下に、ギンガムチェック を描くための *sketch.js*の内容を示します。

```sketch.js
function setup() {
  createCanvas(800, 500); //サイズ
}

function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔
    
  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){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}
```

### ・ setup関数内 記述

**setup()**には、サイズ 800px × 500px の 描画領域を設定します。

```js
function setup() {
    createCanvas(800, 500); //サイズ
}
```


### ・ draw関数内 記述

**draw()**には、ギンガムチェックを描くための処理を記述します。

```js
function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔
    
  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){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}
```

ここでは **setup関数**ではなく、**draw関数**内で背景色を設定（**background関数**）します。

ループ処理を使って、正方形を一定間隔を開けて描画します。
正方形の色は３色使用し、
条件文を使って、一定のルールでそれぞれ描画するように制御します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/f4d0ff21-bb3d-8e0d-fede-3470e9696e17.png)


使用した関数は、以下の通りです。

|関数|説明|
|:---:|:---|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**rect()**|長方形を描画する。|

- **noStroke()**

**noStroke()**でストロークの描画を無効にすることができます。
**noStroke()**の構文は以下の通りです。

```js
noStroke()
```

p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke


- **fill()**

**fill()**で図形を塗りつぶす色を設定することができます。
**fill()**の構文は以下の通りです。

```js
fill(v1, v2, v3, [alpha])
```

*v1*・*v2*・*v3*はRGB値、
*alpha*は透明度
を指定します。

[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

- **rect()**

**rect()**で 長方形を描画することができます。
**rect()**の構文は以下の通りです。


```js
rect(x, y, w, [h])
```

*x*,*y*は長方形のx,y 座標、
*w*は長方形の幅、
*h* （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect


## 3-5. ドット

p5.jsを使用して、ドット柄を描きます。

### 3-5-1. サンプル

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="VwYwaMW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="p5.js_Dot pattern">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/VwYwaMW">
  p5.js_Dot pattern</a> by Haruka Ogawa (<a href="https://codepen.io/haruka0121">@haruka0121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 3-5-2. 解説

以下に、ドット柄を描くための *sketch.js*の内容を示します。

```sketch.js
function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}

function draw(){
    noStroke();       //ストローク無効化        
    
    const step = 50; 
    
    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}
```

### ・ setup関数内 記述

**setup()**には、サイズ 800px × 500px、背景色 レッド（*'red'*）の 描画領域を設定します。

```js
function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}
```


### ・ draw関数内 記述

**draw()**には、ドット柄を描くための処理を記述します。

```js
function draw(){
    noStroke();       //ストローク無効化            
    
    const step = 50;
    
    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}
```

ループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔の開け方を２パターン作り、 
それぞれ交互に実行されるように条件文で制御します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/a787ce1a-87bd-8f05-a3a2-bf1599762eea.png)


使用した関数は、以下の通りです。

|関数|説明|
|:---:|:---|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**ellipse()**|楕円を描画する。|

- **noStroke()**

**noStroke()**でストロークの描画を無効にすることができます。
**noStroke()**の構文は以下の通りです。

```js
noStroke()
```
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke


- **fill()**

**fill()**で図形を塗りつぶす色を設定することができます。
**fill()**の構文は以下の通りです。

```js
fill(value)
```

p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

- **ellipse()**

**ellipse()**で楕円を描画することができます。
**ellipse()**の構文は以下の通りです。

```js
ellipse(x, y, w, [h])
```

*x*, *y*は 楕円の中心のx, y座標、
*w*は楕円の幅、
*h*（オプション）は楕円の高さ
を指定します。

p5.js Reference： ellipse()
https://p5js.org/reference/#/p5/ellipse


# 4. おわりに

今回は、p5.jsを使用して様々な模様を描いてみました。

ここでは ボーダー柄はline()、ストライプ柄はrect()を使って描画していますが、
逆にボーダー柄をrect()、ストライプ柄をline()で描画することも可能ですし、
同じ模様でも パターンの作成方法はたくさんあると思います。

p5.js 公式サイトを見ると、線・四角形・円形以外にも 様々な図形が描けるようですので、
組み合わせ次第で いろんなパターンが作成できると思います。


# 参考情報

p5.js 公式サイト
https://p5js.org/

p5.js overview
https://github.com/processing/p5.js/wiki/p5.js-overview

p5.js：Examples
https://p5js.org/examples/

ホームページ　作成、運営管理ガイド：カラーコード一覧表
http://www.netyasun.com/home/color.html