お絵かきプログラミングProcessingサンプルコード解説の第5弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は Tickle というサンプルコードをみてみましょう。
この記事では、ランダムな値の扱い方、テキストの表示を学べます。
難易度は ★★☆☆☆ くらい。
わからない箇所があればコメントをください。
Table of Contents
もくじ
とりあえず動かしてみよう
Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプル と選択し現れたウィンドウで Topics → Interaction → Tickle と選択してください。
このようなスケッチが現れます。ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。
カーソルを単語に重ねると…揺れますね。
というわけでこのコードは、「カーソルを重ねると揺れ動くテキストを描くコード」です。
何度か実行してもらうと気づかれると思いますが、この揺れは毎回ランダムです。
というわけで今回は、ランダム性の扱いとテキストの表示を説明します。基本的な技術で用途は広いです。ぜひ身につけていってください！
コードを読む
とりあえずコードの全貌を確認しましょう。
構造はシンプルですね。サクッと読めてしまいそうです。
上から読んでいきましょう。
まずコメントから始まっていますね。
「“tickle” という単語が、カーソルを重ねるとウズウズします。時々画面の外まで出て行くこともあります」と言っています。
ちなみに “tickle” は「くすぐる」という意味です。すでに動きを見たみなさんは納得されると思います。
まずはグローバル変数を見ましょう。
早速気づくことがありますが今回はコード内に逐一コメントが書かれています！！！
そして変数定義のタイミングで、その変数が何を表しているのか示してくれています。
| 変数 | 意味 |
|---|---|
| message | 表示する文字 |
| x | テキストのx座標 |
| y | テキストのy座標 |
| hr | テキストの横幅の半分 |
| vr | テキストの縦幅の半分 |
このブログの他の記事を読んでくれた方はお分かりだと思いますが、コメントの無いコードは読み手が意味を理解するのに時間がかかります。コードを他人に読ませない場合でも、数ヶ月後に見直したときの自分は多くの前提知識を忘れているでしょう。その自分はもはや他人です。将来の自分のためにもコメントは残しておきましょう。
このようなコメントの作法を含めコーディングの作法について書かれた名著があるので、興味がある方はぜひ読んでみてください。→リーダブルコード
ではsetupの中身を見てみましょう。
setup
sizeは毎度おなじみのウィンドウサイズを指定する関数です。
次にコメントがありますね。”Create the font”
どうやらここからフォントを作るようです。
ここでテキスト表示にまつわる関数がたくさん使われていますが、まとめておきます。
| 関数 | 意味 |
|---|---|
| createFont | .ttfファイルからProcessingで使用するフォントオブジェクトを生成 |
| textFont | テキストのフォントを設定 |
| textAlign | テキストの位置の設定方法を指定 |
| textWidth | テキストの横幅を設定 |
| textAscent | テキストのベースラインから上端までの長さを取得 |
| textDescent | テキストのベースラインから下端までの長さを取得 |
知らない言葉がたくさん出てきたと思います。少しずつ説明していきます。
早速ですが、注意です！
このサンプルコードと同じものを自作のコードで実行しても、同じように実行できません！！！
原因はフォント読み込みです。
このサンプルコードではフォントファイル（SourceCodePro-Regular.ttf）をcreateFontで読み込むことによりフォントデータを使えるようにしていますが、この方法は覚えなくて構いません。自分で書いたコードでは使えない書き方だからです。
外部フォントを読み込みたい場合は別の記事で解説する予定なので、今回はこの程度の説明で留めておきます。
textAlignはテキスト位置の座標指定の方法を決める関数です。今回は引数をtextAlign(CENTER, CENTER)と取っていますが、これはテキストの位置を縦、横ともにその中央の座標により決定する、という指定です。
次です。
textWidthはわかりやすいと思います。テキストの横幅です。
textAscent, textDescentについて説明します。
今回のコードではテキストの縦幅が欲しいのですが、実は縦幅を直接取得する関数が存在しません！
代わりにより詳細な情報が取得できます。AscentとDescentと呼ばれるものです。
アルファベットにはベースラインというものがあります。英語を書くときの4線譜の下から二番目の線に相当します。Ascent、Descentはベースラインを基準に決定される値で、
ベースラインから上端までの距離をAscent、下端までの距離をDescentと呼びます。これらの値は、文字には関係なく、フォントとフォントサイズにより決定されます。
図で表すとこんな感じです。
したがってテキストの縦幅はAscent + Descentで表されるので、
textAscent() + textDescent()
により取得できます。
vrは縦幅の半分を表すので、
vr = (textAscent() + textDescent())/2
と定義されています。
このあとは、noStrokeという関数が使われていますが、これは図形の枠線を書かないための関数です。
x, yの定義に使われているwidth, heightは予約語で、ウィンドウの横幅、縦幅を表す定数です。
これでsetupは終わりですね。drawへ移りましょう。
draw
少しずつ見ていきます
コメントがあります。読みましょう。
「背景を完全に消す代わりに、半透明の長方形を描くことでフェードアウトさせます」
と書かれています。
サンプルコードを実行したときに気づいた方もいると思いますが、tickleが震えるとき残像が見えますね。
画面更新を行う時に画面全体を塗りつぶしていると、このような残像は見えないはずです。このサンプルコードでは透明度のある長方形を反復的に重ねることでフェードアウトを実現しているんですね。
塗りつぶし色の透明度を指定しているのは29行目のfillです。
30行目はrectにより長方形を描画しています。(0, 0)と(width, height)を2頂点とする長方形を描くので、ウィンドウ全体を覆う長方形で塗りつぶすことになります。
フェードアウトの仕組みが気になる人は29行目を
fill(204);
に書き換えて実行してみてください。
どこかが変わります…。
次に進みます。
コメントを読むと、「カーソルがテキストの上にあるとき、その位置を変える」と言っています。実行した時に観察した通りですね。
x, yはテキストのx, y座標であるとコメントに書かれていました。
というわけでこのif文内の条件は、マウスカーソルとテキストの中心位置のx, y座標それぞれにおける距離を確認しています。
x座標の距離がhr未満、かつy座標の距離がvr未満であればカーソルはテキスト上にある、と判定しています。
条件が満たされた場合はx, yが更新されていますね。
ここで遂に出てきました。random。これは乱数を発生させる関数です。
引数の取り方はrandom(下限, 上限)です。つまり今回のrandom(-5, 5)は-5~5の範囲から適当に値を返すという処理になっています。
更新が終わったら、fillにより描画色が変更されています。fillは図形の色の変更に使われますが、文字の色変更にも使われます。ちなみに0は黒を表します。
最後にtextですが、今回はsetup内でtextAlign(CENTER, CENTER)が実行されているため、引数は、
text(表示する文字列, 表示位置のx座標, 表示位置のy座標)
となります。これはx, yの説明コメントと矛盾しませんね。
これで終わりです！お疲れ様でした！
さいごに
今回扱ったトピックは、ランダム性の扱い、テキストの表示でした。いずれも基本的な操作で、使う場面は多いと思います。よく覚えておいてください。
ではまた次回！
