html要素の取得と変更

html内の要素を取得する簡単な方法は、javascriptで提供されているdocumentを利用するのが早いでしょう。javascriptでもよく利用しますが、p5jsでも同様にこのやり方で簡単にアクセスできます。draw関数内で直接idを指定して、その値をもらってくることができます。

上記のようなやり方もOKですが、callback関数を利用した方が一般的です。ただプロトタイプにおいてはどっちだっていいです。callbackを使った 記述にも慣れておきましょう。こちらの方がプログラム自体大きくなってくると、理解しやすいプログラムが掛けます。また必要なときだけに必要な 処理ができるようになります。上記のdraw関数ではとにかく毎回更新する。というインタラクティブアプリケーション的な記述でした。

先のように、キーボード入力があるたびに呼び出される関数を登録するためにinputを利用しました。このinputのことをcallbackの登録関数と呼びます。 Registering callback funcionって感じです。テキスト入力の場合はこれだけで問題ないかなと思いますが、callback登録にはいくつかの種類があります。実際にinput以外の登録関数を利用して、どのように振る舞いが変わるかを先ほどのプログラムを修正して確認してみましょう。

• html要素に登録可能なcallbackの種類
  • 詳細は次のリンクを参照してください：https://p5js.org/reference/#/p5.Element
    • mouseClicked()
    • mouseOver()
    • mouseMoved()
    • mouseOut()
    • dragOver()
    • dragLeave()
    • mouseWheel()
    • doubleClicked()
    • mousePressed()
    • changed(): 内容に変更が生じた場合
    • input(): 入力があった場合

例えば、下記のサンプルでは、テキストに入力された文字列をそのままbackground-colorの割当色にわたすことで、 テキスト入力で直接色指定を行っています。

DOM要素の取得ができるようになりましたが、今度はDOM要素をp5js側から変更してみます。例えばテキストボックスに入力した文字列をそのまま別のテキストボックスに反映させてみます。p5.jsではDOM要素の設定には、 value()の引数に設定したい値を渡します。以下のプログラムを参照してください。