第10章 文字は読める図形
画面の文字には 2 つの顔があります。言葉として意味を伝え、同時に大きさ、間隔、配置を持つ図形として見えます。操作説明を表示するだけなら読めることが最優先です。短い詩を動かすなら、読める限界そのものを作品にできます。
10.1 text で一行を置く
def setup
createCanvas(600, 300)
background(245)
fill(35)
textSize(36)
text("Ruby で描く", 60, 150)
end
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
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 一文字ずつ別の位置へ置く
文字列は chars で文字の配列へ分けられます。
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
文字列を一つの塊ではなく、一文字ずつ位置を持つ図形として扱っています。each_with_index は、要素と番号を同時に受け取る Ruby のメソッドです。
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で大きさの変わる幅を調整します。一度に変えるのは一つだけで十分です。
言葉を長く考える必要はありません。二文字から六文字ほどにし、まず読める状態を保存します。その複製で、位置、大きさ、透明度の一つだけを時間とともに変えます。文字を情報表示として使うだけでなく、意味と動きのずれを楽しむタイポグラフィへ進めます。
この章の小さな区切り
- 文字を一行表示できた
- 文字の大きさ、位置、言葉のどれか一つを変えた
- 余裕があれば、「しずか」の完成コードを動かして速さか振れ幅を変えた
中央に一行表示できれば、動く文字まで進まなくても保存して次章へ進めます。