Dom操作関数

dom操作ライブラリをインポートすることで、スライダーやチェックボックスといったGUI部品を設置でき、画面からプログラム内の変数を操作することができます。
ライブラリのインポートは、p5.jsの読み込み以降の行に次のタグを挿入します。


<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>

スライダー

スライダーとは、ある範囲内の数値を選択することのできる部品です。
動画再生時の音量や再生位置の選択などに使われています。

createSlider

スライダーオブジェクトを生成する関数です。


slider = createSlider(min, max, [value], [step])

min: 最小値
max: 最大値
value: デフォルト値。省略可
step: 1メモリの増減幅。省略可

スライダーオブジェクトが返ってくるので、変数へ代入して使う。

position

スライダーの表示位置を指定します。


slider.position(x, y);

slider: createSliderで作成したスライダーオブジェクト
x: 表示位置のx座標
y: 表示位置のy座標

value

スライダーの現在の値を取得します。


slider.value();

slider: createSliderで作成したスライダーオブジェクト

sample


var slider;
function setup(){
  createCanvas(250,200);
  slider = createSlider(0, 255);
  slider.position(10, 210);
}
function draw(){
  background(slider.value());
}

チェックボックス

チェックボックスは、チェックを付けたり外したりして、オンオフを切り替える部品です。

createCheckbox

チェックボックオブジェクトを生成する関数です。


chk = createCheckbox(label, value);

label: 表示名
value: trueを入れるとデフォルトでチェックが入った状態になり、
falseを入れるとデフォルトでチェックが入っていない状態になる。省略可

チェックボックスオブジェクトが返ってくるので、変数へ代入して使う。

position

チェックボックスの表示位置を指定します。


chk.position(x, y);

chk: createCheckboxで作成したチェックボックスオブジェクト
x: 表示位置のx座標
y: 表示位置のy座標

changed

チェックボックスの状態が切り替わった時の動作を指定します。
引数には定義済みの関数名を渡します。すると、チェックボックスが変化したときに、引数の関数が実行されます。


chk.changed(fnc);

fnc: 関数名
chk: createCheckboxで作成したチェックボックスオブジェクト

sample


var chk;
function setup(){
  createCanvas(250,200);
  background(50);
  chk = createCheckbox('bg color', false);
  chk.position(80, 210);
  chk.changed(checkedEvent);
}
function checkedEvent(){
  // thisはチェックボックス自身を指す
  if(this.checked()){
    background(0);
  }else{
    background(50);
  }
}

セレクトボックス

セレクトボックスは、ドロップダウンで表示される複数の選択肢から一つを選択する部品です。

createSelect

セレクトボックオブジェクトを生成する関数です。


sel = createSelect();

セレクトボックスオブジェクトが返ってくるので、変数へ代入して使う。

position

セレクトボックスの表示位置を指定します。


sel.position(x, y);

chk: createSelectで作成したセレクトボックスオブジェクト
x: 表示位置のx座標
y: 表示位置のy座標

option

選択肢を登録します。


sel.option(item);

item: 選択肢を文字列で指定します。
sel: createSelectで作成したセレクトボックスオブジェクト

changed


sel.changed(fnc);

fnc: 関数名
sel: createSelectで作成したセレクトボックスオブジェクト

value

選択した選択肢の値(optionで設定した文字)を受け取ります。


sel.value();

sel: createSelectで作成したセレクトボックスオブジェクト

sample


var sel;
function setup(){
  createCanvas(250,200);
  background(0);
  sel = createSelect();
  sel.position(20, 10);
  sel.option("black");
  sel.option("red");
  sel.option("blue");
  sel.option("green");
  sel.changed(selectedEvent);
}
function selectedEvent(){
  background(sel.value());
}

ボタン

マウスでクリック可能なボタンを設置します。
ボタンを押すことで実行される関数を設定することもできます。

createButton

ボタンオブジェクトを生成する関数です。


btn = createButton(label, [value]);

label: ボタンに表示するラベル
value: btn.value()で取得することのできる値

ボタンオブジェクトが返ってくるので、変数へ代入して使う。

position

ボタンの表示位置を指定します。


btn.position(x, y);

btn: createButtonで作成したボタンオブジェクト
x: 表示位置のx座標
y: 表示位置のy座標

value

ボタン作成時に設定した値を取得します。


btn.value();

btn: createButtonで作成したボタンオブジェクト

sample


var btn;
var currentColor = 120;
function setup() {
  createCanvas(250,200);
  background(currentColor);
  btn = createButton("click me", currentColor);
  btn.position(10, 210);
  btn.mousePressed(btnClicked);
}

function btnClicked(){
  currentColor = btn.value() - currentColor;
  background(currentColor);
}