文字を任意の場所に描画するには

◆PROCESSING　逆引きリファレンス

　カテゴリー：文字関連処理

【解説】
読み込んだ文字を指定の位置に描画するには、text()命令を使います。

text命令は多彩な引数がある命令です。最もよく使うのは String型の文字列を引数に与えるケースではないでしょうか？（下記構文の赤字命令）。

text()命令の表示は、通常左から右へ向かう横書きスタイルになりますが、text(str, x1, y1, x2, y2)　命令を上手く使うと、簡単に縦書きスタイル（上から下へ）が実現できます。

各引数の例はサンプルソースを参照してください。

【構文】
以下は代表的な構文です。
text(c, x, y)
text(str, x, y)
text(str, x1, y1, x2, y2)

【パラメータ】
c   char: 表示する英数字
x   float: テキストの x 座標
y   float: テキストの y 座標
x1   float: デフォルトではテキストの x 座標。rectMode() で意味が変わる
y1   float: デフォルトではテキストの y 座標。rectMode() で意味が変わる
x2   float: デフォルトではテキストボックスの幅。rectMode() で意味が変わる
y2   float: デフォルトではテキストボックスの高さ。rectMode() で意味が変わる

【戻り値】
void

【注意】
text()命令の動作は、textAlign()命令、rectMode()命令の影響を受けます。
デフォルトのtextAlign()位置は、文字の左下（正確にはtextAlign(LEFT、BASELINE);）である事に注意が必要です。

テキストのアライメントについては、「文字を揃えるには」記事を参考にしてください。

またtext()命令で表示されるフォントはtextFont() で指定されたものになります。フォントサイズはtextSize()で指定されたサイズ、またはtextFont()命令で指定されたサイズになります。

文字サイズが指定されていない場合、loadFont()命令で読み込む文字サイズが採用されるようです。例えばloadFont( “Meiryo-48.vlw” );なら、48ピクセルが初期値になります。

公式のリファレンスによれば、textFont()でフォントが指定されていない場合 sans-serif フォントが使われるとありますが、実際のところはちょっと不明です（汗）。

●String文字表示例：

String  s1;

size( 160, 160 );
s1 = "ほげほげ";
fill(0);  //文字は黒色
text( s1, width/2, height/2 );

String s1;

size( 160, 160 );

s1 = "ほげほげ";

fill(0); //文字は黒色

text( s1, width/2, height/2 );

縦横が160ピクセルの実行結果ウィンドウを作成し、ありがち？な「ほげほげ」とう文字を、黒色で表示しています。

表示開始位置は、縦横とも実行結果ウィンドウの半分（つまり画面中央）です。

＜出力サンプル＞

●char文字表示例：

char  c1;

size( 160, 160 );
c1 = 'あ';
fill(0);  //文字は黒色
text( c1, width/2, height/2 );

char c1;

size( 160, 160 );

c1 = 'あ';

fill(0); //文字は黒色

text( c1, width/2, height/2 );

Stringではなくcharを表示する例です。あまり面白みのないサンプルですね（汗）。

＜出力サンプル＞

●特定の枠内に文字を表示する例：

String  s1;     //表示する文字
PFont   pF;     //フォント
float   fWTop;  //表示開始縦座標
float   fWLeft; //表示開始横座標
float   th;     //文字の高さ
float   tw;     //１文字の幅
float   le;     //字間

void setup(){
  //画面サイズ、文字を指定
  size( 160, 240 );
  pF = loadFont("IPAexGothic-48.vlw");
  textFont(pF, 32);
  
  //アライメントは左下
  textAlign( LEFT, BOTTOM );
  s1 = "あいうえお";
  
  //高さ、幅、字間を計算
  th = textAscent() + textDescent(); //高さ
  tw = textWidth(str(s1.charAt(0))); //１文字の幅
  le = 2.0;      //字間
  textLeading(th+le);  //レディングは高さ＋字間
  
  //表示開始位置を計算
  fWTop = 32;
  fWLeft =  width/2 - tw/2;
  noLoop();
}

