p5.js leading guide　

##p5.js keyword

P5js公式を読むための個人的道しるべ

[editor](https://editor.p5js.org/)
[sample code](http://www.bnn.co.jp/support/generativedesign_p5js/)
[reference](https://p5js.org/reference/)


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">最初に</font></summary>
<div>

1. まず<font color="lightseagreen">setup()</font>で描画領域を決める。  
2. <font color="lightseagreen">draw()</font>で描画実行。  
3. <font color="lightseagreen">draw()</font>の中に描きたいものを置く

<font color="lightseagreen"></font>



</div>
</details>

<!-- ====================================================== -->

基本
---------------------------------------------------------------

<!--
<font color="DeepPink">function </font>
-->

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ディスプレイ領域サイズの設定</font>
　<font color="DeepPink">function </font>setup()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/setup)  
ディスプレイ領域サイズの設定

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">コマンドの実行</font>
　<font color="DeepPink">function </font>draw()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/draw)  
毎描画ステップごとに呼び出され、そのたびに関数内のすべてのコマンドを実行

この関数があることで、プログラムが動き続ける
たとえ空であっても

```javascript:例
// frameCountがカウントし続けている
function draw() {
  console.log(frameCount)
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">外部ファイルの先読み込み</font>
　<font color="DeepPink">function </font>preload()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/preload)  
外部ファイルの先読み込み
`preload()`関数が定義されている場合、`setup()`は、preload()呼び出しが終了するまで待機します

```javascript:例
function preload() {
  // preload() runs once
  img = loadImage('assets/laDefense.jpg');
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">canvasの作成</font>
　createCanvas()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/createCanvas)  
canvasの作成
数値で指定

```javascript:
// 画面いっぱい
createCanvas(windowWidth, windowHeight);
```
---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">カーソルを非表示</font>
　noCursor()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/noCursor)  
カーソルを非表示

---
</div>
</details>


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">現在のキャンバスを画像として保存</font>
　saveCanvas（）</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/saveCanvas)  
現在のキャンバスを画像として保存

```javascript:例
saveCanvas(selectedCanvas, [filename], [jpgまたはpng])
saveCanvas([filename], [jpgまたはpng])

// 例:Sキーを押したら保存
function keyPressed() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">描画キャンバスの幅及び高さ</font>
　width / height</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/height)  
描画キャンバスの幅及び高さを格納するシステム変数。
`createCanvas()関数`のパラメーターによって設定されます。

```javascript:例
 createCanvas(width, height)
```

---
</div>
</details>

<!-- ====================================================== -->

描画・描画モード
---------------------------------------------------------------

描画モードを設定した場合、上書きされるまでその指示が継続する


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">カラーモデルの設定</font>
　colorMode()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/colorMode)  
カラーモデルの設定

```javascript
colorMode(HSB, 360, 100, 100);
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">矩形の解釈を指定</font>
　rectMode();</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/rectMode)
`rect（）`に指定されたパラメーターの解釈方法の指定

```javascript
rectMode(CORNER) // Default
rect(x,y,width,height) // 左上１点と幅高さを指定

rectMode(CORNERS)
rect(x,y,x,y) // 対角線のコーナーを指定

rectMode(CENTER)
rect(x,y,width,height) // 中心点と幅高さを指定

rectMode(RADIUS)
rect(x,y,width,height) // 中心点と幅高さ(半分)を指定
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">１点の指定</font>
　point()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/point)
x,yで示す１点を指定

```javascript:例
point(x, y);
```

---
</div>
</details>


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">塗りつぶし</font>
　fill()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/fill)
図形の塗りつぶしに使用する色を設定
fillコマンドの後に描画されたすべての図形に、指定した色が適用される

```javascript:例
fill(51);
// colorMode(HSB);
fill(255, 204, 100);
fill('red');
fill('#fae');
fill('#222222');
fill('rgb(0,255,0)');
fill('rgba(0,255,0, 0.25)');
fill('rgb(100%,0%,10%)');
fill('rgba(100%,0%,100%,0.5)');
fill(color(0, 0, 255));
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">アウトライン無し</font>
　noStroke()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/noStroke)
ストローク（アウトライン）の描画を無効にします
べた塗のみの図形を描きたいとき

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">矩形（四角）</font>
　rect()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/rect)
長方形の描画
パラメータの解釈方法は`rectMode（）`に依存

