中間課題用のボタンのサンプル

      中間課題用のボタンのサンプル へのコメントはまだありません

Flashなどの開発環境に比べて、プログラミングでボタンを作るのは少し面倒です。
なので、一度作ったらなるべくそれを使い回す形にしておくと便利です。

2014_07_18_16_13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

void setup(){
  size(300, 300);
  background(255);
  noStroke();
  smooth();
  frameRate(30);
 
  fill(255, 0, 0);
  rect(0, 0, 50, 50);  //左のボタンを描画
  fill(0, 255, 0);
  rect(50, 0, 50, 50);  //右のボタンを描画
}
 
void draw(){
}
 
void mousePressed(){
  //もしマウスの位置が左のボタン内だったら、
  if(mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50){  
    rectMode(CENTER);  //四角の中心軸をセンターにして
    fill(255, 255, 255);
    rect(width/2, height/2, 100, 100);  //一度白を描画（前のグラフィックを削除）
 
    fill(255, 0, 0);  //赤
    rect(width/2, height/2, 100, 100);  //四角を描画
  }
  //もしマウスの位置が右のボタン内だったら、
  else if(mouseX > 50 && mouseX < 100 && mouseY > 0 && mouseY < 50){
    rectMode(CENTER);  //四角の中心軸をセンターにして
    fill(255, 255, 255);
    rect(width/2, height/2, 100, 100);  //一度白を描画（前のグラフィックを削除）
 
    fill(0, 255, 0);  //青
    ellipse(width/2, height/2, 100, 100);  //円を描画
  }
}

また、マウスオーバーすると色が変わるボタンを作る事もできます。多少煩雑ですが、基本的なアルゴリズムでも、ボタンの効果をプログラムする事ができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

void setup() {
  size(300, 300);
  background(255);
  noStroke();
  smooth();
  frameRate(30);
 
  fill(255, 0, 0);
  rect(0, 0, 50, 50);  //左のボタンを描画
  fill(0, 255, 0);
  rect(50, 0, 50, 50);  //右のボタンを描画
}
 
void draw() {
 
  //もしマウスの位置が左のボタン内だったら、
  if (mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50) {  
    fill(200, 0, 0);
    rect(0, 0, 50, 50);  //左のボタンを描画
  }else{
    fill(255, 0, 0);    
    rect(0, 0, 50, 50);  //左のボタンを描画
  }
 
  //もしマウスの位置が右のボタン内だったら、
  if (mouseX > 50 && mouseX < 100 && mouseY > 0 && mouseY < 50) {
    fill(0, 200, 0);
    rect(50, 0, 50, 50);  //右のボタンを描画
  }else{
    fill(0, 255, 0);
    rect(50, 0, 50, 50);  //右のボタンを描画
  }
}
 
void mousePressed() {
  //もしマウスの位置が左のボタン内だったら、
  if (mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50) {  
    fill(255, 255, 255);
    rect(width/2 - 50, height/2 - 50, 100, 100);  //一度白を描画（前のグラフィックを削除）
 
    fill(255, 0, 0);  //赤
    rect(width/2 - 50, height/2 - 50, 100, 100);  //四角を描画
  }
  //もしマウスの位置が右のボタン内だったら、
  else if (mouseX > 50 && mouseX < 100 && mouseY > 0 && mouseY < 50) {
    fill(255, 255, 255);
    rect(width/2 - 50, height/2 - 50, 100, 100);  //一度白を描画（前のグラフィックを削除）
 
    fill(0, 255, 0);  //青
    ellipse(width/2, height/2, 100, 100);  //円を描画
  }
}