Week02_做出打卡卡片

1.由邊在哪??畫到哪??

Code

void setup(){                                    //start()
  size(800,300);
}
void draw(){                                     //Update()
  rect(mouseX,mouseY,50,20);
}

2.打卡(游標到哪格子就填滿)

Code

void setup(){                                         //start()

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

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

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

      rect(x,y,16,30);

    }

  }

}                                                            //720/45=>16

void draw(){                                          //Update()

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

  fill(0);

  rect(nowX,nowY,16,30);

}

3.到對的地方按下左鍵才會打洞

Code

void setup() {
                                                                                     // 初始化
  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() {
                                                                                     // 更新畫面
 
  int nowX = mouseX/16*16, nowY = mouseY/30*30; //拿到游標所在的位置
  
  if (mousePressed && mouseButton==LEFT) {
                                                                                    // 按下左鍵會打洞
    fill(0, 0, 0);                                                               //洞的顏色為黑色
    rect(nowX, nowY, 16, 30);
   
  } else if (mousePressed && mouseButton==RIGHT) {
                                                                                    // 按下右鍵即會在游標位置畫上白色
    fill(255, 255, 255);                                                   //畫白色
    rect(nowX, nowY, 16, 30);
  }
}

4.讀圖、顯示圖

Code

PImage img;                                                 //用來放讀入的圖片

void setup() {

  size(900, 500);

  img = loadImage("infor.png");                     //載入圖片

}

void draw() {

  if (mousePressed) {

    image(img, mouseX, mouseY, 175, 100); //將圖片畫到畫面上

                                                                      //175、100分別代表圖片的長和寬

  }

}

5.-最終-加入背景的打卡機

Code

PImage imgBG;                                                            //用來存圖的變數

int[][] table = new int[90][20];                                        //用來存座標位置的陣列

void setup() {

  size(900, 400);

  imgBG = loadImage("Punched card 049.jpg");           //讀入圖片

}

void draw() {

  image(imgBG, 0, 0, 900, 400);                                   //顯示圖片

  

  int hole_W=10, hole_H=20;                                        //洞的大小

  int nowX=mouseX/hole_W, nowY=mouseY/hole_H;  //拿到游標所在的位置

  

                                                                                      //將已打的洞都畫出來

  for (int x=0; x<90; x++) {

    for (int y=0; y<20; y++) {

      if (table[x][y] == 1) {

        fill(0, 0, 0);                                                             //洞的顏色為黑色

        rect(x*hole_W, y*hole_H, hole_W, hole_H);

      }

    }

  }

  

  if (mousePressed && mouseButton==LEFT) {            // 按下左鍵就打洞

    table[nowX][nowY] = 1;

   

  } else if (mousePressed && mouseButton==RIGHT) { // 按下右鍵就把洞消除

    table[nowX][nowY] = 0;

  }

}