```javascript:例
rect(30, 20, 55, 55); 
// 左上の1点、右下の1点を指定
rect(30, 20, 55, 55, 20); 
// 左上の1点、右下の1点を指定 ＋ 角丸20
rect(30, 20, 55, 55, 20, 15, 10, 5);
// 左上の1点、右下の1点を指定 ＋ 時計回りに角丸個別指定
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">円</font>
　ellipse()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/ellipse)
円の描画。原点は`ellipseMode（）`関数で変更

```javascript:例
ellipse(56, 46, 55, 55); // 中心点と、幅と高さ
// ellipse(x, y, w, h) wとhが同じなら正円
```

---
</div>
</details>


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">多角形？</font>
　beginShape() / endShape()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/beginShape)  
`beginShape()`は形状の頂点の記録を開始し、`endShape()`は記録を停止します  
パラメーターの値は、指定された頂点から作成する形状のタイプを示します  
**使用できるパラメーター**

|パラメータ||
|:--|:--|
|POINTS|点|
|LINES|線|
|TRIANGLES|三角|
|TRIANGLE_FAN|扇形|
|TRIANGLE_STRIP|じぐざぐ|
|QUADS|独立した四角|
|QUAD_STRIP|ぴったり並んだ四角|

```javascript:例
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();

```

---
</div>
</details>


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ポリゴンの頂点座標</font>
　vertex()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/vertex)
ポイント、ライン、三角形、四角形、ポリゴンの頂点座標を指定するために使用  
beginShape() / endShape()の中でのみ使用

```javascript:例
createCanvas(100, 100, WEBGL);
background(240, 240, 240);
fill(237, 34, 93);
noStroke();
beginShape();
vertex(0, 35);
vertex(35, 0);
vertex(0, -35);
vertex(-35, 0);
endShape();
```

---
</div>
</details>

<!-- ====================================================== -->

変形
---------------------------------------------------------------


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">移動</font>
　translate()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/translate)
オブジェクトの移動
続けて指示した場合、移動量は累積されていく

```javascript:例
translate(x, y, [z])
translate(vector)

rect(0, 0, 55, 55); // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55); // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55); // Draw rect at new 0,0
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">回転</font>
　rotate()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>]()
オブジェクトの回転
整数で時計回り
p5.jsは、角度をラジアンで扱う

|定数|||
|:--|:--|:--|
|**TWO_PI**|2πラジアンは360°と同じ角度|6.2831|
|**PI**|円周率πの値180°と同じ角度|3.1415|
|**HALF_PI**|πの半分の値直角90°と同じ角度|1.5707|
|**QUARTER_PI**|πの4分の1の値|0.7853|

```javascript:例
rotate(angle, [axis])

translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 52, 52);
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">拡縮</font>
　scale()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/scale)
頂点を拡大および縮小することにより、
シェイプのサイズを拡大または縮小
変換は、その後に発生するすべてに適用される

**関数への後続の呼び出しは効果を増加**
cale(2.0)を呼び出してからscale(1.5)を呼び出すことは、scale(3.0)と同じ

```javascript:例
scale(s, [y], [z])

rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

rect(30, 20, 50, 50);
scale(0.5, 1.3);
rect(30, 20, 50, 50);
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">マッピング</font>
　map()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/map)
ある範囲から別の範囲に数値を再マッピング



