iPhoneの計算機アプリをつくる-1

今シリーズでは，iPhoneの計算機アプリみたいなものを作成します

こんなの

プログラミング環境には，Processingを利用します
Processingのダウンロードがまだの人は，下のリンクからダウンロードをしてください
processing-p5.hateblo.jp

今回は第１回なので，まずは必要最低限の機能だけを搭載した，非常に簡単な計算機を考えましょう
下の図が初号機の完成図です

ボタンが0しかない計算機です(笑)
画面真ん中のボタンをクリックすると，クリックした回数だけ0が追加されるようになっています

このプログラムのコードは以下のとおりです

// グローバル変数
String s = ""; // 画面表示する文字列
Button b;

void setup(){
  size(350, 600); // 画面サイズ
  background(220); // 背景色
  textAlign(CENTER, BASELINE); // テキスト表示設定を，中央下揃いにする
  b = new Button('0'); // ボタンクラスのインスタンス作成
}

void draw(){
  background(220); 
  fill(0);
  textSize(50);
  text(s, width/2, 200);
  b.display();
}

void mouseClicked(){
  // ボタンがクリックされたら
  // ボタンの文字を画面表示の文字列に追加
  if(dist(mouseX, mouseY, b.bx, b.by)<50) s+=b.c;
}

// ボタンクラス
class Button{
  
  // クラス変数 
  int col = 255; // ボタンの色
  int bx = width/2; // ボタンのx座標
  int by = height/2; // ボタンのy座標
  int br = 50; // ボタンの半径
  char c; // ボタンの文字

// コンストラクタ
Button(char _c){
  c = _c;
}

// クラス関数
void display(){
  // マウスカーソルがボタン領域上にあるとき
  // ボタンの色を灰色にする
  if(dist(mouseX, mouseY, bx, by)<50) col=180;
  else col=255;

  fill(col);
  noStroke();
  circle(bx, by, 2*br); // 半径brの円を(bx, by)の座標に描画
  fill(0);
  textSize(80);
  text(c, bx, by+30);
  }
}

将来的に画面上のボタンの数を増やしていく予定なので，
ボタンはButtonクラスとして定義します
また，画面上に表示される「文字列」と「ボタン」はそれぞれグローバル変数とします

setup()関数で画面の初期状態を，
draw()関数でアプリの挙動を，
mouseClicked()関数でマウスクリック時の挙動をそれぞれ決定しています

次回からはボタンの数を増やし，四則演算ができるようにします