第三週 課堂作業

課堂目標:畫五子棋盤

1.
使用 Tool- Color Selector, 挑出要的顏色
用fill()修改填充的顏色, noFill()讓圖形變為空心
stroke() 來調畫線stroke的顏色
strokeWeight() 來設定線的權重粗細


2.用for迴圈畫出內部格線，分為橫的X 和直的Y


3.用 mouseMoved 涵式來偵測滑鼠移動的位置
   要設變數 nowX, nowY 
   畫出跟著滑鼠移動的紅色方形


4.點滑鼠，方格變為黑色
   
   設一陣列 array 
   宣告方法 int [][] array = new int [15][15];
   用 mousePressed 涵式來改變陣列的值為 1
   用for迴圈跑完陣列 將值為1的設成黑色   


5.用 if else ，設一個 nowColor變數讓黑白子輪流下


6.調整滑鼠移動位置，讓橢圓形顯示在格線上


7.滑鼠超過陣列範圍會當機
   設定陣列若超過14，則等於14

8.程式碼


int nowColor = 1;// 變數 設定初始值
int nowX, nowY;// 設定變數 現在滑鼠所在的位置在第幾格
int [][] array = new int [15][15]; // 宣告陣列

void setup() {
  size(800, 800);
}

void draw() {
  background(247, 210, 150);// 用tools → color seloector選顏色
  // 亦可用 background(#F7D296);
  
  noFill();// 畫空心圖形
  strokeWeight(6);// 設圖形線的寬度 
  rect( 50, 50, 700, 700);
  
  // 畫內部格線
  strokeWeight(1);
  for(int i = 0 ; i < 800 ; i+=50){
    line( 50, 50 + i, 750, 50 + i);// 畫橫線
    line( 50 + i, 50, 50 + i, 750);// 畫直線
  }

  fill(255,0,0);
  ellipse(nowX*50+50, nowY*50+50, 50, 50);
  
  //用陣列改變顏色 搭配mousePressed涵式
  //fill(0); 原來的做法

  for(int i = 0 ; i < 15 ; i++){
    for(int j = 0 ; j < 15 ; j++){

      if(array[i][j] == 1){
        fill(0);
        ellipse( i*50 + 50, j*50 + 50, 50, 50);
      }

      if(array[i][j] == 2){
        fill(255);
        ellipse( i*50 + 50, j*50 + 50, 50, 50);
      }
    }
  }
}
void mousePressed(){ // 用涵式來改變陣列的值
  
  array[nowX][nowY] = nowColor;
  
  if(nowColor == 1) nowColor =  2;
  else if(nowColor == 2) nowColor =1;

}
void mouseMoved(){

  // 現在滑鼠所在的位置在第幾格
  nowX = (mouseX-25)/50;
  nowY = (mouseY-25)/50;
  if(nowX > 14) nowX = 14;
  if(nowY > 14) nowY = 14;
    
}

中間過程圖:

最後結果圖:

8.課堂相關Processing 影片

processing寫的遊戲