```javascript:例
map(value, start1, stop1, start2, stop2, [withinBounds])

value Number // 変換される入力値
start1 Number // 値の現在の範囲の下限
stop1 Number // 値の現在の範囲の上限
start2 Number // 値のターゲット範囲の下限
stop2 Number // 値のターゲット範囲の上限
withinBounds Boolean // 値を新しくマッピングされた範囲に制限する(Optional)

// マウスを追ってスピード違いの横移動
function draw() {
  background(204);
  // 0～画面幅であったものを、25～75に再マッピング
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  // 0～画面幅であったものを、0～100に再マッピングし、
  // 再マッピング範囲から出ないように制御
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}

// マウス移動で得られる数値を、2～100に制御
map(mouseX, 0, width, 2, 100)
```

---
</div>
</details>

<!-- ====================================================== -->

計算
---------------------------------------------------------------

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">切り上げ　切り下げ　四捨五入</font>
　ceil() / floor() / round()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/round)
**切り上げ　切り下げ　四捨五入**  
切り上げ`eil（9.03）`は値10を返します
切り下げ`floor（133.8）`は値133を返します
四捨五入`round（133.8）`は値134を返します

```javascript:例
ceil（n） // nパラメータの値以上の最も近い整数を計算
floor（n） // nパラメーターの値以下の最も近い整数を計算
round(n) // nパラメーターに最も近い整数を計算
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ランダム</font>
　random()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/random)
ランダムな浮動小数点数を返します
引数が指定されていない場合は、0から1までの乱数を返します（ただし、1は含みません）

```javascript:例
random([min], [max])
random(choices)

// 50までのランダムな数値
for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">角度の余弦</font>
　cos()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/cos)
角度の余弦を計算、値は-1〜1の範囲で返される

```javascript:例
cos(angle)

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ラジアン</font>
　弧度法</summary>
<div>

[<font color="LightSeaGreen">reference>></font>](https://juken-mikata.net/how-to/mathematics/radian.html)
**rad（ラジアン）= 弧度法**
180°=π[rad]

「円（扇形）の孤の長さ(L)÷円の半径(r)」によって求められる値

```:例
90° = 90 ×（π/180）= π/2
60° = 60 ×（π/180）= π/3
30° = 30 ×（π/180）= π/6

π/4  = 180° ÷ 4 = 45°
2π/3 = 2 × 180° ÷ 3 = 120°
3π/2 = 3 × 180° ÷ 2 = 270°
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">三角関数</font>
　sinθ　cosθ　tanθ</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://juken-mikata.net/how-to/mathematics/sin-cos-tan.html)


```:三角関数
小辺 = 1
中辺 = 2
大辺 = √3（1.732）

sinθ(中度) = （大辺）割（小辺）
cosθ(小度) = （大辺）割（中辺）
tanθ(90度) =　（中辺）割（小辺）

sin2θ + cos2θ = 1
tanθ = sinθ/cosθ
1 + tan2θ = 1/cos2θ
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ルート</font>
　平方根</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://calculator.jp/science/squareroot/)

[<font color="LightSeaGreen">reference>></font>]()

**ａ ＝ ｂ2乗の時、 ａ に対する ｂ のこと。二乗根。例、９の平方根は３および−３.**
※マイナスの2乗はプラスになるので、マイナスもプラスも平方根

`平方` = 同じ数字を2回掛ける
`xの平方根` = 2回掛けると、xになる数字

図形で考えると、「面積が9の正方形の一辺はいくつになるかを計算する」が、平方根を求めることに対応。

```javascript:例
√9 = 3
√10 = 約3.16
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">最大値 / 最小値</font>
　max() / min()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/max)
引数を比較して最大値 / 最小値を返す

```javascript:例
max(n0, n1)
max(nums)

min(n0, n1)
min(nums)

max(5, 9) // この場合9を返す
var a = [3, 1, 4, 1, 5, 9, 2, 6];
Math.max.apply(null, a);  // → 9
Math.min.apply(null, a);  // → 1
```

---
</div>
</details>



<!-- ====================================================== -->

