Processing テキストファイルの読み込みと表示

お久しぶりです。
あっさり更新ですが、Processingでテキストファイルを読み込む際の基本的なサンプルコードをメモ代わりに置いておきます。
ファイルを1行ずつ文字型の1次元配列に読み込み、コンソールに出力します。

読み込むファイルは、ソースコードが置いてある階層に置きます。

用意するテキストファイルはこちら。

16,car
15,fruit
14,jewel
13,rocket
12,medal

これを「text.txt」というファイル名で保存します。

読み込むためのコードはこちら。

String lines[];

void setup(){
lines = loadStrings("text.txt");
for(String val:lines){
println(val);

}
}


実行した結果がこちら。


これはあらかじめデータがそろっているテキストファイルを扱うときのサンプルコードです。
また、読み込まれたデータは文字列のままなので、split()でカンマごとに区切ったり、int()で整数地に変換したりすることができます。

それでは、短いですが今回はこの辺りで。

Processing ControlP5のDropdownListを使ってみる。

とてもお久しぶりです。夏休みを楽しんでおりました。
そして夏休みは死にました。新学期始まってない筈なんですが。

さて、今回はタイトル通りProcessingのGUI系のライブラリであるControlP5より、DropdownListとやらを使うためのメモを残しておこうと思います。
DropdownList、ドロップダウンリストとはなんぞやという話なんですが、例えばテキストエディタなんかの上部のツールバーから「ファイル」を選択すると「新規」「開く」「保存」なんかの選択肢がずらっと出てきますよね。あれです。プルダウンメニューとか言ったりもします。



これです。これがControlP5のDropdownListクラスを使うことで実現することができます。


DropdownListクラスのコンストラクタ

DropdownList("ドロップダウンリストの名前")


名前はString型です。


DropdownListのメソッド

setPosition(int X座標,int Y座標)


ドロップダウンリストの位置を設定します。


setSixe(int 横幅,int 縦の長さ)


ドロップダウンリストの大きさを設定します。設定しなくても勝手に調節されます。


actAsPulldownMenu(boolean)


ドロップダウンリストをプルダウンメニューのように動作させるかどうか設定します。
初期値はtrueです。


addItem(String ラベル,int 値)


ドロップダウンリストに新しく項目を追加します。
値やラベルが被っていても新たに追加されます。


addItemns(List ラベルのリスト)
addItems(String ラベルのリスト)
addItemns(List ラベルのリスト,int 開始の値)


ドロップダウンリストにリストの中身をラベルにして項目を追加します。
開始の値を設定しない場合、値には0,1,...と自動的に数値が設定されます。
設定した場合、そこから例えば5,6,...と数値が設定されます。


removeItem(String ラベル)


ドロップダウンリストから指定したラベルの項目をひとつ削除します。
同じラベルを持つ項目が複数ある場合、新しいものがひとつ削除されます。


beginItems()


調査中です。


clear()


ドロップダウンリストのすべての項目を削除します。


getItem()


調査中です。



色の設定

ドロップダウンリストも8桁の16進数で色を設定します。
詳しくはこちらの記事をご参照ください。
16進数は数字の前に0xをつけることで表現できます。


setColorActive(int 色)

ラベルをクリックしたときの色を設定します。


setColorBackground(int 色)

ドロップダウンリストの背景の色を設定します。


setColorForeground(int 色)

ドロップダウンリストまたはラベルにオンマウスしたときの色を設定します。


setColorLabel(int 色)

ラベルの文字色を設定します。


setColorValue(int 色)

クリックしたときのラベルの色を設定します。


setColor(CColor 色)

CColor型のクラスを使い、ドロップダウンリストの色を一気に設定します。
CColor型クラスについてはもう少し調査します。


その他の設定

setHeight(int 高さ)

ドロップダウンリストの高さを設定します。
この高さはプルダウンしたときのラベル一覧も含めての高さです。


setIndex(int 値)

指定した値のラベルをコントロールイベントに渡します。
ラベルを選択した時と同じ効果があります。


setItemHeight(int ラベルの高さ)

ラベルの高さを設定します。


すみません力尽きたので後日残りを追記したいと思います。
今回はこの辺りで。

Processingを実行したら動作が重かったので修正したときの覚書

Processingで引き続きシステムを作っています。
今回、

マウスで画面上に配置されたボタンをクリックする→テキストエリアに文字列が表示される

というシステムを作ってデモを行っていました。

が、実行してみると何故か挙動がおかしい。
具体的にいうと、一回目にボタンを押したときだけレスポンスが妙に遅い。
二回目以降は迅速なレスポンスが返ってくるのに…。

別のプログラムでサーバーを立て、クライアントとしての動作もさせていたので通信部分の不具合化と思いいろいろ試しましたが直りません。
30分程悩んでいたところ、なんとか原因が究明できました。

ボタンを押したときに文字列を書き込む。ここが問題でした。
一回目にボタンを押したとき、初めて文字を使用することになります。
すなわち、フォントの設定などの処理が初めてボタンが押された瞬間に行われていたようです。
そのため、最初の一回のみ処理が多くなり、まるでフリーズしたかのような挙動になってしまっていたのですね。

setup()の処理の中であらかじめ開始の合図の文字列を表示させておいたところ、ボタンはきちんと動作するようになりました。
同じ現象を再現できたので、サンプルを貼っておきます。
前回のボタンのサンプルの1_1、1_2と同じ素材を使用しています。


PImage button1_1,button1_2;

boolean flag1 = false;

void setup(){
size(400,450);
button1_1 = loadImage("button1_1.png");
button1_2 = loadImage("button1_2.png");
//text("button Released!",100,200); //<---1
image(button1_1,50,50);
}

