Processing:基本プログラム

授業で行ったシンプルなボタン操作のプログラムです。



画面内の矩形をクリックすると背景が赤に変わります。

プログラム内容としては以下のようなことをしています。
・画面サイズ設定
・図形描画属性設定（色や外形線など）
・ボタンの矩形描画
・マウス座標取得（mouseX,mouseY）
・マウスの位置とボタンの矩形範囲の重なり判定
・マウスクリックによるコマンド
・マウスが押されたか押されていないかの状態をフラグを使って判別

boolean press=false;//ボタンを押したかどうかのフラグ用変数

void setup(){
  size(400,400);//画面サイズ設定
  fill(0);//ボタンの塗り面を黒に設定
  stroke(100);//ボタンの外形線の色設定（256段階あるうちの100のグレー）
  strokeWeight(3);//ボタンの外形線の太さ設定（3ピクセル）
}

void draw(){
  if(press==true){//ボタンが押されているとき
    background(255,0,0);//背景が赤になる
  }else{//ボタンが押されていないとき
    background(0);//背景が黒になる
  } 
  if(mouseX>200 && mouseX<300 && mouseY>200 && mouseY<250){//ボタンの矩形範囲にマウスがある時
    fill(100);//ボタン塗り色を100のグレーにする
  }else{
    fill(0);//ボタン塗り色を黒にする
  } 
  rect(200,200,100,50);//ボタンの表示（矩形）：rect(x座標,y座標,矩形幅,矩形高さ)
}

void mousePressed(){//マウスが押されたら発動する
  if(mouseX>200 && mouseX<300 && mouseY>200 && mouseY<250){//ボタンの矩形範囲にマウスがある時
    press=!press;//フラグ反転（ONの時OFF、OFFの時ONにする）
  }
}

また以下のようなシンプルなゲームのプログラム（壁打ちテニスのようなゲーム）

ゲームするには、画面内をクリックしてください。
プログラム内容としては：
・画面サイズ設定
・図形描画属性設定
・ボールの描画
・パドル（ラケット）の描画
・ボールの動く方向と１フレームに進む量
・マウスに合わせたパドルの動き
・壁３面にボール当たったときの判別と跳ね返り
・パドルにボールが当たったときの判別と跳ね返り
・パドルで何回打ち返したかのカウント
・パドルで打ち返せなかったときの判別
・ボール残数のカウント
・スコアとボール残数の表示
・ゲームオーバー表示
・ゲーム再開のためのクリック処理
簡単なゲームですが、少なくても以上のような内容をすべてプログラムしておく必要があります。
ボールやパドルの基準位置はrectMode(CENTER)を用いて図形中心に設定しています。
ボールが１辺10ピクセルでありボール座標が図形中心なので、例えば画面上端で跳ね返るときは、ボールX座標が5（１辺10ピクセルの半分）のときの跳ね返ることになります。

PFont font;//文字表示のフォントのオブジェクトを用意
int ballX;//ボールのX座標変数
int ballY;//ボールのY座標変数
int directionX;//ボールの動くX座標上の方向の変数（右向き：+1、左向き：-1）
int directionY;//ボールの動くY座標上の方向の変数（下向き：+1、上向き：-1）
int paddleX;//パドル（ラケット）のX座標の変数
int pts;//得点の変数
int balls;//ボール残り数の変数
int speed;//ボールの1フレームあたりの進む量

void setup(){
  size(400,400);//画面サイズ設定
  noStroke();//図形の外形線無し
  ballX=200;//最初のボールが登場するときのX座標値
  ballY=0;//最初のボールが登場するときのY座標値
  directionX=1;//X座標上のボールの向き（正の向き：右向き）のフラグ
  directionY=1;//Y座標上のボールの向き（正の向き：下向き）のフラグ
  rectMode(CENTER);//矩形描写の基準点を図形中心に設定
  font=createFont("Arial",16);//フォントの準備
  textFont(font,16);//フォント設定
  pts=0;//ポイント０（初期設定）
  balls=2;//残りボール数２（初期設定）
  speed=2;//ボールの1フレームあたりの進む量を２に設定
}
void draw(){
  background(0);//背景色（黒）
  if(ballX<5){//ボールが画面左にぶつかったとき
    ballX=5;//ボールの位置を5に設定
    directionX*=-1;//ボールの動く向きを反転
  }
  if(ballX>395){//ボールが画面右にぶつかったとき
    ballX=395;//ボールの位置を395に設定
    directionX*=-1;//ボールの動く向きを反転
  }
  if(ballY<5){//ボールが画面上にぶつかったとき
    ballY=5;
    directionY*=-1;
  }
  if(ballY>395){//ボールが画面下を越えたとき
    if(balls<1){//ボールが残り数１より小さい（ボール数：０）とき
      text("GAME OVER",150,200);//ゲームオーバー表示
      balls=0;
      speed=0;//ボールの1フレームに動く量を0にする（ボール停止）
      ballY=410;//ボールを画面外に移動させておく
    }else{//残りボールがあるとき
      ballY=5;//ボールを画面上部に移動させる
      balls--;//残りボール数を減らす
    }
  }
  if(ballX>mouseX-25 && ballX=370 && ballY<=370+speed){//ボールがラケットの位置にあるとき
    ballY=370;
    directionY*=-1;//ボールの動きの反転（ボールの打ち返し）
    pts++;//ポイント加算
  }
  ballX+=speed*directionX;//ボールのX軸移動
  ballY+=speed*directionY;//ボールのY軸移動
  rect(ballX,ballY,10,10);//ボールの描画
  rect(mouseX,380,50,10);//パドル（ラケット）の描画
  text("SCORE: "+nf(pts,4),20,20);//ポイント表示
  text("BALL LEFT: "+balls,280,20);//ボール残り数表示
}

void mousePressed(){//マウスを押した時の処理
  if(balls==0){//ボールが残り数0の時（ゲームオーバー時）
    balls=2;//ボールが残り数を2に戻す
    ballY=5;//ボールY座標値を画面上部に戻す
    speed=2;//ボールの1フレームに動く量を2に戻す
  }
}

各自既存のゲームなどを参考にプログラムを組んでみてください。ゲームすべてをプログラムするのは大変かもしれないので、部分的な動きや表現でも構わないので実験的にプログラムしてみてください。