第3週

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() 粗細

int nowX, nowY;

int[][] array=new int[8][8];

void setup()

{  size(800, 800);   }

void draw() {

  background(232, 191, 101);

  noFill();

  strokeWeight(6);

  rect(50, 50, 700, 700);

  strokeWeight(1);

  for (int i=0;i<8;i++) {

    line(50, 50+i*87, 750, 50+i*87);

    line(50+i*87, 50, 50+i*87, 750);

  }

  fill(255, 0, 0);

  rect(nowX*87+50, nowY*87+50, 87, 87);

  fill(0);

  for (int i=0;i<8;i++) {

    for (int j=0;j<8;j++) {

      if (array[i][j]==1)  rect(i*87+50, j*87+50, 87, 87);

    } } }

    

void mousePressed() 

{  array[nowX][nowY]=1;  }

void mouseMoved() {

  nowX = (mouseX-90)/80;

  nowY = (mouseY-90)/80;

  println(" mouseX: "+mouseX+" mouseY: "+ mouseY+" nowX: "+nowX+" nowY:"+nowY);

}

int nowX, nowY;

int[][] array=new int[8][8];

void setup()

{  size(800, 800);   }

void draw() {

  background(232, 191, 101);

  noFill();

  strokeWeight(6);

  rect(50, 50, 700, 700);

  strokeWeight(1);

  for (int i=0;i<8;i++) {

    line(50, 50+i*87, 750, 50+i*87);

    line(50+i*87, 50, 50+i*87, 750);

  }

  fill(255, 0, 0);

  ellipse(nowX*87+50, nowY*87+50, 87, 87);                  //ellipse

  fill(0);

  for (int i=0;i<8;i++) {

    for (int j=0;j<8;j++) {

      if (array[i][j]==1)  ellipse(i*87+50, j*87+50, 87, 87);       //ellipse

    } } }

    

void mousePressed() 

{  array[nowX][nowY]=1;  }

void mouseMoved() {

  nowX = (mouseX-50)/80;

  nowY = (mouseY-50)/80;

  println(" mouseX: "+mouseX+" mouseY: "+ mouseY+" nowX: "+nowX+" nowY:"+nowY);

}

貼你覺得有意思的影片, 使用youtube 的分享, Blogger 分享, 兩邊都改成 HTML, 貼上 HTML