LoginSignup
2
1

More than 3 years have passed since last update.

@moci(moci)

p5.js leading guide　

Last updated at Posted at 2019-12-24

p5.js keyword

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

editor
sample code
reference

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


基本

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

reference>>

ディスプレイ領域サイズの設定


コマンドの実行
　function draw()

reference>>

毎描画ステップごとに呼び出され、そのたびに関数内のすべてのコマンドを実行

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

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


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

reference>>

外部ファイルの先読み込み
preload()関数が定義されている場合、setup()は、preload()呼び出しが終了するまで待機します
例
function preload() {
  // preload() runs once
  img = loadImage('assets/laDefense.jpg');
}


canvasの作成
　createCanvas()

reference>>

canvasの作成
数値で指定 
// 画面いっぱい
createCanvas(windowWidth, windowHeight);


カーソルを非表示
　noCursor()

reference>>

カーソルを非表示


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

reference>>

現在のキャンバスを画像として保存
例
saveCanvas(selectedCanvas, [filename], [jpgまたはpng])
saveCanvas([filename], [jpgまたはpng])

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


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

reference>>

描画キャンバスの幅及び高さを格納するシステム変数。
createCanvas()関数のパラメーターによって設定されます。
例
 createCanvas(width, height)


描画・描画モード

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

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

reference>>

カラーモデルの設定 
colorMode(HSB, 360, 100, 100);


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

reference>>
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>>
x,yで示す１点を指定
例
point(x, y);


塗りつぶし
　fill()

reference>>
図形の塗りつぶしに使用する色を設定
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>>
ストローク（アウトライン）の描画を無効にします
べた塗のみの図形を描きたいとき


矩形（四角）
　rect()

reference>>
長方形の描画
パラメータの解釈方法は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>>
円の描画。原点はellipseMode（）関数で変更
例
ellipse(56, 46, 55, 55); // 中心点と、幅と高さ
// ellipse(x, y, w, h) wとhが同じなら正円


多角形？
　beginShape() / endShape()

reference>>

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>>
ポイント、ライン、三角形、四角形、ポリゴンの頂点座標を指定するために使用

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>>
オブジェクトの移動
続けて指示した場合、移動量は累積されていく
例
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>>
頂点を拡大および縮小することにより、
シェイプのサイズを拡大または縮小
変換は、その後に発生するすべてに適用される

関数への後続の呼び出しは効果を増加
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>>
ある範囲から別の範囲に数値を再マッピング
例
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>>
切り上げ　切り下げ　四捨五入

切り上げeil（9.03）は値10を返します
切り下げfloor（133.8）は値133を返します
四捨五入round（133.8）は値134を返します
例
ceil（n） // nパラメータの値以上の最も近い整数を計算
floor（n） // nパラメーターの値以下の最も近い整数を計算
round(n) // nパラメーターに最も近い整数を計算


ランダム
　random()

reference>>
ランダムな浮動小数点数を返します
引数が指定されていない場合は、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>>
角度の余弦を計算、値は-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>>
三角関数
小辺 = 1
中辺 = 2
大辺 = √3（1.732）

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

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


ルート
　平方根

reference>>

reference>>

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

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

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

例
√9 = 3
√10 = 約3.16


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

reference>>
引数を比較して最大値 / 最小値を返す
例
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>>
reference>>
mouseXcanvasの(0, 0) に対するマウスの現在の水平位置
mouseYcanvasの(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>>

マウスが押されている場合は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>>
マウスボタンを離したときに呼び出される

デフォルト動作で不具合が起きないよう末尾に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>>
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>>
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>>
最後に押された最新のkeyを格納
例
function draw() {
  background(200);
  text(key, 33, 65); // Display last key pressed.
}


データ

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

reference>>
ファイルまたは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>>
reference>>
画像を呼び出す

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

updatePixels()で配列情報の更新

例
code

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


2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1