文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== バラメータの変更 ====== 実行しているプログラムのパラメータを変更したり、予め設定された数値に基づいて何かしらの処理を行う場合に関してです。 htmlタグ要素には inputというタグがあり、この中でtypeを指定すると様々な入力タイプが存在しています。詳しくは [[http://www.htmq.com/html5/input.shtml|HTML5タグリファレンスのinputの詳細ページ]]を参照してください。例えば text, button, datetime, number, range, color, check box, file等の様々なUI要素を利用することができます。このページではnumberとrangeを利用したサンプルを紹介します。 ===== number ===== number属性(タイプ)は数値の入力欄を作成してくれます。以下はシンプルな例です。 <WRAP group> <WRAP half column> コード <code> <input type="number"></input> </code> <code> <input type="number" min=0, max=100, step=10></input> </code> </WRAP> <WRAP half column> 実行結果 <html> <input type="number"></input> </html> <html> <input type="number" min=0 max=100 step=10></input> </html> </WRAP> </WRAP> ではinputで入力された数値をProcessingのcanvas上で表示してみます。一番簡単なやり方はdocument.getElementByIdを利用する方法です。 下記のサンプルを確認してみましょう。 <html> <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/u_w7hwjGK" height=500px width=100%></iframe> </html> ===== range ===== range属性はスライダーのようなUIで数値を下記サンプルのように直感的に変更できます。 <WRAP group> <WRAP half column> コード <code> <input type="range" value=1 min=1 max=10 ></input> </code> </WRAP> <WRAP half column> 実行 <html> <input type="range" value=1 min=1 max=10></input> </html> </WRAP> </WRAP> <WRAP center round todo 60%> 先ほどのサンプルを利用して、今度はスライダーを動かすことで円の大きさが変わるプログラムを記述してみましょう。 </WRAP> /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/05.number_range.txt 最終更新: 2021/03/09 02:33by baba