Week02_Summer

 今日目標：

* 做出一個打孔卡

* 做出可以放置圖片並畫出圖片的程式

 01 打開 Processing 開始寫一段簡單的程式 __ 

建出一個(600,600)的視窗，

並用滑鼠移動的方式 ( mouseX , mouseY ) 試著做出打孔機的感覺

 02 寫出看起來像打卡機的格式，移動滑鼠畫出東西

 程式碼：

void setup(){

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

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

       for(int y=0 ;y<300 ;y+=30){     //畫出背景格子，類似打卡機的格子

           rect(x,y,16,30);

       }

    }

} //720 width / 45 width = 16 width

void draw(){

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

    fill(0);

    rect(nowX,nowY,16,30);    //滑鼠開始畫

}

 03 寫出可以靠滑鼠移動點擊來做畫出或清除的動作

 程式碼：

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);

      rect(nowX,nowY,16,30);

    }

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

      fill(255);

      rect(nowX,nowY,16,30);

    }

}

 04 以滑鼠移動圖片來畫畫

 程式碼：

PImage img;  //定義

void setup(){

    size(500,500);

    img = loadImage("http://i.imgur.com/mQDWGvh.jpg");

}

void draw(){

    image(img ,mouseX ,mouseY ,200 ,200);

}

 05 另外一個快速顯示圖片的方法

-  另存圖檔  →  將圖片拉至Processing  → 改寫程式 img = loadImage("1.jpg");

                                                                                                         圖片檔名

 06 寫出一個近似於打孔卡的程式碼

 程式碼：

PImage imgBG;

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

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);

        }

    }

}

 07 調整

 程式碼：

PImage imgBG;
int [][] table = new int[711][377];
void setup(){
    size(711,377);
    imgBG = loadImage("card.jpg");
}

void draw(){
    background(imgBG);
    int nowI= mouseX/7,nowJ=mouseY/11;
    if(mousePressed && mouseButton==LEFT){
      table[nowI][nowJ]=1;
    }
    else if(mousePressed && mouseButton==RIGHT){
      table[nowI][nowJ]=0;
    }
    for(int i=0;i<711;i++){
        for(int j=0;j<377;j++){
            fill(0);
            if(table[i][j]==1) rect(i*7,j*11,5,9);
          }
    }

}