Mengting計圖筆記Week09 - Texture、多重貼圖、Bump Mapping

主題: 
(1)上週Texture貼圖、詳解
(2)多重貼圖
(3)Bump Mapping

//體驗Bump Mapping凹凸貼圖

Processing多種應用

補充：維基百科
偏微分算出法向量

1. 下載processing3(Java-base程式)，貼上上方網址的程式碼，並把random參數改成255，試著執行看看


2.把tex.pixels[i] = color(0xff - random(255)); 改成 tex.pixels[i] = color(0xffff - random(255));，磚塊變的平滑。


3.畫出色塊
開新檔案，試以下程式碼。
   從工具->顏色選擇器選擇色碼複製，跑出相對應顏色的方格。


4.呈現圖片
開新檔案，試以下程式碼。
   下載一張圖檔，拖曳至視窗中即上傳。在loadImage()參數打入檔名並執行。



PImage img=loadImage("terry.png");//Process image and load it
size(200,200);
image(img, 0, 0, 200, 200);//show the image

5.圖片隨滑鼠移動出現殘影
開新檔案，試以下程式碼。
   下載一張圖檔，拖曳至視窗中即上傳。在loadImage()參數打入檔名並執行。
PImage img;
void setup(){
  size(600,600);
  img=loadImage("girl2.png");
}

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

\霹哩啪拉靜香團出巡/

若要移除殘影，在draw()中加入background(255);加上背景。

------以下未完成------------ 6.Mario待補充

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,1,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;
void setup(){
  size(800,600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200, marioY=100, marioVX=0, marioVY=0;
boolean marioOnFloor=false;
void draw(){
  background(255);
  //for(int x=0; x<18; x++)
  for(int x=0; x<14; x++)
  {
    for(y=0;y<11;y++)
    image(imgBrick, x*50, 500, 50, 50);
  }
  image(imgMario, marioX, marioY, 100, 100);
  marioY += marioVY;
  marioX += marioVX;
  marioVY += 0.98;
  if(marioY >= 500-80)
  {
    mario=500-80; 
    marioVY=0;
  }
}
void keyPressed()
{
  if(keyCode==UP) marioVY=-15;
  if(keyCode==RIGHT) marioVX=5;
}
void keyPressed()
{
  if(keyCode==RIGHT) marioVX=0;

}

可以直接匯出成安卓app




---------------------------
//3D  void setup(){
     size(800,600,P3D);
     img=loadImage("earth.jpg");
}

float rotX=0,rotY=0;
void draw(){
background(255);
//image(img,0,0,width,height);

 lights();
 translae;(width/2, height/2);
//scale(s);//移動
rotateX(radians(rotX));
rotateY(radians(rotY));
sphere(80);
texture(img);

beginShape(POLYGON);
vertex(0,0,0,0);
vertex(0,600,0,512);

}

void mouseDragged(){
rotY += mouseX-pmouseX;
rotX -=  mouseY-pmouseY;

}
--------------------------