楊喻文的學習手札 20171109

week09

Bump Mapping 凹凸貼圖

事前提要：

1. 要注意電腦上的codeblocks上面是有裝圖學要用的MinGW編譯環境，並且將相關設定都設好

mapping

bump mapping 凹凸貼圖：讓圖片有凹凹凸凸的表面的感覺

environment mapping 環境貼圖：讓圖片有山的高低起的概念

要有漂亮的bump mapping是需要公式來產生的，例如下圖的公式

其他：

網址體驗：https://www.openprocessing.org/sketch/249457

這是一個P語言的環境，由MIT推出的，雖然簡單但是跑起來比較慢

這個還有一個很厲害的功能，就是可以匯出成APP可以玩的程式，然後裝到手機上

到moodle去下載processing，這是一款不用安裝就可以執行的程式編譯器

功能很強大可以跑很多東西

打開來會長這樣

把剛剛體驗網址上的程式碼複製貼上到現在這邊，然後執行他

因為我的筆電顯卡功力不夠，所以顯示不出來

本來要用學校電腦，但是這台所有可以上網的瀏覽器(IE Chrome FireFox)全部都出現錯誤無法使用

只好看同學和老師的QQ

做一些簡單的事：畫長方形

size(200, 200); //window size

fill( #FFFFFF); //color

rect(10,10,50,50); //draw rectangle

做一些進階的事情：讀圖檔

PImage img=loadImage("img"); //load image

size(width, height); //window size

image(img, x, y, width, height); //draw 100*100 img on (x,y)

把想要讀出來的圖丟進去程式裡面就可以直接寫圖檔名稱讀圖

他會幫你把圖片都到可以直接讀的地方(按ctrl+k可以找到圖片被丟到哪裡)

執行之後就可以看到我放的圖了

可以有種充滿和

void setup(){

  size(500, 400); //window size

}

void draw(){

  rect(mouseX, mouseY, 50, 50);  //在滑鼠位置畫50*50的四邊形

}

執行一開始是長這樣

隨著滑鼠的移動會有很多個正方形產生

這功能也可以用來玩圖片

這個比較有感(好多鬼😈)

這就是為什麼會有那種很多error出現的梗圖的原因

加上一個背景可以看起來就像物體在移動，但是沒有殘影

然後後面因為太多了~所以直接貼圖片！

大致上這樣就可以開始玩小小遊戲了：)

*如果發現沒反應，表示滑鼠沒有在這個視窗中(未focus)

老師自己寫的俄羅斯方塊小遊戲

http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/tetrisFinally/