void draw(){
  //四角を描画して、中に縦書の文字を書く
  //X=窓の中央, Y=32 から 文字幅 , レディング*字数の四角
  rect(     fWLeft, fWTop, tw, (th+le)*s1.length() );
  fill(0);
  text( s1, fWLeft, fWTop, tw, (th+le)*s1.length() );
}

String s1; //表示する文字

PFont pF; //フォント

float fWTop; //表示開始縦座標

float fWLeft; //表示開始横座標

float th; //文字の高さ

float tw; //１文字の幅

float le; //字間

void setup(){

//画面サイズ、文字を指定

size( 160, 240 );

pF = loadFont("IPAexGothic-48.vlw");

textFont(pF, 32);

//アライメントは左下

textAlign( LEFT, BOTTOM );

s1 = "あいうえお";

//高さ、幅、字間を計算

th = textAscent() + textDescent(); //高さ

tw = textWidth(str(s1.charAt(0))); //１文字の幅

le = 2.0; //字間

textLeading(th+le); //レディングは高さ＋字間

//表示開始位置を計算

fWTop = 32;

fWLeft = width/2 - tw/2;

noLoop();

}

void draw(){

//四角を描画して、中に縦書の文字を書く

//X=窓の中央, Y=32 から文字幅 , レディング*字数の四角

rect( fWLeft, fWTop, tw, (th+le)*s1.length() );

fill(0);

text( s1, fWLeft, fWTop, tw, (th+le)*s1.length() );

}

ちょっと複雑な例です。text()の枠指定機能を利用して、文字を縦書にしています。

fWLeft、fWTop　の位置から、幅＝１文字分、高さ＝（文字の高さ＋字間）*文字数　の四角形を指定する事で、縦書を実現しています。
枠の高さや幅が足りないと、文字が表示されなくなるので注意が必要です。

rect()命令は枠をわかりやすく表示する為に加えている処理ですので、縦書の実現とは直接関係ありません。

文字の高さはアセント＋ディセントで求まります。文字の高さに、次の文字先頭までの字間を加えたものがレディングになります。「文字のアセントとディセント」記事を参考にしてください。

＜出力サンプル＞

●応用例

ArrayList<item> items = new ArrayList<item>();
boolean move = true;
PFont   pF;

// 文字を動かすためのクラス
class item {
  String str;
  float x, y;
  float moveX, moveY;
  color col;
  float textHeight, textWidth;
  float zoom, zoomRatioMin, zoomRatioMax, zoomSpeed;

  //コンストラクタ
  item(String txt, float x1, float y1) {
    str = txt;
    x = x1;
    y = y1;
    setTextSize(24);
    setColor(color(128, 128, 128));
    setZoomRatio(1, 1, 0);
  }
  
  // 動く量を設定
  void setMove(float x1, float y1) {
    moveX = x1;
    moveY = y1;
  }

  // 拡大縮小の量を設定
  void setZoomRatio(float min, float max, float speed) {
    zoom = 1.0;
    zoomRatioMin = min;
    zoomRatioMax = max;
    zoomSpeed = speed;
  }
  
  void setColor(color col1) {
   col = col1; 
  }
  
  void setTextSize(float size) {
   textHeight = size;
   textSize(size);
   textWidth = textWidth(str);
  }
  
  void updateTextSize(float size) {
    textSize(size);
    textWidth = textWidth(str);
  }
  
  void update(boolean b) {
    if (b) {
      // 拡大縮小の計算
      if (zoom < zoomRatioMin || zoomRatioMax < zoom) {
        zoomSpeed *= -1;
      }
      
      zoom += zoomSpeed;
      
      // 画面端の衝突計算
      if (x < 1 || width -1 < (x + textWidth)) {
        moveX *= -1;
      }
      
      if ((y - textHeight) < 1 || height - 1 < y) {
       moveY *= -1; 
      }
      
      x += moveX;
      y += moveY;
    }
    
    updateTextSize((textHeight + textHeight * zoom));
    fill(col);
    text(str, x, y);
  }
}

