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

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

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);  //円を描画
  }
}

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

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);  //円を描画
  }
}