Processing 文字と画像

文字の表示についてはPFontというクラスを用います。文字を使う場合、Processingを開いたあと、メニューバーにあるTools>Create Font...をクリックします。そうするとCreate Fontという別のウィンドウが現れ、使用したいフォントとそのサイズ選択します。視覚的に滑らかなフォントを使いたいのであればSmoothにチェックを入れます。基本的な記号、数字、アルファベットを使うのであればAll Charactersのチェックを外したままで大丈夫です。
日本語などを使う場合はチェックを入れて使いますがデータはその分大きくなります。All Charactersにチェックを入れると、全てのフォントデータを取り込むためにやや時間がかかるときがあります。日本語の大きなサイズのフォントを取り込む際にエラーが出る場合は、上記の方法のかわりにcreateFont()をつかった方法を用いてみてください（サンプルは以下にあります）。
ここでは、Monacoというフォント、サイズは12、Smoothにチェックを入れることにします。Filename欄にはMonaco-12が表示され、その拡張子.vlwがあることが確認できます。OKボタンを押してウィンドウを閉じると指定したフォントの準備が整います。現在開いているsketchファイル（例えば「sketch_08513a」という名前）を一旦保存(File>save)すると、Macintoshであれば、/User/username/Documents/Processing/sketch_08513a/data内にフォントのファイル(例えばMonaco-12.vlw） が入ってます。WindowsならC:¥Documents and Setting¥username¥My Documents¥Processing¥sketch_08513a¥data内に入っています。文字を使用する場合、必要なフォントがsketchフォルダ内のdataフォルダに入っていないとエラーがでます。同様に、jpegなどの画像や音源などを使用する際も、dataフォルダに入れておく必要があります。
以下では、クリックによって文字が切り替わるプログラムをします。一文字ごとの変数にはchar、そして単語などの連なった文字（文字列）にはString型の変数を用います。尚、文字列は「"文字"」のようにダブルクオーテーションマークで文字列の両端を括ります。一文字だけのcharなら「'A'」のようにシングルクオーテーションマークで括ります。

PFont font; //フォントの使用
String tx; //文字列の変数を用意

void setup(){
  size(400,200);
  //指定フォントのロード
  font = loadFont("Monaco-12.vlw");
  //フォントを使用開始、サイズ：12
  textFont(font,12);
  //初期の表示文字を"CLICK"に設定
  tx="CLICK";
}

void draw(){
  text(tx,200,100);
}

void mousePressed(){
  tx="HELLO";
}
void mouseReleased(){
  tx="CLICK";
}

日本語フォントを使う場合は、createFont()を使用します。その際「Tools>Create Font...」でフォントを選択する必要はありません。

PFont myFont;

void setup() {
  size(400, 200);
  myFont = createFont("Osaka", 32);
  textFont(myFont);
}

void draw(){
  background(0);
  text("建築発明工作ゼミ", 10, height/2); 
}

画像の取り込みについては、PImageというクラスを使います。Processingでは、gif、jpeg、tga、pngの画像フォーマットに対応しています。予め用意した画像をdataフォルダ（前述）に入れておく必要があります（dataフォルダがない場合は、sketchフォルダ内に「data」という名前をつけてフォルダを作成しておきます）。
以下のサンプルでは画像を二種類（start.jpgとstop.jpg）用意し、最初に画像Aが表示されており、マウスボタンを押したら画像Bに切り替わり、放したら画像Aに戻るというプログラムをします。切り替えには前回用いたflagというboolean型の変数を用いて、現在画像Aが表示されているか画像Bが表示されているか記憶させておきます。

PImage imgA;//画像A用にimgAを用意
PImage imgB;//画像B用にimgBを用意
boolean flag;//切り替えのフラグを用意

void setup(){
  size(400,200);
  //imgAには"start.jpg"という画像をロード
  imgA=loadImage("start.jpg");
  //imgBには"stop.jpg"という画像をロード
  imgB=loadImage("stop.jpg");
  //最初にimgAを100,50の位置に表示しておく
  image(imgA,100,50);
  //フラグはfalse（imgA表示）に設定
  flag=false;
}

void draw(){
  background(0);
  if(flag==false){//falseの場合imgA表示
    image(imgA,100,50);
  }else{//それ以外（true）の場合imgB表示
    image(imgB,100,50);
  }
}
void mousePressed(){
  //押すとtrue（imgB表示）
  flag=true;
}
void mouseReleased(){
  //放すとfalse（imgA表示）
  flag=false;
}