week02 - yusyuan🌓

week 02互動技術

------------------------------------------------------------------------

🔺 Processing

• google搜尋Processing
• 下載 window 64bit
• 解壓縮並開啟

⧭依照滑鼠位置畫出四邊形

• rect(mouseX,mouseY,方塊長,方塊寬);

        ➨ 依滑鼠的位置畫出 長x寬 的四邊形

◎程式碼↓

void setup(){   ///start() 開始函式指令

   size(800,300);

}

void draw(){   ///依滑鼠的位置畫出50x20的四邊形

   rect(mouseX,mouseY,50,20);

}

⧭依照滑鼠位置塗滿黑框

◎程式碼↓

void setup(){  ///start()

   size(800,300); ///800->720 for 45

   for(int x=0; x<800 ; x+=16){

    for(int y=0; y<300 ; y+=30){

      rect(x,y,16,30); 

     }

   }

}

void draw(){ ///update()

   int nowX= mouseX/16*16,nowY=mouseY/30*30;

  /// mouseX/16*16 是為了讀取滑鼠游標位置 捨取小數點

   fill(0); ///black

   rect(nowX,nowY,16,30);

   }

}

⧬滑鼠游標位置 捨去小數點 (用小葉老師的示意圖 )

EX: 

如果滑鼠游標 mouseX=141

141/100(因為一格100) => 1 

1*100 => 100 (確認游標在100的方格內)

remain(多餘) 41 捨去

⧭方格按滑鼠右鍵可以變黑色 按滑鼠左鍵可以變回白色

• if( mousePressed && mouseButton == LEFT){}

      ➨ mousePressed按下滑鼠鍵 符合 滑鼠右鍵...

◎程式碼↓

void setup(){ ///start()
   size(800,300); ///800->720 for 45
   for(int x=0; x<800 ; x+=16){
    for(int y=0; y<300 ; y+=30){
      rect(x,y,16,30); 
     }
   }
}
void draw(){ ///update()
   int nowX= mouseX/16*16,nowY=mouseY/30*30;
   if( mousePressed && mouseButton == LEFT){
   fill(0); ///black
   rect(nowX,nowY,16,30);
   }
   else if( mousePressed && mouseButton == RIGHT){
   fill(255);///white
   rect(nowX,nowY,16,30);
   }

}

⧭滑鼠游標變圖片

• PImage img ;  ➨ 類似宣告
• img=loadImage("圖片網址");

       ➨PS*圖片可以直接拉進去 processing 要小心副檔名

◎程式碼↓

PImage img ; 
void setup(){
  size(500,500);
  img=loadImage("圖片網址");

}
void draw(){
 image(img,mouseX,mouseY,200,200);

}

⧭製作賀卡打卡機

◎程式碼↓

PImage imgBG;

int [][] table = new int[45][50];

void setup(){

    size(711,377);

    imgBG=loadImage("card.jpg");  

}

void draw(){

  background(imgBG); 

  int nowI=mouseX/16,nowJ=mouseY/30;

  if(mousePressed && mouseButton == LEFT){

     table[nowI][nowJ]=1;     

   }

   else if(mousePressed && mouseButton == RIGHT){

     table[nowI][nowJ]=0;   

   }

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

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

     fill(0);

     if(table[i][j]==1) rect(i*16,j*30,16,30);

     }

   }

}