師大柯雷吉歐的計圖筆記-Week9

一、Bump Mapping凹凸貼圖

1.先到https://www.openprocessing.org/sketch/249457

觀看一個範例圖以及程式碼。

2.到moodle下載processing3

下載好後解壓縮，點選processing3

將剛剛網站上的範例程式碼複製貼上過來，並執行

會發現random這行有錯誤，在裡面加入數字(255)

就可以成功執行了

3.接下來試著讓processing展示下載的圖片

首先新開一個文件，並打上

PImage img=loadImage("cogi.jpeg");  ///Processing image load it!

size(600,600); ///600*600的框框

image(img,0,0,600,600); ///在(0,0)的地方show the image img(600*600)

並將想要顯示的圖片(cogi.jpeg)拉進來

就可以顯示嘍

4.在滑鼠位置跑出圖片

PImage img;

void setup() {

  size(1280, 900);

}

void draw() {

  img=loadImage("cogi.jpeg");

  image(img,mouseX,mouseY); ///從滑鼠位置顯示圖片

}

就會有下面這個效果

5.Mario
將mario.png(找transparent的圖)跟brick.png的圖拉進去
PImage imgMario,imgBrick;
void setup() {
  size(800, 600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200,marioY=300,marioVY=0;
void draw() {
  background(255);
  for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  image(imgMario,marioX,marioY,100,100);
  marioY+=marioVY;
  marioVY+=0.98;
  if(marioY>=500-100) {marioY=500-100; marioVY=0;}
}
就可以顯示出馬力歐跟磚塊了

PImage imgMario,imgBrick;
void setup() {
  size(800, 600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200,marioY=300,marioVX=0,marioVY=0;
boolean marioOnFloor=false;  ///讓馬力歐只有在地上才能跳
void draw() {
  background(255);
  for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  image(imgMario,marioX,marioY,100,100);
  marioY+=marioVY; marioX+=marioVX;
  marioVY+=0.98;
  if(marioY>=500-100) {marioY=500-100; 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; 
}
這樣就可以讓馬力歐左右移動以及跳

在多把brick2.png圖拉進去(問號磚塊)
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,1,1,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.png");
  imgBrick2=loadImage("brick2.png");
  
}
float marioX=200,marioY=300,marioVX=0,marioVY=0;
boolean marioOnFloor=false;
void draw() {
  background(255);
  //for(int x=0;x<18;x++) image(imgBrick,x*50,500,50,50);
  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,50,50);
  marioY+=marioVY; marioX+=marioVX;
  marioVY+=0.98;
  if(marioY>=500-50) {marioY=500-50; 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; 

}
就能秀出完整地圖的馬力歐