p5.js leading guide

##p5.js keyword

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

editor
sample code
reference

最初に

1. まずsetup()で描画領域を決める。
2. draw()で描画実行。
3. draw()の中に描きたいものを置く

基本

ディスプレイ領域サイズの設定 　function setup()

[reference>>](https://p5js.org/reference/#/p5/setup) ディスプレイ領域サイズの設定

---

コマンドの実行 　function draw()

[reference>>](https://p5js.org/reference/#/p5/draw) 毎描画ステップごとに呼び出され、そのたびに関数内のすべてのコマンドを実行

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

例

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

---

外部ファイルの先読み込み 　function preload()

[reference>>](https://p5js.org/reference/#/p5/preload) 外部ファイルの先読み込み `preload()`関数が定義されている場合、`setup()`は、preload()呼び出しが終了するまで待機します

例

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

---

canvasの作成 　createCanvas()

[reference>>](https://p5js.org/reference/#/p5/createCanvas) canvasの作成 数値で指定

// 画面いっぱい
createCanvas(windowWidth, windowHeight);

---

カーソルを非表示 　noCursor()

[reference>>](https://p5js.org/reference/#/p5/noCursor) カーソルを非表示

---

現在のキャンバスを画像として保存 　saveCanvas（）

[reference>>](https://p5js.org/reference/#/p5/saveCanvas) 現在のキャンバスを画像として保存

例

saveCanvas(selectedCanvas, [filename], [jpgまたはpng])
saveCanvas([filename], [jpgまたはpng])

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

---

描画キャンバスの幅及び高さ 　width / height

[reference>>](https://p5js.org/reference/#/p5/height) 描画キャンバスの幅及び高さを格納するシステム変数。 `createCanvas()関数`のパラメーターによって設定されます。

例

 createCanvas(width, height)

---

描画・描画モード

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

カラーモデルの設定 　colorMode()

[reference>>](https://p5js.org/reference/#/p5/colorMode) カラーモデルの設定

colorMode(HSB, 360, 100, 100);

---

矩形の解釈を指定 　rectMode();

[reference>>](https://p5js.org/reference/#/p5/rectMode) `rect（）`に指定されたパラメーターの解釈方法の指定

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) // 中心点と幅高さ(半分)を指定

---

１点の指定 　point()

[reference>>](https://p5js.org/reference/#/p5/point) x,yで示す１点を指定

例

point(x, y);

---

塗りつぶし 　fill()

[reference>>](https://p5js.org/reference/#/p5/fill) 図形の塗りつぶしに使用する色を設定 fillコマンドの後に描画されたすべての図形に、指定した色が適用される

例

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));

---

アウトライン無し 　noStroke()

[reference>>](https://p5js.org/reference/#/p5/noStroke) ストローク（アウトライン）の描画を無効にします べた塗のみの図形を描きたいとき

---

矩形（四角） 　rect()

[reference>>](https://p5js.org/reference/#/p5/rect) 長方形の描画 パラメータの解釈方法は`rectMode（）`に依存

例

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点を指定 ＋ 時計回りに角丸個別指定

---

円 　ellipse()

[reference>>](https://p5js.org/reference/#/p5/ellipse) 円の描画。原点は`ellipseMode（）`関数で変更

例

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

---

多角形？ 　beginShape() / endShape()

[reference>>](https://p5js.org/reference/#/p5/beginShape) `beginShape()`は形状の頂点の記録を開始し、`endShape()`は記録を停止します パラメーターの値は、指定された頂点から作成する形状のタイプを示します **使用できるパラメーター**

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

例

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();

---

ポリゴンの頂点座標 　vertex()

[reference>>](https://p5js.org/reference/#/p5/vertex) ポイント、ライン、三角形、四角形、ポリゴンの頂点座標を指定するために使用 beginShape() / endShape()の中でのみ使用

例

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();

---

変形

移動 　translate()

[reference>>](https://p5js.org/reference/#/p5/translate) オブジェクトの移動 続けて指示した場合、移動量は累積されていく

例

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

---

回転 　rotate()

[reference>>]() オブジェクトの回転 整数で時計回り p5.jsは、角度をラジアンで扱う

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

例

rotate(angle, [axis])

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

---

拡縮 　scale()

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

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

例

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);

---

マッピング 　map()

[reference>>](https://p5js.org/reference/#/p5/map) ある範囲から別の範囲に数値を再マッピング

例

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)

---

計算

切り上げ　切り下げ　四捨五入 　ceil() / floor() / round()

[reference>>](https://p5js.org/reference/#/p5/round) **切り上げ　切り下げ　四捨五入** 切り上げ`eil（9.03）`は値10を返します 切り下げ`floor（133.8）`は値133を返します 四捨五入`round（133.8）`は値134を返します

例

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

---

ランダム 　random()

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

例

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);
}

---

角度の余弦 　cos()

[reference>>](https://p5js.org/reference/#/p5/cos) 角度の余弦を計算、値は-1〜1の範囲で返される

例

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;
}

---

ラジアン 　弧度法

reference>>
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°

---

三角関数 　sinθ　cosθ　tanθ

[reference>>](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θ

---

ルート 　平方根

[reference>>](https://calculator.jp/science/squareroot/)

reference>>

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

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

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

例

√9 = 3
√10 = 約3.16

---

最大値 / 最小値 　max() / min()

[reference>>](https://p5js.org/reference/#/p5/max) 引数を比較して最大値 / 最小値を返す

例

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

---

マウスとキーボード

マウスの現在の位置 　mouseX / mouseY

[reference>>](https://p5js.org/reference/#/p5/mouseX) [reference>>](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)

例

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

---

マウスを押す 　mouseIsPressed

[reference>>](https://p5js.org/reference/#/p5/mouseIsPressed)

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

例

function draw() {
  background(237, 34, 93);
  fill(0);

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

  print(mouseIsPressed);
}

---

マウスボタンを離す 　function mouseReleased()

[reference>>](https://p5js.org/reference/#/p5/mouseReleased) マウスボタンを離したときに呼び出される デフォルト動作で不具合が起きないよう末尾に`return false`をつけること

例

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;
}

---

キーを押す 　function keyPressed()

[reference>>](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

例

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;
  }
}

---

キーを押す 　function keyTyped()

[reference>>](https://p5js.org/reference/#/p5/keyTyped) ASCIIキーの場合、大文字小文字を区別するのでkeyTyped()を追加うのが良い 非ASCIIキーの場合は無視されるので、`keyPressed()`で

例

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;
}

---

最後に押されたキー 　key

[reference>>](https://p5js.org/reference/#/p5/key) 最後に押された最新の`key`を格納

例

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

---

データ

JSONファイルをロード 　loadJSON()

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

例

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);
}

---

ピクセルを格納 　loadPixels() / updatePixels()

[reference>>](https://p5js.org/reference/#/p5/loadPixels) [reference>>](https://p5js.org/reference/#/p5/updatePixels) 画像を呼び出す

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

例

code

topics:b-05 ピクセルを操作する

---