質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

718閲覧

実行結果をグレーの四角ではなく、ボタンを表示させたい。

退会済みユーザー

退会済みユーザー

総合スコア0

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2021/12/06 03:02

プロセシングで「ボタンが押されたら、画面が変わる」というのを作っていて、

以下のコードでやったら、エラーは出ないものの
グレーの四角が表示されただけでした。

class Button {
float x, y;
float sizeX, sizeY;
int state;

color baseCol;
float nb;
float sb;
float pb;

String str;

Button(float x, float y, float sizeX, float sizeY, color baseCol, String str) {
this.x=x;
this.y=y;
this.sizeX=sizeX;
this.sizeY=sizeY;
this.baseCol=baseCol;
this.str=str;

nb=1; //normalBrightness sb=0.8; //selectBrightness pb=0.6; //pushBrightness

}

void run() {
rogic();
display();
}

void display() {
noStroke();
changeColor();
rect(x, y, sizeX, sizeY);

fill(0, 0, 100); textSize(30); text(str, x, y);

}

void rogic() {
state=checkState();
}

//===================================================================
boolean isPush() {
if (checkState()==2) return true;
return false;
}

int checkState() {
if (!checkInMouse()) return 0;
if (!mousePressed) return 1;
return 2;
}

boolean checkInMouse() {
if (mouseX>x-sizeX/2&&mouseX<x+sizeX/2) {
if (mouseY>y-sizeY/2&&mouseY<y+sizeY/2) {
return true;
}
}
return false;
}

void changeColor() {
switch(state) {
case 0:
fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*nb);
break;

case 1: fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*sb); break; case 2: fill(hue(baseCol), saturation(baseCol), brightness(baseCol)*pb); break; default: fill(0, 0, 0); break; }

}
}
このコードで、四角ではなくボタンを表示させる方法は、どうすればよろしいですか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

参考コードがある場合は質問に出典を明示してください。
ボタンとシーン遷移の実装【Processing】 - トーフメモ

以下のコードでやったら、エラーは出ないものの
グレーの四角が表示されただけでした。

提示コードにはvoid setup(){}void draw(){}がありませんが、それらはどうなっていますか?
おそらくdraw()でグレーの四角だけ描いているのでしょう。

このコードで、四角ではなくボタンを表示させる方法は、どうすればよろしいですか?

提示コードはボタンの処理が書かれているだけで、それを使う部分がありません。
参考ページにある「シーンを作る」というコードが必要です。

そのままなのも何なんで、勝手に改変させていただきました(改悪かな?^^;

Processing

1Button button; 2int scene = 0; 3 4void setup() { 5 size(600, 600); 6 rectMode(CENTER); 7 colorMode(HSB, 360, 100, 100, 100); 8 textAlign(CENTER, CENTER); 9 10 button = new Button(width / 2, height / 2, 200, 100, color(190, 100, 70), "PUSH!"); 11} 12 13void draw() { 14 background(0, 0, 100); 15 fill(0, 0, 0); 16 text("scene " + scene, width / 2, height / 4); 17 18 switch(scene) { 19 case 0: 20 button.run(); 21 if (button.isPush()) { 22 scene = 1; 23 } 24 break; 25 //case 1: 26 // break; 27 } 28} 29 30 31class Button { 32 float x, y; 33 float sizeX, sizeY; 34 int state; 35 color baseCol; 36 String str; 37 38 Button(float x, float y, float sizeX, float sizeY, color baseCol, String str) { 39 this.x = x; 40 this.y = y; 41 this.sizeX = sizeX; 42 this.sizeY = sizeY; 43 this.baseCol = baseCol; 44 this.str = str; 45 } 46 47 void run() { 48 rogic(); 49 display(); 50 } 51 52 boolean isPush() { 53 return checkState() == 2; 54 } 55 56 57 void rogic() { 58 state = checkState(); 59 } 60 61 void display() { 62 noStroke(); 63 64 fill(baseCol); 65 rect(x, y, sizeX, sizeY); 66 67 switch (state) { 68 case 1: 69 fill(0, 20); 70 rect(x, y, sizeX, sizeY); 71 break; 72 case 2: 73 fill(0, 40); 74 rect(x, y, sizeX, sizeY); 75 break; 76 } 77 78 fill(0, 0, 100); 79 textSize(30); 80 text(str, x, y); 81 } 82 83 int checkState() { 84 if (!checkInMouse()) return 0; 85 if (!mousePressed) return 1; 86 return 2; 87 } 88 89 boolean checkInMouse() { 90 return mouseX > x - sizeX / 2 && mouseX < x + sizeX / 2 91 && mouseY > y - sizeY / 2 && mouseY < y + sizeY / 2; 92 } 93}

個人的にはボタン等のUIは、controlP5等のライブラリに任せたいですね。
processing GUI, controlP5

投稿2021/12/06 08:35

TN8001

総合スコア9244

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問