第9章キーボードと状態の切り替え

マウスは連続した位置を渡します。キーボードは、押されたキーに応じて「夜へ変える」「動きを止める」「色を選ぶ」といった切り替えに向いています。ここではキー入力を、作品の状態を変える合図として使います。

9.1 矢印キーで位置を変える

keyIsDown を使うと、指定したキーが現在押されているかを調べられます。

def setup
  createCanvas(500, 320)
  @x = width / 2
  @y = height / 2
end

def draw
  @x -= 3 if keyIsDown(LEFT_ARROW)
  @x += 3 if keyIsDown(RIGHT_ARROW)
  @y -= 3 if keyIsDown(UP_ARROW)
  @y += 3 if keyIsDown(DOWN_ARROW)

  background(245)
  fill(235, 90, 120)
  ellipse(@x, @y, 60, 60)
end

if を行末へ置く書き方は、Ruby の後置 if です。条件が短く、実行する処理も 1 行なら、動きの対応が見やすくなります。複雑な条件では通常の複数行の if のほうが読みやすくなります。

9.2 押している状態と押した瞬間

移動では、押している間ずっと位置を変えたいので keyIsDown が合います。一度だけ色を切り替える処理を毎フレーム実行すると、押している短い間に何度も切り替わることがあります。

rbCanvas/p5 では、キーが押されたときに呼ばれるイベントメソッドを定義できます。

def setup
  createCanvas(500, 320)
  @dark = false
end

def draw
  if @dark
    background(20, 25, 40)
    fill(255, 220, 120)
  else
    background(240, 230, 200)
    fill(235, 90, 120)
  end

  ellipse(width / 2, height / 2, 100, 100)
end

def keyPressed
  @dark = !@dark if key == " "
end

スペースキーを押すたび、@dark が false と true の間で切り替わります。! は真偽値を反転する演算子です。

イベントメソッド名は rbCanvas/p5 の API 表記に合わせて keyPressed と書きます。通常の Ruby の命名慣習とは異なる camelCase ですが、ここで snake_case へ変えると自動で呼ばれません。

9.3 状態は画面の現在を説明する

@dark は背景色そのものを保存していません。「今は暗い場面か」という意味を保存しています。描画側は、その状態から背景色と円の色を決めます。

色を直接何度も書き換える方法もあります。しかし要素が増えると、背景は夜なのに太陽だけ昼の色という、ちぐはぐな状態が起こりやすくなります。状態を一つ持ち、すべての描画をその状態から決めると関係を保てます。

9.4 3 つ以上ならシンボルで名前を付ける

昼と夜の 2 状態は真偽値で表せます。朝、昼、夜の 3 状態になると、true と false では足りません。Ruby のシンボルで名前を付けます。

def setup
  createCanvas(500, 320)
  @scene = :morning
end

def draw
  case @scene
  when :morning
    background(250, 180, 150)
    fill(255, 235, 190)
  when :day
    background(120, 200, 250)
    fill(255, 220, 80)
  when :night
    background(20, 25, 50)
    fill(255, 220, 120)
  end

  ellipse(width / 2, height / 2, 100, 100)
end

def keyPressed
  @scene = :morning if key == "1"
  @scene = :day if key == "2"
  @scene = :night if key == "3"
end

case は、@scene の値に合う when だけを実行します。背景と円の色を同じ状態から決めているため、「夜の背景なのに昼の円」というずれが起こりません。実行したら、数字の 1、2、3 を順に押して画面の変化を確かめます。

状態へ名前を付けると、コードが作品の構成を語り始めます。次章では、文字列を画面へ置き、操作説明だけではない視覚素材として扱います。