void setup() {
  size(640, 480);
  
  // 飛ばす文字列を設定
  String str = new String("ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789あいうえお");
  
  //１文字ずつitemインスタンスにしてArrayListに押し込む
  for (int c = 0; c < str.length(); c++) {
    items.add(new item(str(str.charAt(c)), 320, 240 )); 
  }
  
  //１文字ずつ移動量、色、拡大縮小率を設定する
  for (item i : items) {
    i.setMove(random(1, 10), random(1, 10));
    i.setColor(color(random(0, 255), random(0, 255), random(0, 255)));
    i.setZoomRatio(random(0.1, 1.0), random(1.0, 4.0), random(0.01, 0.05));
  }
  
  pF = loadFont( "Meiryo-48.vlw" );
  textFont( pF, 64 );
}

void keyPressed() {
  // aキーを押下で動きを停止させる
  if (key == 'A' || key == 'a') {
    move = !move;
  }
}

void draw() {
  background(0);
  
  for (item i : items) {
    i.update(move);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

ArrayList<item> items = new ArrayList<item>();

boolean move = true;

PFont pF;

// 文字を動かすためのクラス

class item {

String str;

float x, y;

float moveX, moveY;

color col;

float textHeight, textWidth;

float zoom, zoomRatioMin, zoomRatioMax, zoomSpeed;

//コンストラクタ

item(String txt, float x1, float y1) {

str = txt;

x = x1;

y = y1;

setTextSize(24);

setColor(color(128, 128, 128));

setZoomRatio(1, 1, 0);

}

// 動く量を設定

void setMove(float x1, float y1) {

moveX = x1;

moveY = y1;

}

// 拡大縮小の量を設定

void setZoomRatio(float min, float max, float speed) {

zoom = 1.0;

zoomRatioMin = min;

zoomRatioMax = max;

zoomSpeed = speed;

}

void setColor(color col1) {

col = col1;

}

void setTextSize(float size) {

textHeight = size;

textSize(size);

textWidth = textWidth(str);

}

void updateTextSize(float size) {

textSize(size);

textWidth = textWidth(str);

}

void update(boolean b) {

if (b) {

// 拡大縮小の計算

if (zoom < zoomRatioMin || zoomRatioMax < zoom) {

zoomSpeed *= -1;

}

zoom += zoomSpeed;

// 画面端の衝突計算

if (x < 1 || width -1 < (x + textWidth)) {

moveX *= -1;

}

if ((y - textHeight) < 1 || height - 1 < y) {

moveY *= -1;

}

x += moveX;

y += moveY;

}

updateTextSize((textHeight + textHeight * zoom));

fill(col);

text(str, x, y);

}

void setup() {

size(640, 480);

// 飛ばす文字列を設定

String str = new String("ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789あいうえお");

//１文字ずつitemインスタンスにしてArrayListに押し込む

for (int c = 0; c < str.length(); c++) {

items.add(new item(str(str.charAt(c)), 320, 240 ));

}

//１文字ずつ移動量、色、拡大縮小率を設定する

for (item i : items) {

i.setMove(random(1, 10), random(1, 10));

i.setColor(color(random(0, 255), random(0, 255), random(0, 255)));

i.setZoomRatio(random(0.1, 1.0), random(1.0, 4.0), random(0.01, 0.05));

}

pF = loadFont( "Meiryo-48.vlw" );

textFont( pF, 64 );

}

void keyPressed() {

// aキーを押下で動きを停止させる

if (key == 'A' || key == 'a') {

move = !move;

}

void draw() {

background(0);

for (item i : items) {

i.update(move);

}

（参考URL:Gpro2　様）

少し長いですが、上記サンプルを実行すると色々な文字が画面を飛び跳ねます。
Gpro2様のプログラムを（ほとんど、そのままなんですが：汗）少しだけ改編しました。Gpro2様ありがとうございます。見ていて楽しいサンプルです。

＜出力サンプル＞

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

自己啓発。人生について考える

楽しいを極めろ。人生は夢の中

文字を任意の場所に描画するには

◆PROCESSING　逆引きリファレンス

カテゴリー：文字関連処理