processing:p5js:05.number_range

バラメータの変更

実行しているプログラムのパラメータを変更したり、予め設定された数値に基づいて何かしらの処理を行う場合に関してです。 htmlタグ要素には inputというタグがあり、この中でtypeを指定すると様々な入力タイプが存在しています。詳しくは HTML5タグリファレンスのinputの詳細ページを参照してください。例えば text, button, datetime, number, range, color, check box, file等の様々なUI要素を利用することができます。このページではnumberとrangeを利用したサンプルを紹介します。

number属性(タイプ)は数値の入力欄を作成してくれます。以下はシンプルな例です。

コード

<input type="number"></input>
<input type="number" min=0, max=100, step=10></input>

実行結果

ではinputで入力された数値をProcessingのcanvas上で表示してみます。一番簡単なやり方はdocument.getElementByIdを利用する方法です。 下記のサンプルを確認してみましょう。

range属性はスライダーのようなUIで数値を下記サンプルのように直感的に変更できます。

コード

<input type="range" value=1 min=1 max=10 ></input>

実行

先ほどのサンプルを利用して、今度はスライダーを動かすことで円の大きさが変わるプログラムを記述してみましょう。

  • processing/p5js/05.number_range.txt
  • 最終更新: 2020/05/02 13:47
  • by baba