back to [[11_YoshidaY]]~
(このページに対する感想・苦情等受け付けます)~
- [[サンプル:https://docs.google.com/open?id=0B44PZsb4Cl6cT0t1TlVOUkc1Y0U]]作りました。けど適当に作ったんで、バグとか色々堪忍ね。 -- [[11_YoshidaY]] &new{2012-05-13 (日) 01:27:11};
#comment
*ProcessingでのGUIの作り方 [#e0793fa4]
#contents
(2012.4.25)~
**はじめに [#vee76941]
Processingは元々プログラムのプロトタイプを作るためのものっぽいので、GUIに関してはあんまり考えてないんだと思うんですが、まぁ世の中偉い人ばっかでGUIを使える方法も色々あるようです。~
そこでぽちが今知ってる方法として~
-専用のライブラリをインストール~
-パソコンに最初から入ってるjavaのGUI機能を利用~
と二つあります。~
最近までjavaでやってたんやけども、これはjavaの書き方しか通用しないんで、Processingしかできないオレは向いてませんでした。そこで今回は専用ライブラリをインストールしてもらって作って行きます。~
**下ごしらえ [#y4432c64]
-[[ControlP5ライブラリ:http://www.sojamo.de/libraries/controlP5/]]をインストール~
--インストール方法~
①サイト開いたら、→側のDownloadの、「.zip format」をクリック。~
②ダウンロードしたzipファイルを展開~
③展開したフォルダの「controlP5-0.7.2」の中にある「controlP5」フォルダを「Processing-1.5.1」→「modes」→「java」→「libraries」の中にコピーします。~
④Processingを開いて、【example】の【Libraries】の中を見るとcontrolP5ってとこにたくさんサンプルが入ってます。今回はこれは無視します。~
**さっそくコピペタイム [#i8b2e734]
import controlP5.*; //ライブラリを読込
ControlP5 cp5; //とりあえず宣言
ControlWindow cwindow; //ウィンドウを１つ作ります宣言
ControlFont cfont; //フォントを１つ用意します宣言
int btn; //ボタン用の変数
void setup() {
size(400, 400);
cfont = new ControlFont(createFont("MS-GOTHIC",20)); //MSゴシックを20のサイズで。
cp5 = new ControlP5(this);
cwindow = cp5.addControlWindow("Another Window", 500, 100, 120, 340)
.hideCoordinates()
.setBackground(255)
.setUpdateMode(ControlWindow.NORMAL);
//addControlWindow("ウィンドウのタイトル", 初期位置X, 初期位置Y, 横サイズ, 縦サイズ)
//hideCoordinates()→これがないとタイトルの後ろになんか数字付きます
//setBackground(Another Windowの背景の色)
createButton("A", 0, 5, 5);
createButton("B", 1, 5, 60);
createButton("C", 2, 5, 115);
createButton("D", 3, 5, 170);
createButton("E", 4, 5, 225);
createButton("F", 5, 5, 280);
//createButton("ボタンの名前", ボタンが持つ数字, X座標, Y座標)
}
void draw() {
background(255);
println("Button = " + btn);
}
Button createButton(String theName, int theValue, int theX, int theY) {
Button b = cp5.addButton(theName,theValue,theX,theY,110,50);
//addButton(~,~,~,~,ボタンの横サイズ,縦サイズ)
b.captionLabel().setControlFont(cfont);
b.setWindow(cwindow);
return b;
}
public void A(int BtnValue) {btn = BtnValue;}
public void B(int BtnValue) {btn = BtnValue;}
public void C(int BtnValue) {btn = BtnValue;}
public void D(int BtnValue) {btn = BtnValue;}
public void E(int BtnValue) {btn = BtnValue;}
public void F(int BtnValue) {btn = BtnValue;}
//createButton("A", 0, 5, 5);で名付けた、""の部分と同じ名前の関数を作ると、そこにボタンの値が入る。
はいこれでだいたい終わり。~
注釈ない所は気にしだしたらポカーンってなる所です。~
ウィンドウに何か描画したいって人もいると思うんですが、ただいま深夜2:40ですのでそろそろ寝ますー。~
また時間ある時に追記しますね。~
**応用プログラム [#qaf3e891]
(2012.4.26)~
おはようございます。~
昨日書いたのでほぼ全部なんですが、実際にボタンとしてどう使うかを書いてなかったのでそこに関してだけ書いておきます~
↑のプログラムでは、ボタンそれぞれに“ある数字”を持たせています。~
ボタンによる描画の切り替えをしたい時、ボタンが押された時、その数字が何かを判断することで切り替えをします。~
createButton("A", 0, 5, 5);
（ある数字とはこのコードで言う、0の部分です。~
このコードで作成されたボタンは、押すと「０だから！」と叫びます。~
するとbtnっていう変数がそれを受け取る仕様になってます。~
そこで、~
if(btn == 0) {
fill(0);
}
ellipse(width/2, height/2, 40, 40);
みたいに書くと、Aボタンを押すと円が黒く塗りつぶされるプログラムになります。~
これを増やすと、~
stroke(0); strokeWeight(2);
if(btn == 0) {
fill(0); //黒
} else if(btn == 1) {
fill(255); //白
} else if(btn == 2) {
fill(255, 0, 0); //赤
} else if(btn == 3) {
fill(0, 255, 0); //緑
} else if(btn == 4) {
fill(0, 0, 255); //青
} else if(btn == 5) {
noFill(); //塗りつぶしなし
}
ellipse(width/2, height/2, 40, 40);
と書けて、円の中の色が変わるプログラムになります。~
あ、↑のはvoid draw() { }の中に入れてくださいね。~
ではでは、学校行ってきます。~
**参考ページ [#x515c140]
-[[Control P5のチュートリアル:http://d.hatena.ne.jp/seinzumtode/20120125/1327486534]]~
-[[Processing ControlP5 library example 1 : user interface:http://www.kasperkamperman.com/blog/processing-code/controlp5-library-example1/]]~
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
