P5
p5js

text, PFont

文字を描画する

text( 文字列, x, y );　文字列を描画する
　例：text( "Hello", 100, 100 ); // Helloという文字を座標(100, 100)に描画する

textSize( 文字サイズ );　文字サイズを指定する
　例：textSize( 24 ); // 文字サイズを 24 にする

textAlign( 揃え位置 );　文字の揃え位置を指定する
　引数は LEFT(左揃え), CENTER(中央揃え), RIGHT(右揃え)の３種類。デフォルトは左揃え。
　例：textSize( CENTER ); // 文字を中央揃えで表示する

サンプル

コード

void setup(){
  size( 600, 400 );
  frameRate( 20 );
}

void draw(){
  background( 0 );
  
  textSize( 32 );
  textAlign( CENTER );
  fill( random(255), random(255), random(255) );
  text( "Colorful text", width/2, height/2 );
}

文字色は fill 関数で指定します。RGBにランダム値を入れているため文字色がキラキラしています。

フォントを指定する

PFont;　フォントデータオブジェクト
　フォントデータ用のデータ型です
　例：PFont myFont; // myFontという変数名でフォントデータオブジェクトを宣言

createFont( フォント名, フォントサイズ );　フォントデータの作成
　フォント名とサイズを指定して PFont 型のオブジェクトを作成します
　例：createFont( "Georgia", 24 ); // Georgia フォントをサイズ 24 で作成

textFont( PFontオブジェクト );　使用するフォントを指定する
　例：textFont( myFont ); // フォントを myFont 変数に設定されたフォントに指定

サンプル

コード

PFont myFont1;
PFont myFont2;

void setup(){
  size( 600, 400 );
  
  myFont1 = createFont( "Georgia", 28 );
  myFont2 = createFont( "Arial", 42 );
}

void draw(){
  background( 245 );
  
  textFont( myFont1 );
  fill( 60 );
  text( "I am Georgia.", 150, 150 );
  
  textFont( myFont2 );
  fill( 60 );
  text( "I am Arial.", 150, 260 );
}

フォントをエディタから作成する

createFont 関数を使う以外にも、エディタ上でフォントデータを事前に作成し、それを読み込むことによっても PFont 型の変数を作成できます。

エディタのメニューから「ツール(Tool)」＞「フォント作成(Create Font)」を選択します。パソコンにインストールされているフォントのリストが表示されるので、使いたいフォントを選び、フォントサイズとフォント名を決めて「OK」ボタンを押します。すると vlw という拡張子でフォントデータが作成され、プログラムフォルダ内の data フォルダ内に vlw ファイルが格納されます。

このフォントをプログラム内で使うには loadFont 関数を使います。

loadFont( フォントファイル名 );　フォントデータを読み込む
　例：PFont myFont = loadFont( "myfontname.vlw" );

サンプルコード

PFont myFont;

void setup(){
  size( 600, 400 );
  myFont = loadFont( "Serif-28.vlw" ); // 作成したフォントを読み込む
}

void draw(){
  background( 245 );
  
  textFont( myFont );
  fill( 60 );
  text( "message", 150, 150 );
}

上述の手順で事前に Serif-28 の名前でフォントを作成しこのコードを実行すると、作成したフォントで文字が描画されます。

日本語を表示する

Processingのフォント機能ではデフォルトでは日本語を表示できませんが、日本語フォントデータを作成することで日本語の表示もできるようになります。エディタのメニューから「ツール(Tool)」＞「フォント作成(Create Font)」を選択します。ウィンドウ右下の「Characters...」を押すと新しいウィンドウが開きます。「Specific Unicode Blocks」にチェックを入れます。リストの中から「Hiragana」と「Katakana」と「CJK Unified Ideographs」の項目にチェックを入れて、OKボタンを押します。フォント作成ウィンドウに戻るので、フォント名とフォントサイズを指定しましょう。フォントリストの下部にサンプルテキストが表示されていますが、ここをクリックすると文言を変えることができるので、日本語の文章を入力しましょう。フォントリスト内の項目をクリックするとそれに応じてサンプルテキストの表示も変わるので、好きなフォントを選びましょう。「OK」を押すとフォントデータが作成されます。あとは上のサンプルコードと同様の方法で作成したフォントを読み込みましょう。

Processingのエディタ上では日本語を打てないので、テキストファイルなどで text( "日本語テキスト", 150, 150 ); などと打ち、これをエディタ上にコピペします。エディタ上では日本語の部分が文字化けしますが、プログラムを実行するときちんと指定した日本語の文字列が描画されます。

コメント

Copied title and URL