このチャプターの目次

この章ではGUIを利用して値を操作することを学ぶ。描画に必要なパラメータをスライダーなどで操作できるようになるとコードを変化させずに表示の変化を見ることができるので、デバッグや作成のスピードを早めるためにも利用される。見た目の変化を自動ではなく、ユーザーのタイミングに依存させるという効果もある。

HTMLにはinput要素として色々なGUIが用意されているのでその中からいくつか紹介する。

共通

.ui-container {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  color: #f0f0f0;
}
<div class="ui-container">
  <!-- ここにinput要素を書く -->
</div>

Canvasが画面全体に配置されていてGUIと被ることを考えると、position: absolute にして表示位置は固定にしておきたい。当然GUIの方がCanvasより上に表示されないと操作ができないので、z-index などによる調整が必要になるだろう。

range

<div class="ui-container">
  <div>
    <input type="range" id="r" min="10" max="100" value="50" step="1">
    <label for="r">半径</label>
  </div>
</div>
let r;

function setup() {
  createCanvas(windowWidth, windowHeight);

  document.getElementById("r").oninput = (event) => {
    r = event.currentTarget.valueAsNumber;
  };
}

function draw() {
  clear();
  circle(width / 2, height / 2, r * 2);
}
プロパティ 意味
min 最小値
max 最大値
value 現在の値
step スライダーを動かしたときの値の移動幅

値の変化を検出するイベントは oninput, onchange などがあり、oninput はレンジのボタンを動かしている最中にイベントが検出されるのだが、onchange は ボタンを離したあとだ。
滑らかさでいうと oninput の方がいいが、重い処理の場合はリアルタイムで更新されると困るので、onchange を使う場面もある。

color

<div class="ui-container">
  <div>
    <input type="color" id="c" value="#e66465">
    <label for="c"></label>
  </div>
</div>
function setup() {
  createCanvas(windowWidth, windowHeight);

  const inputColor = document.getElementById("c");
  inputColor.oninput = (event) => {
    fill(event.currentTarget.value);
  };
  
  fill(inputColor.value);
}

function draw() {
  clear();
  circle(width / 2, height / 2, 100);
}
プロパティ 意味
value 現在の値

button

<div class="ui-container">
  <div>
    <button id="button">リセット</button>
  </div>
</div>
function setup() {
  createCanvas(windowWidth, windowHeight);

  document.getElementById("button").onclick = () => {
    clear();
  };
}

function draw() {
  circle(mouseX, mouseY, 10);
}