[Processing]文字列の描画(PFont型、loadFont・textFont・text・textAlign命令) : うえちょこ＠ぼろぐ

[Processing]文字列の描画(PFont型、loadFont・textFont・text・textAlign命令)

Written by uechoco 2 月 06

　[Processing]フォントデータの作成(vlw)で作成したフォントデータ(vlwファイル)を使って、文字列の描画ができます。

　フォントデータは、PFontオブジェクトを通して扱います。画像のときのPImageオブジェクトみたいなものですね。フォントデータからPFontオブジェクトを作成するにはloadFont()命令を使います。これも画像のときのloadImage()に似ています。

　textFont()命令は、使用するフォントとそのサイズを指定します。

　textAlign()命令は、文字の揃え方を指定します。デフォルトはLEFTで、他にCENTERやRIGHTがあります。

　最後に、text()命令で文字列を描画します。

1-1.PFont font;
PFontオブジェクトの宣言

1-2.loadFont("フォントデータ名");
フォントデータをPFontオブジェクトに読み込む

1-3-1.textFont(PFontObject);
使用するフォントを指定。

1-3-2.textFont(PFontObject, fontSize);
使用するフォントとそのサイズを指定。

1-4.textAlign(mode)
文字列の揃え方を指定。デフォルトはLEFTで、他にCENTERやRIGHTもあり。

1-5-1.text("描画する文字列", x, y);
指定の場所に文字列を描画。

1-5-2.text("描画する文字列", x, y, boxWidth, boxHeight);
指定の領域内に文字列を描画。

PLAIN TEXT

Processing:

size(200, 200);
colorMode(HSB, 100);
background(90, 10, 100);
 
// 予めフォントを作成しておく
// PFontオブジェクトの作成
PFont font = loadFont("IPAUIGothic-24.vlw");
 
// 使用するフォントとそのサイズを指定
textFont(font, 24);
 
// 行揃えを中央揃えに
textAlign(CENTER);
 
// 初期化
String hira = "あかさたなはまやらわ";
int len = hira.length();
int angle = 360 / len;
int radius = 50;
 
// 描画の前準備
smooth();
noStroke();
translate(width / 2, height / 2);
 
// 文字列を円状に配置
for (int i = 0; i &lt;len; i++) {
  pushMatrix(); // 保存
 
  // 基点の回転
  rotate(radians(i * angle));
  translate(radius, 0);
  rotate(radians(90));
 
  // 文字の描画
  fill(i * angle * 100 / 360, 100, 100);
  text(hira.charAt(i), 0, 0);
 
  popMatrix(); // 復元
}