p5js:03.html要素の取得と変更 [Design Workshop]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== html要素の取得と変更 ======
<WRAP center round tip 60%>
document.getElementById("id_name") とcallbackの使い方を覚えよう
</WRAP>

===== html要素の取得 =====

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

<html>
<iframe src="https://editor.p5js.org/tetsuakibaba/sketches/cXi_p3JEk" height=700px width="100%"></iframe>
</html>

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

<html>
<iframe src="https://editor.p5js.org/tetsuakibaba/sketches/AuzBQvVRb" height=700px width=100%></iframe>
</html>

==== callbackの種類 ====
先のように、キーボード入力があるたびに呼び出される関数を登録するために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の割当色にわたすことで、
テキスト入力で直接色指定を行っています。

<html>
<iframe src="https://editor.p5js.org/tetsuakibaba/sketches/D0kmX9qpo" height=500 width=100%></iframe>
</html>

===== 要素の変更 =====
DOM要素の取得ができるようになりましたが、今度はDOM要素をp5js側から変更してみます。例えばテキストボックスに入力した文字列をそのまま別のテキストボックスに反映させてみます。p5.jsではDOM要素の設定には、 value()の引数に設定したい値を渡します。以下のプログラムを参照してください。
<html>
<iframe src="https://editor.p5js.org/tetsuakibaba/sketches/LSUbQyHSS" width=100% height=500px>
</html>