Domライブラリを使ってみよう

前章ではマウスの動きを受け取って画面に反映させる方法を学びました。
今回は、画面にボタンやセレクトボックスなどの部品を付けて、値を受け取る方法を学びましょう。
変数などをプログラムで決定するのではなく、画面から変更することができるようになります。

ライブラリを使ってみよう

これまではp5.jsに含まれているものしか使ってきませんでしたが、これから使用するDom要素はp5.js本体とは別のライブラリ(拡張機能)を使わなければなりません。ライブラリを使うには、通常のp5.jsを読み込むのと同じようにライブラリのJavaScriptファイルを読み込んであげます。
ただし、p5.jsのファイルを先に読み込まないとエラーになるので、記述の順番には気を付けてください。


<html>
  <head>
    <meta charset="UTF-8">
    // p5.jsの読み込み
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    // これから作っていくJavaScriptファイルの読み込み
    <script language="javascript" type="text/javascript" src="index.js"></script>
  </head>
  <body></body>
</html>

準備はこれだけです。実際にライブラリの使い方を見ていきましょう。

ボタンを付けてみよう

まずはボタンを配置してみましょう。
いろいろな場所にコードが散らばってしまいますが、書き方を覚えてしまいましょう。


var w = 200;
var h = 200;
var backgroundColor = 0;
function setup() {
  createCanvas(w, h);
  background(backgroundColor);
  var button = createButton('Toggle Background Color!'); //ボタンの生成
  button.position(15, 19);  // 位置の調整
  button.mousePressed(changeBGC);  //ボタンを押したとき実行する関数の登録
}

function draw() {
  background(backgroundColor);
}

function changeBGC(){
  backgroundColor = 255 - backgroundColor;
}

解説します。
まずは7行目を見てください。createButtonがボタンオブジェクトを生成する為の関数です。引数にはボタンのラベルを渡します。
この一行でもボタンは画面に表示されるのですが、このままだとボタンを押しても何も起きず、位置もキャンバスの右下に表示されます。
そこで、8行目のbutton.positionでボタンの表示位置を指定します。
button.positionという書き方をちゃんと理解するためにはオブジェクト指向プログラミングを先に学ばないといけないので、ここでは詳しい説明をパスします。
簡単に言えば、buttonという変数に対してボタン専用の命令を実行するという書き方です。
もし変数名がbuttonではなくbtnだった場合はbtn.positionとなります。
引数には、横方向と縦方向の位置を渡します。

次に9行目ですが、ボタンを押したときの挙動を登録しておきます。挙動自体は16行目で関数として定義しておきます。
ボタンに関しては、createButtonで生成、button.positionで位置指定、button.mousePressedで挙動の登録が基本的な記述になります。

セレクトボックスを付けよう

次にセレクトボックスを付けてみましょう。
セレクトボックスは、複数の選択肢をプルダウンから選ぶことのできる部品です。


var w = 200;
var h = 200;
var sel;  // setupとは別の関数で使いたいのでsetupの外で定義している

function setup() {
  createCanvas(w, h);
  background(0);
  sel = createSelect();
  sel.position(10, 10);
  sel.option('rect');
  sel.option('circle');
  sel.option('line');
  sel.changed(selectForm);
}

function draw(){
}

function selectForm() {
  var form = sel.value();
  background(0);
  if(form === "rect"){
    rect(50, 50, 100, 100);
  }else if(form === "circle"){
    ellipse(100,100,50);
  }else if(form === "line"){
    stroke(255);
    line(40, 20, 180, 180);
  }
}

まずセレクトボックスオブジェクトですが、変数をsetup関数の外で定義しています。
これは、setup以外の関数からも参照できるようにするためのテクニックで、グローバル変数として定義すると言います。逆に、関数の中で定義した変数はローカル変数というのでした。
セレクトボックス自体の生成はsetup関数内でcreateSelect関数で行います。
ボタンの時と同じようにpositionで位置を指定しています。
また、選択肢はoption関数で一つずつ追加していきます。何か選択肢が選ばれたときに特定の処理を実行してほしいときはchanged関数で処理を登録しておきます。
登録の方法はボタンと同じく、関数名を渡します。

選ばれた選択肢はvalue()で取得することができます。

まとめると、生成はcreateSelect()、positionで位置調整、optionで選択肢の追加、changedで選択時の挙動を登録、valueで値の取得です。

スライダーを付けよう

最後にスライダーを付けてみましょう。
実装すればわかると思いますが、Domライブラリの使い方にはパターンがあるので、いろいろと触っていると簡単に使い方を覚えられると思います。


var w = 200;
var h = 200;
var slider;

function setup() {
  createCanvas(w, h);
  background(0);
  slider = createSlider(0, 255, 0);//0:最小値、255:最大値、0:初期値
  slider.position(10, 10);
}

function draw(){
  background(slider.value());
}

では使い方を解説します。
まずはグローバル変数としてsliderを定義します。drawとsetup両方でこの変数を使うためグローバル変数にしています。
次にsetupでスライダーオブジェクトを生成します。引数には、スライドする値の最小値、最大値、初期値(最初に選択されている値)です。
お決まりですが、positionで位置を調整しています。

スライダーは滑らかに変化するため、セレクトボックスのようなchanged関数はありません。
現在選択されている値は、valueで取得することができます。
まとめると、createSlider(最小値,最大値,初期値)で生成、positionで位置調整、valueで値の取得となります。

まとめ

ボタンはcreateButtonで生成する。
セレクトボックスはcreateSelectで生成する。
スライダーはcreateSliderで生成する。
関数をまたがって操作したいときはグローバル変数として定義しよう
positionで位置を調整しよう
セレクトボックスはoptionで選択肢を追加できる
ボタンはmousePressedで、セレクトボックスはchangedでイベントを登録できる
セレクトボックス、スライダーはvalueで現在の選択値を取得できる

Prev Next