マウスとキーボード
---------------------------------------------------------------

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">マウスの現在の位置</font>
　mouseX / mouseY</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/mouseX)
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/mouseY)
`mouseX`canvasの(0, 0) に対するマウスの現在の水平位置
`mouseY`canvasの(0, 0) に対するマウスの現在の垂直位置  
マウス入力の代わりにタッチが使用される場合、`mouseX/mouseY`は最新のタッチポイントの`x値/Y値`を保持  
`2D`の場合は(0, 0) 
`WebGL`の場合は (-width/2, -height/2)

```javascript:例
function draw() {
  background(244, 248, 252);
  line(mouseX, 0, mouseX, 100);
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">マウスを押す</font>
　mouseIsPressed</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/mouseIsPressed)

マウスが押されている場合はtrue、押されていない場合はfalse

```javascript:例
function draw() {
  background(237, 34, 93);
  fill(0);

  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }

  print(mouseIsPressed);
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">マウスボタンを離す</font>
　<font color="DeepPink">function </font>mouseReleased()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/mouseReleased)
マウスボタンを離したときに呼び出される  
デフォルト動作で不具合が起きないよう末尾に`return false`をつけること

```javascript:例
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mouseReleased() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

function mouseReleased() {
  ellipse(mouseX, mouseY, 5, 5);
  // prevent default
  return false;
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">キーを押す</font>
　<font color="DeepPink">function </font>keyPressed()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/keyPressed)
`keyPressed()関数`は、キーが押されるたびに一度と呼ばれ、押されたキーの`keyCode`は、`keyCode変数`に保存されます  
ASCIIキーの場合、大文字小文字を区別してくれる`keyTyped()`の方がよい

|keyCode変数||||
|:--|:--|:--|:--|
|BACKSPACE|DELETE|ENTER|RETURN|
|TAB|ESCAPE|SHIFT|CONTROL|
|OPTION|ALT|||
|UP_ARROW|DOWN_ARROW|||
|LEFT_ARROW|RIGHT_ARROW|||

```javascript:例
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    value = 255;
  } else if (keyCode === RIGHT_ARROW) {
    value = 0;
  }
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">キーを押す</font>
　<font color="DeepPink">function </font>keyTyped()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/keyTyped)
ASCIIキーの場合、大文字小文字を区別するのでkeyTyped()を追加うのが良い  
非ASCIIキーの場合は無視されるので、`keyPressed()`で

```javascript:例
let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function keyTyped() {
  if (key === 'a') {
    value = 255;
  } else if (key === 'b') {
    value = 0;
  }
  // uncomment to prevent any default behavior
  // return false;
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">最後に押されたキー</font>
　key</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/key)
最後に押された最新の`key`を格納

```javascript:例
function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}
```

---
</div>
</details>

<!-- ====================================================== -->

データ
---------------------------------------------------------------


<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">JSONファイルをロード</font>
　loadJSON()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/loadJSON)
ファイルまたはURLからJSONファイルをロードし、オブジェクトを返します。
このメソッドは非同期です。つまり、スケッチの次の行が実行される前に終了しない場合があります。

```javascript:例
loadJSON(path, [jsonpOptions], [datatype], [callback], [errorCallback])
loadJSON(path, datatype, [callback], [errorCallback])
loadJSON(path, callback, [errorCallback])

// 下記のように使う場合、
// 非同期ロードの後完全にロードされてから
// callback関数が呼ばれる
loadJSON("myData.json", callback)
function callback(data){
  console.log(data);
}
```

---
</div>
</details>

<!-- ★★★--------------------------------------------- -->
<details><summary><font color="darkcyan">ピクセルを格納</font>
　loadPixels() / updatePixels()</summary>
<div>
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/loadPixels)
[<font color="LightSeaGreen">reference>></font>](https://p5js.org/reference/#/p5/updatePixels)
画像を呼び出す

`loadPixels()`で、表示ウインドウのピクセルデータを`pixels[] 配列`に格納  
`updatePixels()`で配列情報の更新

```javascript:例
code
```

[topics:b-05 ピクセルを操作する](http://www.d-improvement.jp/learning/processing/2011-b/05.html)

---
</div>
</details>