WEEK03

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector, 挑出你要的顏色, 可用 R,G,B 來描述,也可用 #0B33FF 之類的像亂碼的數字來設定顏色
1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細


1.

程式碼如下
void setup(){
  size(800,800);
}
void draw(){
  background(#F0D079); //背景顏色設定
  noFill();  
  strokeWeight(5);
  rect(50,50 ,700,700);
  strokeWeight(1);
  for(int i=0;i<10;i++){
    line(50,50+i*70,750,50+i*70);  //線條設定
    line(50+i*70,50,50+i*70,750);
  }

}
2.

程式碼如下


int nowX, nowY;
void setup(){
  size(800,800); 
}
void draw(){
  background(#F0D079);
  noFill();
  strokeWeight(6);
  rect(50,50 ,700,700);
  strokeWeight(1);
  for(int i=0;i<10;i++){
    line(50,50+i*70,750,50+i*70);
    line(50+i*70,50,50+i*70,750);
  }
  fill(255,0,0);
  rect(nowX*70+50,nowY*70+50,70,70);
}

void mouseMoved(){       //加入滑鼠移動 滑鼠一滑就會有框框跟著移動
  nowX=(mouseX-50)/70;
  nowY=(mouseY-50)/70;
  println("mouseX: " + mouseX + " mouseY: " +mouseY + " nowX:" +nowX + "nowY: " + nowY);
}


3.

程式碼如下


int nowX, nowY;
int [][] array = new int [10][10]; // 1.我在這宣告一個陣列
void setup(){
  size(800,800);
}
void draw(){
  background(#F0D079);
  noFill();
  strokeWeight(6);
  rect(50,50 ,700,700);
  strokeWeight(1);
  for(int i=0;i<10;i++){
    line(50,50+i*70,750,50+i*70);
    line(50+i*70,50,50+i*70,750);
  }
  fill(255,0,0);
  rect(nowX*70+50,nowY*70+50,70,70);
  fill(0); //4. 最後將紅色設定為黑色
  for(int i=0;i<10;i++){ // 2. 可以使用FOR迴圈來進行陣列的比較與畫圖
    for(int j=0;j<10;j++){
      if(array[i][j]==1) rect(i*70+50, j*70+50 , 70, 70);
    }
  }
}

void mousePressed(){ // 3. 使用mousePressed函式改變array裡面的I J值
  array[nowX][nowY]=1;
}

void mouseMoved(){
  nowX=(mouseX)/70;
  nowY=(mouseY)/70;
  println("mouseX: " + mouseX + " mouseY: " +mouseY + " nowX:" +nowX + "nowY: " + nowY);
}

4.