Processingでボタンとかウィンドウをもう一個とかのGUIを使う方法
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
back to [[11_YoshidaY]]~
(このページに対する感想・苦情等受け付けます)~
- [[サンプル:https://docs.google.com/open?id=0B44PZsb4Cl6...
#comment
*ProcessingでのGUIの作り方 [#e0793fa4]
#contents
(2012.4.25)~
**はじめに [#vee76941]
Processingは元々プログラムのプロトタイプを作るためのもの...
そこでぽちが今知ってる方法として~
-専用のライブラリをインストール~
-パソコンに最初から入ってるjavaのGUI機能を利用~
と二つあります。~
最近までjavaでやってたんやけども、これはjavaの書き方しか...
**下ごしらえ [#y4432c64]
-[[ControlP5ライブラリ:http://www.sojamo.de/libraries/con...
--インストール方法~
①サイト開いたら、→側のDownloadの、「.zip format」をクリッ...
②ダウンロードしたzipファイルを展開~
③展開したフォルダの「controlP5-0.7.2」の中にある「control...
④Processingを開いて、【example】の【Libraries】の中を見る...
**さっそくコピペタイム [#i8b2e734]
import controlP5.*; //ライブラリを読込
ControlP5 cp5; //とりあえず宣言
ControlWindow cwindow; //ウィンドウを１つ作ります宣言
ControlFont cfont; //フォントを１つ用意します宣言
int btn; //ボタン用の変数
void setup() {
size(400, 400);
cfont = new ControlFont(createFont("MS-GOTHIC",20)); /...
cp5 = new ControlP5(this);
cwindow = cp5.addControlWindow("Another Window", 500, ...
.hideCoordinates()
.setBackground(255)
.setUpdateMode(ControlWindow.NORMAL);
//addControlWindow("ウィンドウのタイトル", 初期位置X, ...
//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座標...
}
void draw() {
background(255);
println("Button = " + btn);
}
Button createButton(String theName, int theValue, int th...
Button b = cp5.addButton(theName,theValue,theX,theY,11...
//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);で名付けた、""の部分と同じ...
はいこれでだいたい終わり。~
注釈ない所は気にしだしたらポカーンってなる所です。~
ウィンドウに何か描画したいって人もいると思うんですが、た...
また時間ある時に追記しますね。~
**応用プログラム [#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/seinz...
-[[Processing ControlP5 library example 1 : user interfac...
終了行:
back to [[11_YoshidaY]]~
(このページに対する感想・苦情等受け付けます)~
- [[サンプル:https://docs.google.com/open?id=0B44PZsb4Cl6...
#comment
*ProcessingでのGUIの作り方 [#e0793fa4]
#contents
(2012.4.25)~
**はじめに [#vee76941]
Processingは元々プログラムのプロトタイプを作るためのもの...
そこでぽちが今知ってる方法として~
-専用のライブラリをインストール~
-パソコンに最初から入ってるjavaのGUI機能を利用~
と二つあります。~
最近までjavaでやってたんやけども、これはjavaの書き方しか...
**下ごしらえ [#y4432c64]
-[[ControlP5ライブラリ:http://www.sojamo.de/libraries/con...
--インストール方法~
①サイト開いたら、→側のDownloadの、「.zip format」をクリッ...
②ダウンロードしたzipファイルを展開~
③展開したフォルダの「controlP5-0.7.2」の中にある「control...
④Processingを開いて、【example】の【Libraries】の中を見る...
**さっそくコピペタイム [#i8b2e734]
import controlP5.*; //ライブラリを読込
ControlP5 cp5; //とりあえず宣言
ControlWindow cwindow; //ウィンドウを１つ作ります宣言
ControlFont cfont; //フォントを１つ用意します宣言
int btn; //ボタン用の変数
void setup() {
size(400, 400);
cfont = new ControlFont(createFont("MS-GOTHIC",20)); /...
cp5 = new ControlP5(this);
cwindow = cp5.addControlWindow("Another Window", 500, ...
.hideCoordinates()
.setBackground(255)
.setUpdateMode(ControlWindow.NORMAL);
//addControlWindow("ウィンドウのタイトル", 初期位置X, ...
//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座標...
}
void draw() {
background(255);
println("Button = " + btn);
}
Button createButton(String theName, int theValue, int th...
Button b = cp5.addButton(theName,theValue,theX,theY,11...
//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);で名付けた、""の部分と同じ...
はいこれでだいたい終わり。~
注釈ない所は気にしだしたらポカーンってなる所です。~
ウィンドウに何か描画したいって人もいると思うんですが、た...
また時間ある時に追記しますね。~
**応用プログラム [#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/seinz...
-[[Processing ControlP5 library example 1 : user interfac...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