void draw(){}

void mousePressed(){
if(mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
flag1 = true;
println("Button Pressed!");
image(button1_2,50,50);
}
}

void mouseReleased(){
if(flag1 == true && mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
println("Button Released!");
text("button Released!",100,200); //<---2
}
flag1 = false;
image(button1_1,50,50);
}


コメントで1、2と書いてある部分が今回の問題の原因となったコードです。
このまま実行すると、2の部分でボタンを押した一回目の処理が遅くなることがわかります。
そこで、1の部分のコメントアウトを外してみましょう。
setup()の中でフォントの読み込みの処理が行われ、ボタンの動作には影響しなくなります。

通信部分のバグだと思い込んでいたので、目から鱗でした。
フォントの読み込みのタイミングには気をつけましょう。

それでは、今回はこの辺りで。

Processing スライダーとかControlP5のオブジェクトの色を変更するときのメモ

タイトルの通りスライダーの色を変更するとこでちょっと詰まったのでメモ。
参考はこちらのサイト。

以下はすべてControllerInterfaceというインタフェースのメソッドです。
ControllerIntarfaceを実装しているクラスはこれを使うことができます。
公式のリファレンスはこちら(英語)。


setColorBackground(int)

オブジェクトの背景色を設定します。引数はintです(下で詳しく説明しているので合わせて読んでください)。
スライダーの場合は下地の色になります。


setColorForeground(int)

オブジェクトの前面の色(?)を設定します。引数はintです。
スライダーの場合はマウスがスライダーに乗っていない(アクティブでない)ときのスライダーの色になります。


setColorActive(int)

オブジェクトにマウスが乗っているとき(アクティブなとき)の色を設定します。引数はintです。
スライダーの場合はアクティブなときのスライダーの色になります。


色の表現方法について。

これまで、例えば矩形や文字の色などを設定するときは、255階調グレースケールやRGB値などいろいろな方法で色を決定することができました。
ところが、どうやらControlP5のオブジェクトはこれらの方法ではなくint型で設定する必要があるようです(未検証です)。
色情報は32ビットのデータで表現されます。



こんな感じです。RGB形式またはHSV形式を選択でき、デフォルトはRGBです。
なので、32ビットを4ビットごとに区切って8桁の16進数で設定しましょう。
RGB形式については各自でお勉強お願いします。最初の8ビット(=2バイト)は透明度なので注意。

これでスライダーを自分好みの色に設定することができます。

それでは、今日はこの辺りで。

Processingのボタンのサンプルコード

2種類のボタンを作ってみました。
ひとつは押すとへこみ、押し続けて離したときに処理が行われるボタンです。
押したままボタン以外のところにカーソルを持っていって離すと処理はキャンセルされます。
もう一つは押しボタンです。一回クリックするとボタンがへこみ、もう一度クリックすると戻ります。
手を離してもボタンはへこんだままです。

画像には以下のものを用いています。
画像はdataというフォルダをつくって入れてやりましょう。


※ファイル名:button1_1.png



※ファイル名:button1_2.png



※ファイル名:button2_1.png



※ファイル名:button2_2.png


以下のサンプルを作ってみました。

実行してみるとこんな感じになります。








実際に触ってみると、二つのボタンの違いがわかると思います。

PImage button1_1,button1_2;
PImage button2_1,button2_2;

boolean flag1 = false;
boolean flag2 = false;

void setup(){
size(400,450);
button1_1 = loadImage("button1_1.png");
button1_2 = loadImage("button1_2.png");
button2_1 = loadImage("button2_1.png");
button2_2 = loadImage("button2_2.png");

image(button1_1,50,50);
image(button2_1,50,250);
}

void draw(){}

void mousePressed(){
if(mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
flag1 = true;
println("Button1 Pressed!");
image(button1_2,50,50);
}
}

void mouseReleased(){
if(flag1 == true && mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
println("Button1 Released!");
}
flag1 = false;
image(button1_1,50,50);
}

void mouseClicked(){
if(mouseX >= 50 && mouseX <= 350 && mouseY >= 250 && mouseY <= 400){
if(flag2 == false){
println("Button2 pushed!");
fill(get(0,0));
noStroke();
rect(50,250,300,150);
image(button2_2,50,250);
flag2 = true;
}else{
println("Button2 unpushed!");
fill(get(0,0));
noStroke();
rect(50,250,300,150);
image(button2_1,50,250);
flag2 = false;
}
}
}


Procesingは、画面に上書きしていくかのように描画を行っています。
そこで入れ替える画像のサイズが違う場合は、mouseClicked()の中の処理のように、一度背景色で画像を塗りつぶしてやってから新しい画像を描画する必要があります。

また時間がありましたら詳しく追記します。

2015/07/08 各関数についてメモ程度に追記しておきます。


1,2行目
PImage

Processingの中で画像を扱うためのクラスです。


9~12行目
loadImage("ファイル名")

PImageクラスの変数に外部から画像を読み込んでいます。
読み込む画像はあらかじめdataファイルの中に置いておきましょう。参考


14,15行目
image(PImage,int,int)

画像を描画します。引数は読み込むPImage、X座標、Y座標です。


40行目
fill(color)

次に描画する図形や文字の色を指定します。引数はグレースケール、RGBなどです。


40行目
get(int,int)

ウィンドウの指定したピクセルの色を取得します。引数はX座標、Y座標です。


41行目
noStroke()

次に描画する図形の枠線を描画しないように設定します。


42行目
rect(int,int,int,int)

矩形を描画します。引数は、矩形の左上の点のX座標、Y座標、矩形の幅、矩形の高さです。




それでは、今日はこの辺りで。