Help us understand the problem. What is going on with this article?

p5.js leading guide 

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) // 左上1点と幅高さを指定

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

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

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


1点の指定
 point()


reference>>
x,yで示す1点を指定
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を返します
ceiln // nパラメータの値以上の最も近い整数を計算
floorn // 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>>

a = b2乗の時、 a に対する b のこと。二乗根。例、9の平方根は3および−3.
※マイナスの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 ピクセルを操作する



moci
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした