第10章 文字は読める図形

画面の文字には 2 つの顔があります。言葉として意味を伝え、同時に大きさ、間隔、配置を持つ図形として見えます。操作説明を表示するだけなら読めることが最優先です。短い詩なら、文字を動かしたり重ねたりして、意味と形の両方を使った表現を試せます。

10.1 text で一行を置く

エディタのコード全体を次のコードに置き換えて実行します。

def setup
  createCanvas(600, 300)
  background(245)
  fill(35)
  textSize(36)
  text("Ruby で描く", 60, 150)
end

画面に「Ruby で描く」と表示されます。"Ruby で描く" は、表示したい文字をひとまとまりにした文字列です。半角の " は文字列の始まりと終わりを示す目印で、画面には表示されません。まず左右の " を残したまま、中の言葉だけを「こんにちは」へ変えて実行します。エラーになったら、text の行を上のコードへ戻します。

textSize（テキスト・サイズ）は文字の大きさを指定します。text（テキスト）の最初の引数が文字列、次が x 座標、その次が y 座標です。既定では y 座標が文字の下側にあるベースラインを示すため、円と同じつもりで中央へ置くと少しずれて見えます。

10.2 textAlign で基準点を変える

文字をキャンバス中央へ揃えるには、基準を中央へ変更します。

def setup
  createCanvas(600, 300)
  background(30, 35, 55)
  fill(255)
  textSize(42)
  textAlign(CENTER, CENTER)
  text("ここから動く", width / 2, height / 2)
end

textAlign（テキスト・アライン）は文字を揃える基準を指定します。CENTER は rbCanvas/p5 が用意する定数です。1 つ目が水平方向、2 つ目が垂直方向の揃え方です。基準点を中央にしたため、width / 2 と height / 2 へ置けます。

10.3 文字列補間で値を読めるようにする

プログラム内部の値を表示すると、デバッグにも作品にも使えます。次の draw は変更部分です。10.2 の長いコードへ draw がないので、setup の end より後ろへそのまま足します。

def draw
  background(245)
  size = map(mouseX, 0, width, 16, 90)

  fill(35)
  textSize(size)
  textAlign(CENTER, CENTER)
  text("大きさ #{size.round}", width / 2, height / 2)
end

#{size.round} は文字列補間です。変数 size を丸め、その結果を文字列の中へ埋め込みます。ダブルクォートで囲んだ文字列で使えます。

制作中だけ数字を表示すると、マウス位置によって文字サイズがどう変わるか確認できます。完成した作品で数字が不要なら、この表示を消せます。

10.4 一文字ずつ別の位置へ置く

次のコードで、R、U、B、Y を一文字ずつ異なる高さへ並べます。エディタのコード全体を置き換えて実行します。

def setup
  createCanvas(600, 300)
  background(245)
  textAlign(CENTER, CENTER)
  textSize(48)

  word = "RUBY"
  word.chars.each_with_index do |character, i|
    x = 150 + i * 100
    y = 150 + sin(i * 1.2) * 50
    fill(50 + i * 45, 100, 190)
    text(character, x, y)
  end
end

4 文字が波のように高さを変えて並びます。まず word = "RUBY" の文字列だけを "そらいろ" へ変えて実行し、同じ並び方になるか見ます。戻すときは "RUBY" に戻します。

chars（チャーズ）は、文字列を一文字ずつに分け、順番に並べた配列（はいれつ）を返します。配列は、複数の値を順序付きでまとめたものです。"RUBY" なら ["R", "U", "B", "Y"] となります。左右の [ と ]（角括弧）で全体を囲み、中の値をカンマで区切ります。

each_with_index（イーチ・ウィズ・インデックス）は、その配列から文字と番号を一組ずつ渡します。|character, i| の character（キャラクター）が文字、i が番号を受け取ります。最初は "R" と 0、次は "U" と 1、続いて "B" と 2、"Y" と 3 です。word.chars.each_with_index の点は、word を文字に分け、その結果を順に取り出す処理へつないでいます。

10.5 読めなさを選ぶ前に読める版を残す

文字を回転し、重ね、透明にすると、言葉の意味より形が目立ちます。作品名なら大きく崩せますが、操作説明は読める状態を保ちます。

制作中は、読める版と崩した版を別々に保存します。比べてから、どこまで読める必要があるかを決めます。たとえば、タイトルは形として見せ、操作キーは文字として読める状態にする、という分け方があります。

10.6 一行の言葉へ動きを与える

短い言葉を一つ選び、意味と反対の動きを与えると、文字が作品になります。「しずか」を激しく揺らす、「はやい」をゆっくり動かす、「ここ」を画面の外へ逃がす、といった組み合わせです。

まず、次の完成コードで「しずか」の大きさがゆっくり変わる例を動かします。

def setup
  createCanvas(600, 300)
  textAlign(CENTER, CENTER)
end

def draw
  background(30, 35, 55)
  size = 54 + sin(frameCount * 0.03) * 18

  fill(255)
  textSize(size)
  text("しずか", width / 2, height / 2)
end

sin は第7章で使った、-1 から 1 までを滑らかに往復する値です。ここでは文字サイズを 36 から 72 くらいの間で変えます。まず「しずか」を別の言葉へ変えます。次に 0.03 で速さを、18 で大きさの変わる幅を調整できます。実行するたびに、どちらか一方を変えます。

2 文字から 6 文字ほどの言葉を置き、読める状態を保存します。その複製では、位置、大きさ、透明度のどれかを時間とともに変えます。言葉の意味と動きが合う組み合わせと、反対に感じる組み合わせを比べてみてください。

言葉が読める版と、形として目立つ版を見比べます。残したいほうを決めたら、次章で写真や手描きの画像へ図形を重ねます。

参考資料

• rbCanvas/p5 0.5.1 API リファレンス — text、textSize、textAlign の説明
• Ruby 公式 String — 文字列、chars、文字列補間に関係する Ruby の機能