周承翰_計圖學習筆記_Week09

Bump Mapping -- 凹凸貼圖 
Environment Mapping -- 環境貼圖

1. Bump Mapping 資源連結：https://www.openprocessing.org/sketch/24945  
   (P語言的編輯環境，可線上編輯程式碼及執行)

2. moodle下載 processing-3.3.6-windows64.zip


3. 解壓縮並執行processing.exe

4. 將Bump Mapping 程式碼貼到 processing.exe中 

5. 在random中加入255並執行 (執行檔截圖有點問題)

(補)


6. 同一行多加一個f


7. 下載一張圖片並匯入processing 3中

PImage img=loadImage("an.jpg");
size(500,500);
image(img,0,0,500,500);



8. 照片跟隨著滑鼠拖曳

PImage img;

void setup()
{
   img=loadImage("an.jpg");
   size(500,500);
}

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


9. Mario的Processing 3程式

int [][]map={{0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             { 0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,1,1,2,2,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {1,1,1,1,1,1,1,1,1,1,1,1,1,1},};

PImage imgMario,imgBrick,imgBrick2;

void setup()

{

  size(800,600);

  imgMario=loadImage("mario.png");

  imgBrick=loadImage("Brick_Block.png");

  imgBrick2=loadImage("5da98730977895279f05af2eb7bd7516.png");

}

float marioX=200, marioY=100,marioVX=0,marioVY=0;

boolean marioOnFloor=false;

void draw()

{

  background(255);

  for(int x=0;x<14;x++)

  {

    for(int y=0;y<11;y++)

    {

      if(map[y][x]==1) image(imgBrick,  x*50,y*50,50,50);

      if(map[y][x]==2) image(imgBrick2, x*50,y*50,50,50);

    }

  }

  image(imgMario,marioX,marioY,100,100);

  marioY+=marioVY; marioX+=marioVX;

  marioVY+=0.98;

  if(marioY>=400){marioY=400;marioVY=0;marioOnFloor=true;}

}

void keyPressed(){

  if(keyCode==UP && marioOnFloor){marioVY=-15;marioOnFloor=false;}

  if(keyCode==RIGHT) marioVX=5;

  if(keyCode==LEFT) marioVX=-5;

}

void keyReleased(){

  if(keyCode==RIGHT || keyCode==LEFT) marioVX=0;

}