Week02 欣儀的課堂筆記

Part1 互動式框框-依照滑鼠位置畫出框框

 Code: 

void setup(){//Start()
   size(800,300);//畫面大小
}
void draw(){//Update()
   rect(mouseX,mouseY,50,20);//隨著滑鼠位置決定框框畫在哪
}

---

Part2 模擬打卡機

 Code: 

void setup(){//Start() 
    size(800,300);//畫面大小 
    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;//賦予滑鼠新的位置 
    fill(0);
    rect(nowX, nowY, 16, 30);
}

 Code: 

void setup(){//Start()
   size(800,300);//畫面大小
   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);//黑色
    rect(nowX, nowY, 16, 30);
  }
  else if(mousePressed && mouseButton==RIGHT){//滑鼠按下並且為右鍵
    fill(255);//白色
    rect(nowX, nowY, 16, 30);
  }
}

滑鼠按下左鍵時可以打洞，按下右鍵時則是恢復

---

Part3 讀圖片

將下載好的圖片直接拖移到processing的視窗中

下方會出現"將1個文件添加到速寫本"的內容

並且資料夾裡面會多出一個data資料夾

裡面就存放著剛剛拖移的圖片

 Code: 

PImage img;//在外面宣告
void setup(){
   size(500,500);
   img = loadImage("blue.png");//讀圖片
}
void draw(){
   image (img,mouseX,mouseY,200,300);//畫影像
}

---

Part4 製作Punch Card

 Code: 

PImage imgBG;
void setup(){
  size(767,345);
  imgBG=loadImage("punch_card.png");
}
void draw(){
  background(imgBG);//視窗大小必須與圖片一樣，否則執行時會出錯
}

 Code: 

PImage imgBG;
int [][]table=new int[78][17];//存取Punch Card的位置
void setup(){
  size(620,280);//因為圖片大小為620*280，所以視窗大小也要一致，不然會出錯
  imgBG=loadImage("punch_card.jpg");
}
void draw(){
  int nowI=mouseX/8, nowJ=mouseY/17;
  background(imgBG);//還原背景圖
  if(mousePressed && mouseButton==LEFT){//滑鼠按下且是左鍵
    table[nowI][nowJ]=1;//Punch Card的位置設為1
  }
  else if(mousePressed && mouseButton==RIGHT){//滑鼠按下且是右鍵
    table[nowI][nowJ]=0;//Punch Card的位置設為0
  }
  
  //Punch Card的位置設為1時，會畫出8*17的黑色長方形
  //Punch Card的位置設為0時，不做任何改變。
  for(int i=0; i<78; i++){
    for(int j=0; j<17; j++){
      fill(0);
      if(table[i][j]==1) rect(i*8,j*17,8,17);
    }
  }
}

---

Part5 Punch Card 最後成品