textコマンドの使い方～文字の描き方や色・大きさなどの設定方法～

みなさん，こんにちは
おかしょです．

text=文字を書く際に必要なコマンド”text”の使い方を解説します．

また，文字を描く際の細かい設定方法も解説します．

この記事を読むと以下のようなことがわかる・できるようになります．

textコマンドの使い方
Processingのプグラムの描き方

この記事を読む前に
textの基本的な使い方
文字のサイズを変更する
文字の色を変える
左揃え，中央揃え，右揃えにする
行間を設定する
文字のサイズを測る
まとめ
続けて読む
1. 共有:
2. 関連

この記事を読む前に

Processingをまだインストールしていない方は以下の記事を参考にしてください．

textの基本的な使い方

まずは基本的な使い方を解説します．

void setup(){
  size(100, 100);
  text("abc", 30, 50);
}

このプログラムを実行すると以下のようになります．

まず，sizeコマンドで表示するウインドウのサイズを指定します．ここでは幅：100px，高さ：100pxの正方形のウインドウを表示しています．

textコマンドの引数は左から順番に表示する文字，左下の角のx座標，y座標となっています．このとき，文字を表示する場合はダブルクォーテーション（”）で文字を挟む必要があります．数値を表示する場合はダブルクォーテーションは必要ありません．

したがって，上記のプログラムでは左下角の座標(30, 50)を基準として文字（abc）を描いています．

文字のサイズを変更する

上記のプログラムを実行すると非常に小さな文字が表示されます．この文字の大きさを変更するには”textSize”を使用します．

void setup(){
  size(500, 500);
  text("g", 150, 250);
  textSize(50);
  text("g", 250, 250);
  textSize(100);
  text("g", 350, 250);
}

このコマンドの引数には文字の大きさをpixel単位で入力します．デフォルトではおそらくtextSize(10)となっています．

文字の色を変える

文字の色を変えるにはfillコマンドを使用します．

void setup(){
  size(500, 500);
  textSize(100);
  fill(0, 0, 255);
  text("abc", 150, 250);
}

fillコマンドの引数は左から順番にRGBで表現できます．数値を0~255の範囲で指定することでさまざまな色を表現することができます．

また，引数を一つだけにした場合はグレースケールで白黒にもすることができます．この場合も数値は0~255の範囲になります．デフォルトでは”fill(255)”となっています．

また，塗りつぶしをなくすコマンド”nofill()”を”text”コマンドの前に使用していると文字が見えなくなってしまうので注意してください．

左揃え，中央揃え，右揃えにする

左揃えや中央揃えなどの文字を書く際の基準を設定するには”textAlign”を使用します．

void setup(){
  size(500, 500);
  textSize(100);
  fill(0);
  textAlign(LEFT, BOTTOM);
  text("abc", 250, 100);
  stroke(50);
  line(0, 100, 500, 100);
  line(250, 0, 250, 500);
  textAlign(CENTER, CENTER);
  text("def", 250, 200);
  line(0, 200, 500, 200);
  textAlign(RIGHT, TOP);
  text("ghi", 250, 300);
  line(0, 300, 500, 300);
}

引数にはLEFT，CENTER，RIGHTのどれかとBOTTOM，CENTER，TOPのどれかを入れます．何も設定しないときは” textAlign(LEFT, BOTTOM)”となります．

行間を設定する

行間を設定するには”textLeading”を使用します．

void setup(){
  size(500, 500);
  textSize(100);
  text("a\nb\nc", 20, 100);
  textLeading(120);
  text("a\nb\nc", 120, 100);
  textLeading(100);
  text("a\nb\nc", 220, 100);
}

テキストを表示させる際に”\n”を使用することで改行をすることができます．このときの行間を調整するには”textLeading”の引数に行間をpixel単位で入力します．上記のプログラム実行結果を見ると明らかなように何も設定していないと行間が空きすぎているので，改行をする必要があるときはこのコマンドは重宝しそうです．

文字のサイズを測る

表示させる文字のサイズを測り，それに合わせてラインを引くこともできます．このようなときに使用されるコマンドが以下の3つです．

textWidth() ：文字の幅を測定する
textAscent() ：文字の上側を測定
textDescent() ：文字の下側を測定

最初の”textWidth”のみ引数に文字列を入力する必要があります．

void setup(){
  size(500, 500);
  textSize(100);
  String t = "agh"; 
  float w = textWidth(t);
  text(t, 150, 250);
  stroke(0, 0, 255);
  line(150, 100, 150, 400);
  line(100, 250, 400, 250);
  stroke(255, 0, 0);
  line(150+w, 100, 150+w, 400);
  line(100, 250-textAscent(), 400, 250-textAscent());
  line(100, 250+textDescent(), 400, 250+textDescent());
}