計算機圖學 Computer Graphics
- 主題：Anti alias
- 期末作品 Q & A
Anti-aliasing
Aliasing 因為格子取樣的關係，導致電腦繪圖出來不是很正確（因為只有黑白）
Anti-aliasing 平滑化：用灰階的值讓人的視覺自懂補償出平滑的線或邊緣
Dithering 抖動：原本只有黑或白點，為了讓網點做出現層灰階的效果，把黑色點作左右移動，製造出效果
2018年1月15日 星期一
Claire 的課堂作業 week17
計算機圖學 Computer Graphics
- 主題：期末作品 Q & A
2D Tetris 進度：
從上禮拜獲得老師的Q&A到今天已經大致上完成了整個俄羅斯方塊的操作，
剩下要完成的項目有...
- 顯示關卡、分數
- 貼圖
- 配樂
課堂上在找OpenCV怎麼安裝到Xcode上
大部分找到的資料都是類似這樣：Link
但似乎是改版了，現在直接下載下來只能看到opencv2.framework
但加入外部Library又不給用 ...
進度：暫時用terminal顯示分數
Claire 的課堂作業 week18
期末作品展示
開發工具：使用OpenGL / C++ / Xcode
（ 遠本有準備了可愛的磚塊貼圖，但遇到OpenCV for Xcode裝不好的問題，只好放圖讓大家看看.. ）
操作方式：
- 遊戲開啟後便即刻開始
- 方向鍵：左、下、右 可移動方塊
- 方向鍵：上 可旋轉方塊
- 空白鍵：可讓方塊快速掉落到下方
- Ｒ：重新開始
- Ｅ：結束遊戲
視窗分別有兩個，白色為遊戲主場，黑色可看到分數及等級。
遊戲過程中，方塊會隨著時間加快。消除一列可獲得10分。
音樂會自動重複播放
備註
遊戲背景音樂來自 Kevin
MacLeod ~ Happy Boy End Theme - YouTube
2018年1月12日 星期五
Claire 的課堂作業 week14
計算機圖學 Computer Graphics
- 主題：期末作品 Q & A
- 主題：Rasterization 光柵化
[補充] 張鈞法老師的上課投影片資料：Link
Processing - 漸層色三角形
著色點的部分就是使用 Rasterization，他在判斷圖形外還是圖形內，直接來實作看看他的效果
我們先用 Processing 畫出一個三角形
如果想將三角形填滿，則只要將上面程式碼的 stroke 改為 fill 就好了
Claire 的課堂作業 week16
計算機圖學 Computer Graphics
- 主題：期末作品 Q & A
今天的進度完全都是期末作品的Q&A，而且終於輪到我了 ya
在問老師問題前，我已經完成俄羅斯方塊的背景、隨機形狀和顏色，並且可以左右移動
遇到最大的問題就是方塊該怎的掉下來？以及在OpenGL下怎麼實作碰撞偵測？
我選擇問老師碰撞偵測的問題
而老師則用Processing來示範，程式碼如下，加了一些筆記註解
執行結果如下
回家後改一改程式，就變成了下面的樣子（完成下方的偵測 xD）
原來我一開始寫的時候沒有考慮到後面開發的操作方便性
直接把圖形畫在視窗上的座標轉成浮點數，沒有善用到背景的array
後來將陣列和螢幕上的位置重新配置（換一種寫法）就順利多了
Claire 的課堂作業 week10
計算機圖學 Computer Graphics
- 期末作品說明示範
- SIGGRAPH
- 影片示範
SIGGRAPH
期末作品說明示範
除了Facebook社團中，老師貼了許多和音樂結合的WebGL的作品，
課堂上老師有Demo一些範例，一些現有的經典遊戲，或是其他班級學生做的作品，讓我們找靈感：
皮卡丘打排球
Pah
青蛙祖瑪
igarashi的作品
Processing - Painter
在 Processing 寫 Android App
1. Processing 本身是以Java為基礎，他也另外提供了其他模式，
點選視窗右上角的Java會出先一個選單，選擇Add Mode...
2. 在Modes之下，可以看到Android Mode，點選它，在右下角可以按 Install
下載完成後就可以使用了！但前提是要有一隻可以測試的Android手機，還有傳輸線 > <
// 下面這段程式碼如果在Android 模式下，可以將手機變成閃燈
void setup(){
fullScreen(); // 在手機裡的全螢幕
}
void draw(){
if(mousePressed) background(255, 0, 255); // 按著畫面為粉色
else background(0, 255, 0); // 放開為綠色
}
在 Processing 實作碰撞偵測
綠色的球不斷移動，當碰到視窗外框或咖啡色由使用者操作的球時，會依照入射角等於反射角的計算而彈開，而不會相容在一起，這就是所謂碰撞偵測，原始碼如下，可閱讀簡單註解。
2017年12月7日 星期四
Claire 的課堂作業 week13
計算機圖學 Computer Graphic
- 主題：VR 體驗
- 主題：期末作品點播
- 主題：色彩系統、multi-Texture ( TextureID )、畫面等速 ( Timer )
色彩系統 Color System
1. Let's try Color System by using Processing colorMode()
Multi-Texture ( TextureID )
1. 在moodle上的上課軟體下載 roach.zip，執行該檔案也要記得裝OpenCV哦，所以一起下載
2. 多個貼圖的解法，就是用 GLuint 作為 Texture id
而每個Texture id 都是藉由 myTexture()這個函式所產生 ( 先打包起來 xD )
最後呼叫來使用，在main裡面呼叫myTexture()，給他圖檔並回傳 GLuint，也就是該貼圖相對應的id
這個動作為什麼不能寫在display ? --> 因為重覆讀檔案只會讓電腦壞掉!
最後貼上貼圖，只要針對圖形貼上向對應的 texture id 就好了
2017年11月30日 星期四
Claire 的課堂作業 week12
計算機圖學 Computer Graphics
- 主題：Scene 場景
- 主題：Mocap, Skeleton, Model
- 期末作品分析與協助
- Q & A
編譯來路不明的程式碼
1. 嘗試編譯老師的程式碼，讓它可以執行。
所以先到moodle --> 上課軟體 --> 下載 myGL_Frustrum221_MultiView_2012_1221-....zip
解壓縮後可以看到這些內容
2. 可以用notepad++將cpp檔打開，並且複製程式碼到CodeBlocks的GLUT專案裡面
但直接執行可能會遇到一個問題是 M_PI 沒有被定義 ( 但事實是它真的被定義在 math.h 中 )
3. 在Setting --> Compiler中把第二個勾勾拿掉，因為老師的程式是在五年前寫的
4. 再來是在舊的寫法中，加上反黑的這兩行
5. 程式可以執行了，但畫面還是沒有跑出來，並且會閃退，是因為檔案不在exe旁邊，要記得加上去
6. 完成執行，左上的圖可以用滑鼠操作旋轉，其他則是固定的三視圖。
這支程式是老師幫其他老師寫的，用來讀Kinect的動作文件 ( 就是小人 )，並呈現在一個空間中可以互動。
Processing 3D Library
1. 下載完Processing後，Tool --> add Tools.. --> Libraries --> choose 3D --> install Collada and Picking
2. 安裝完兩個Libraries後，在File --> Example.. --> Contributed Libraries 可以看到剛剛安裝套件後的範例
我們先點選 View2D 來看看
3. 執行可以看到畫面上有一個紅點，我們試著閱讀程式碼，找到模型陣列，被設定成 true才會讀入
4. 因此我們可以試著修改他，換一個模型進來試試，或是加入很多模型
5. 在 mouseDragged() 和 keyPressed() 函式可以看到怎麼操作，可能有點不順，
但這個Library主要就是讓SketchUp和Blender的模型可以直接載入進來 !
6. 換一個 Picking Library 的 Example，
程式執行後，當我們將滑鼠移動到橘色正方體，黑色的外框會變局色，移動到黃色則外框變黃色。
7. Picking 在做什麼呢 ? 註解如下，是很方便結合物件和滑鼠的工具
testBVH
testBVH是processing編譯的，老師在程式中自己寫了一個類似Compiler功能的函式loadBVH()，讀取由體感裝置讀到的數據，最後用竹竿人呈現出來。它是在跳妖怪手錶哦 !
訂閱：
文章 (Atom)