Week3 葉玉婷

畫棋盤兒~~~~

使用 Tool- Color Selector 來挑出要用的顏色
外框用rect()來畫，修改填充的顏色可以用fill()，要讓畫的內部不要填充，可以查看 Help-Reference 後，在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
使用 stroke() 來調畫線stroke的顏色，在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
想要畫裡面的細黑線，可以用 line() 來畫，配上不同的 strokeWeight() 粗細

void setup()
{
  size(800,800);  //大小
}
void draw()  //畫畫囉
{
  background(#F0D079);  //顏色
  noFill();
  strokeWeight(6);  //粗細為6
  rect(50,50,700,700); //四邊形(位置位置長度長度)
  
  strokeWeight(1); //粗細為1  (畫內線)
  for(int i=0;i<10;i++) //用for迴圈來畫內線
  {
     line(50,50+i*70,750,50+i*70); //橫線
     line(50+i*70,50,50+i*70,750); //直線
  }  
}

移到哪兒哪兒就會變紅色~~

int nowX,nowY; // X,Y現在位置
void setup()
{
  size(800,800);  //大小
}
void draw()  //畫畫囉
{
  background(#F0D079);  //顏色
  noFill(); //無填滿
  strokeWeight(6);  //粗細為6
  rect(50,50,700,700); //四邊形(位置位置長度長度)

  strokeWeight(1); //粗細為1  (畫內線)
  for(int i=0;i<10;i++) //用for迴圈來畫內線
  {
     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);
}

移到的地方會是紅色的

點一下就會變成黑色(移開不會消失)

int nowX,nowY; // X,Y現在位置
int [][] array=new int [8][8]; //宣告陣列
void setup()
{
  size(800,800);  //大小
}
void draw()  //畫畫囉
{
  background(#F0D079);  //顏色
  noFill(); //無填滿
  strokeWeight(6);  //粗細為6
  rect(50,50,700,700); //四邊形(位置位置長度長度)
  
  strokeWeight(1); //粗細為1  (畫內線)
  for(int i=0;i<10;i++) //用for迴圈來畫內線
  {
     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);
  for(int i=0;i<8;i++) //迴圈
  {
     for(int j=0;j<8;j++) //迴圈
     {
        if(array[i][j]==1) rect(i*70+50,j*70+50,70,70);
     }
  }
}
void mousePressed()  //使用函式來將mouse改變array[i][j]裡面的值
{
   array[nowX][nowY]=1; 
}

void mouseMoved()
{
  nowX=(mouseX-50)/70;  //左右
  nowY=(mouseY-50)/70;  //上下
 println("mouseX:" + mouseX + "mouseY:" + mouseY + "nowX" + nowX + "nowY" + nowY); 

}

黑白棋~~~~~

int nowX,nowY,Color=1;// X,Y現在位置
int [][] array=new  int [10][10]; //宣告陣列
void setup()
{
  size(800,800); //大小
}
void draw()  //畫畫囉
{
  background(#F0D079); //顏色
  noFill(); //無填滿
  strokeWeight(6); //粗細為6
  rect(50,50,700,700); //四邊形(位置位置長度長度)
  
  strokeWeight(1); //粗細為1  (畫內線)
  for(int i=0;i<10;i++) //用for迴圈來畫內線
  {
    line(50,50+i*70,750,50+i*70); //橫線
    line(50+i*70,50,50+i*70,750); //直線
  }
  fill(255,0,0,50); //填紅色
  ellipse(nowX*70+120,nowY*70+120,70,70); //modify
  for(int i=0;i<10;i++) //使用for迴圈來進行陣列的比較、畫圖
  {  
    for(int j=0;j<8;j++)
    {
      if(array[i][j]==1){fill(0);ellipse(i*70+120,j*70+120,70,70);} //modify
      if(array[i][j]==2){fill(255);ellipse(i*70+120,j*70+120,70,70);}  //modify
    }
  }
}
void mousePressed()//使用函式來將mouse改變array[i][j]裡面的值
{ 
  array[nowX][nowY]=Color; //modify
  if(Color==1)Color=2;
  else if(Color==2)Color=1;
}
void mouseMoved(){
  nowX=(mouseX-85)/70; //左右
  nowY=(mouseY-85)/70; //上下
  println("mouseX:"+mouseX+"mouseY:"+mouseY+"nowX:"+nowX+"nowY:"+nowY);
  
}

1. Google 美女工程師, 程式語言用 Ruby, C++, Processing 

1.1. TODO: 請去找一下 Processing 寫出來的作品 

1.2. TODO: 用 Youtube 分享,按Blogger 把 HTML的 <iframe...> 貼在你的作業中

1.3. 下載 Processing 

2. TODO: 寫出你的第一個Processing 程式碼: Hello World 變 Hello Kitty

3. TODO: 請找一張圖,用小畫家(mspaint)輔佐你,畫出你的 Processing 圖, 並都貼出來。

4. TODO: 請寫下你的心得 (1) 你學了什麼東西, (2) 有什麼東西不懂, (3) , 還想學什麼

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

HTML