05-01 GUI要素とは

1 例題 5-1-1
- 1.1 コード
2 練習問題5-1-1
3 練習問題5-1-2
4 練習問題5-1-3
5 練習問題5-1-4
6 練習問題5-1-５

GUI（Graphical User Interface）要素は、ユーザーがコンピューターやデバイスと対話するために使用される視覚的なコントロールである。

p5.jsで標準で使えるGUI要素として以下がある。

GUI要素	作成方法
ボタン	button = createButton(‘ラベル’); button.mousePressed(関数);
入力ボックス	input = createInput();
ラベル	label = createP(‘ラベル’);
ラジオボタン	radio = createRadio(); radio.option(‘ラベル’);
チェックボックス	check = createCheckbox(‘ラベル’);
スライダー	slider = createSlider(最小値,最大値,初期値);
セレクトメニュー（ドロップダウンリスト）	dropdown = createSelect(); dropdown.option(‘ラベル’); dropdown.changed(関数);

createXXXコンストラクタでGUI要素を作成する。GUI要素の配置位置とサイズはpositionメソッドとサイズメソッドで設定する。たとえば入力ボックスは以下のように作成する。

input = createInput();
  input.position(x座標, y座標);
  input.size(横幅);

ボタンをクリックしたときの処理を行う関数は以下のように設定する。

button = createButton('処理');
button.mousePressed(関数);

例題 5-1-1

２つの入力ボックスに入力された数値を、ボタンのクリックで、加算してラベルに表示する。

コード

let input1, input2, button, result;

function setup() {
  noCanvas(); // キャンバスは不要

  input1 = createInput();
  input1.position(20, 65);
  input1.size(50);

  let plus = createP('+');
  plus.position(80, 50);

  input2 = createInput();
  input2.position(100, 65);
  input2.size(50);

  button = createButton('=');
  button.position(160, 65);
  button.mousePressed(calculate); // ボタンが押されたときの関数を設定

  result = createP('');
  result.position(200, 50);
}

function calculate() {
  let n1 = parseInt(input1.value());
  let n2 = parseInt(input2.value());
  let s = n1 + n2;
  result.html(s);
}