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


# 1. はじめに

以下Qiita記事の続きになります。

Qiita：p5.js で様々なパターンを描画してみた
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124

今回は **p5.js** を使用して、ハート柄・星柄を描画します。

# 2. 準備

p5.jsを使用するにあたって、
以下Qiita記事の第２項 を参考に準備します。

Qiita：p5.js で様々なパターンを描画してみた > [2. 準備]
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124#2-%E6%BA%96%E5%82%99

# 3. コーディング

## 3-6. ハート柄

**p5.js** を使用して、ハート柄を描きます。

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

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="bGNeZYq" 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_Heart pattern">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/bGNeZYq">
  p5.js_Heart 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://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### 3-6-2. 解説

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

```sketch.js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}

function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔
  
  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      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);  //ハート描画終了
}
```

#### ・ setup関数内 記述

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

```js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}
```

#### ・ draw関数内 記述

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

```js

function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔
  
  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      heart(x, y, size);  //ハート描画
    }
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/ad2a1a06-e842-558c-1e45-f634bfc0cb71.png)

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

|関数|説明|
|:-----------:|:------------|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**heart()**|ハートを描画する。**draw()**の後で**heart()**の処理内容を記述する。|
	
- **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


- **heart()**

ハートを描画する**heart()**を、この後 作成します。


#### - heart関数内 記述

**heart()**には、ハートを描くための処理を記述します。

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg


```js
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);  //ハート描画終了
}
```

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

|関数|説明|
|:---:|:-----|
|**beginShape()**|複雑な図形描画の開始。|
|**vertex()**|図形の頂点座標を指定する。**beginShape()**および**endShape()**内で使用できる。|
|**bezierVertex()**|ベジェ曲線の頂点座標を指定する。|
|**endShape()**|複雑な図形描画の終了。|

- **beginShape()**

**beginShape**() と **endShape()** を使用して、複雑な図形を描画することができます。
**beginShape()** は図形の頂点の記録を開始します。

 **beginShape()**の構文は以下の通りです。

```js
beginShape()
```

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


- **vertex()**

**vertex()**は、
**beginShape()**および**endShape()**関数内で、図形の頂点座標を指定します。 
**vertex()**の構文は以下の通りです。

```js
vertex(x, y)
```

**x**に頂点の*x*座標、**y**に頂点の*y*座標を指定します。

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


- **bezierVertex()**

**bezierVertex()**で ベジェ曲線の頂点座標を指定します。

 **bezierVertex()**の構文は以下の通りです。

```js
bezierVertex(x2, y2, x3, y3, x4, y4)
```

**x2**, **y2**に 最初の制御点の*x*,*y*座標、 **x3**, **y3**に ２つ目の制御点の*x*,*y*座標、 **x4**, **y4**に 最後の制御点の*x*,*y*座標 を指定します。

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


- **endShape()**

**endShape()**で複雑な図形を描画を終了します。
**endShape()**で、**beginShape()**の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

**endShape()**の構文は以下の通りです。

```js
endShape([mode])
```

**mode**に *CLOSE* を使用して形状を閉じます。

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


## 3-7. 星柄

p5.jsを使用して、星柄を描きます。

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

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="haruka0121" data-slug-hash="NWProeG" 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_Star Pattern">
  <span>See the Pen <a href="https://codepen.io/haruka0121/pen/NWProeG">
  p5.js_Star 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://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 3-7-2. 解説

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

```sketch.js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}

function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔
  
  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}

function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //星の頂点座標:(sx1,sy1)

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2); //星の頂点座標:(sx2,sy2)
  }
  endShape(CLOSE);  //星描画終了
}

```

#### ・setup関数内 記述

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

```js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}
```

#### ・ draw関数内 記述

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

```js
function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔
  
  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/0675137b-cee6-c110-e4bf-77c85f59d2e4.png)


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

|関数|説明|
|:---:|:-----|
|**noStroke()**|ストロークの描画を無効にする。|
|**fill()**|図形を塗りつぶす色を設定する。|
|**star()**|星を描画する。**draw()** の後で **star()** の処理内容を記述する。|
	
- **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

- **star()**

星を描画する**star**()を、この後 作成します。


#### ・ star関数内 記述

**star**()には、星を描くための処理を記述します。

p5.js examples: Star 
https://p5js.org/examples/form-star.html

```js
function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //頂点座標

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2);  //頂点座標
  }
  endShape(CLOSE);  //星描画終了
}
```

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

|関数|説明|
|:---:|:-----|
|**beginShape()**|複雑な図形描画の開始。|
|**vertex()**|図形の頂点座標を指定する。**beginShape()**および**endShape()**関数内で使用できる。|
|**endShape()**|複雑な図形描画の終了。|
	
- **beginShape()**

**beginShape()** と **endShape()** を使用して、複雑な図形を描画することができます。
**beginShape()** は図形の頂点の記録を開始します。

**beginShape()**の構文は以下の通りです。

```js

beginShape()
```

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

- **vertex()**

**vertex**()は、**beginShape**()および**endShape**()関数内で、図形の頂点座標を指定することができます。

 **vertex**()の構文は以下の通りです。

```js
vertex(x, y)
```

**x**に頂点の*x*座標、**y**に頂点の*y*座標を指定します。

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

- **endShape()**

**endShape**()で複雑な図形を描画を終了します。
**endShape**()で、**beginShape**()の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

 **endShape**()の構文は以下の通りです。

```js
endShape([mode])
```

**mode**に*CLOSE*を使用して形状を閉じます。

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

# 4. おわりに

今回は **p5.js** を使用して ハート柄・星柄を描画しました。

前回より 少し複雑な描画となりましたが、
使い方次第で 様々な図形を描画できて、自由度の高さを感じました。

# 参考情報

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

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg

p5.js examples: Star 
https://p5js.org/examples/form-star.html