Hello World_OpenGL_note_Week14

Week 14

本週開始皆為期末作品的研究。

老師還有介紹到關於: 在建立3D圖形時，遇到重疊問題，電腦的採樣判斷!

接下來幾周也有說明關於作圖時的網格問題，詳細情形請參考老師上學期的ppt。

Hello World_OpenGL_note_Week13

Week 13

今天先體驗VR，並說明其使用。

其實後續是關於期末作品的研究。

Hello World_OpenGL_note_Week10

Week10

本周是互動式的程式介紹。

由於我的手機不支援，所以改採其他方式...將之前的課程八的地球儀打光。

因為我已經改成角椎，因此打光很輕鬆! 幾乎隨便調都有光! 事實上，sample的係數就已經設計得很不錯了，直接拿來用即可。

這是不同角度的截圖，上面的code就是我們熟悉的sample!

Hello World_OpenGL_note_Week17

Week 17

本週進度是讓 畫面看起來立體 並對物體進行打光 加上 音訊插入，進行測試

很遺憾我的電腦目前無法使用，不過這個程式應該沒問題(沒有bug)，也有可能是我自己的軟體有點問題；總之，因為修正需要一些時間，因此放上原始碼，讓大家回去試試! 都是範例程式的使用，資料庫中都有喔!

import ddf.minim.*;

Minim minim;

AudioPlayer player, layer;

void setup(){

       size(600,500,P3D);

       minim = new Minim(this);

       player = minim.loadFile("ost.mp3");
                     //註: 音樂名稱.副檔名，要把檔案放進資料夾才行

       layer = minim.loadFile("K.mp3"); //註: 同上

}

int y = 100;

void draw(){

      if(mousePressed){

      lights();

  }

  //lights();

  background(0);

  translate(width / 2, height / 2);

  // Orange point light on the right

  pointLight(100, 100, 255,         // Color

  20, 150, 100);           // Position

  // Blue directional light from the left

  directionalLight(0, 102, 255,           // Color

  1, 0, 1);             // The x-, y-, z-axis direction

  // Yellow spotlight from the front

  spotLight(255, 150, 109,           // Color

  mouseX, 40, 20,            // Position

  0, 0.5, -0.5,           // Direction

  PI / 2, 2);        // Angle, concentration

  // Change height of the camera with mouseY

  camera(mouseX, mouseY, 220.0,             // eyeX, eyeY, eyeZ

  -0.0, -5.0, 0.0,            // centerX, centerY, centerZ

  -10.0, 0.0, 1.0);          // upX, upY, upZ

  fill(100);

  noStroke();

  triangle(100,0,-30,20.5,0,120.5);

  //sphere(50);

  box(90);

  stroke(255);

  line(-100, 0, 0, 100, 0, 0);

  line(0, -100, 0, 0, 100, 0);

  line(0, 0, -100, 0, 0, 100);

  y = y-1;

  if(y < 0 ){

      y = height;

  }

  //建立map函式

  float posx = map(player.position(), 0, player.length(), 0, width);

  stroke(0,200,0);

  float posy = map(layer.position(), 0, player.length(), 0, width);

  line(posx, posy, posx, height);

  // note that if the file is MONO, left.get() and right.get() will return the same value

  //以下就是用音訊輸入當作控制的神奇畫圖機制
  for(int i = 0; i < player.bufferSize() - 1; i++)     

  {

     float x1 = map( i, y, player.bufferSize(), 0, width );

     float x2 = map( i+1, y, player.bufferSize(), 0, width );

     line( x1, 50 + player.left.get(i), x2, 50 + player.left.get(i+1)*50 );

     line( x1, 150 + player.right.get(i)*50, x2, 150 + player.right.get(i+1)*50 );

  }

  for(int i = 0; i < layer.bufferSize() - 1; i++)

  {

     float x1 = map( i, y, layer.bufferSize(), 0, height );

     float x2 = map( i+1, y, layer.bufferSize(), 0, height );

     line( x1, 50 + layer.left.get(i), x2, 50 + layer.left.get(i+1)*50 );

     line( x1, 150 + layer.right.get(i)*50, x2, 150 + layer.right.get(i+1)*50 );

  }

}

void sound(){

}

void keyPressed(){   //鍵盤按鍵控制音訊播放

  if( player.isPlaying() )

     {

         player.pause();

         layer.play();

     }

  else if ( player.position() == player.length() )

     {

        player.rewind();

        player.play();

        layer.pause();

     }

  else

    {

       player.play();

       layer.pause();

    }

}

以上，如有bug，煩請自行改善。 

為何要修改別人的程式? 因為他就在那裏。

程式的進步需要大家的幫助! 

感謝!

Hello World_OpenGL note_Week18

Week 18

期末作品

哈哈哈，希望下次把畫面和聲音變得流暢，並且可以弄成3D!

持續改良中...

Hello World_OpenGL_note_Week 08

Week 08

步驟一: 目前是我的暫時測試:

本圖是將老師所給的檔案，以另外一個圖片取代原圖片，
卻有解析度上的問題，正在嘗試resize。

步驟二: 發現有奇怪的點，自從換一個旋轉軸後。

為了保護原圖的版權，反白以示修過，附帶一提: 沒有針對任何人身或是動物攻擊

步驟三:  嘗試使用 Cylinder 後的結果。(有改變參數)

Hello World_OpenGL_note_Week13

Week 13

主題一: 今天先體驗VR，並說明其使用。

主題二: 介紹蟑螂足球: 即為結合數個圖形的動作，同時呈現在一個畫面中。

             本次使用OpenGL。
       
        步驟一: 加入茶壺至原程式

        步驟二: 使用Timer來控制時速

        步驟三:

主題三: Processing的色彩範例。

Hello World_OpenGL_note_Week16

week 16

本周進度:

進入期末作品的設計。

尋找靈感。參考: http://madebyevan.com/webgl-water/

網頁中介紹詳細的水波紋設計，可以試著簡化來做。

Hello World_OpenGL_note_Week15

Week 15

本周正在進行期末作業的各自作業。

我先從開始的範例，進行複習並熟悉其技巧。

步驟一: 開啟OpenGL 範例，改code。

步驟二: 實際執行更動結果。

然後，進行processing的複習。

步驟: 添加library，像是Minim，LiquidFunProcessing等。
              (因為LiquidFunProcessing較複雜，因此還在研究技巧中)

上方為Minim的示範，右邊是我自己的練習。
本次練習含有圖片檔的使用。
可喜可賀，自己寫出超過20行的程式!

左邊兩張是剩下的完整code，只是作備用。





因為會有版權問題，因此執行結果不上傳。

Hello World_OpenGL_note_Week12

Week 12

步驟一: 先試著使用已建好的OpenGL的檔案

步驟二: 由於使用電腦的問題，無法讀到MinGW/glut.h，因此從程式集解除原本的安裝，再重新安裝一次。

步驟三: 根據老師的教導，將所需要的txt檔案，連同其程式，放入新專案的bin/debug文件夾中。如此才可以執行。

步驟四: 複製檔案到OpenGL專案

步驟五: 執行成功的結果

步驟六: processing的示範。先下載一個函式庫

步驟七: 使用2D來模擬。

步驟八: Processing lib

步驟九: 另一個lib，PickKing

貼心小提醒:
藉由以上的lib example，我們可以先從簡單的小元件開始寫:)

Hello World_OpenGL_note_Week11

Week 11

本周的目標是音樂配置!

Step 1: 使用原本的default，再加上聲音(mmsystem.h)的函式庫

 發現聲音和圖形的執行是不相干的。

Step 2: 改用最簡單的範例程式。

確定成功。

Step 3: 用Processing。此為形式的類推。

Step 4: Mocap == 動作捕捉。不失為一種抓取3D頂點來進行模擬的方式。 

Step 5: 目前可以參考的3D圖點

             (https://learnmmd.com/downloads/#latestMMD)

             Blender也是可以使用的免費材料! (感謝同學的資訊!)

Hello World_OpenGL_note_Week09

Week09

Step 1: 先欣賞別人使用Processing完成的作品，對bump mapping有所認識!

    

Step 2: 簡單介紹Processing

解壓縮後，就可以直接使用。

Step 3: 使用剛剛的範例碼

注意_有color中的random(), 要改成random(255)

Step 4:  要先準備圖檔，才可以引用(拖入Processing的程式框即可)

Step 5: 使用Image 加入圖檔












Step 6:

狀況一:

狀況二:

解決方法---其實是打錯字

Step 7: 看起來可移動的Error。
             主要是因為用背景色(background)蓋掉軌跡。

Step 8: 做到一半的Mario地圖

未完待續。此語言可以當作步驟的驗證(因為它的即時性)。

Hello World_OpenGL_note_Week07

第七周

本周我們欣賞了大家的作品。謝謝老師讓我欣賞到大家的作品，學到很多!

今天我們學習光源。

步驟一: 在原本的程式碼上，加新的程式碼(即粉紅線的部分)

步驟二: 執行結果，注意藍色圈圈。
               光點的改變是因為滑鼠移動。

Hello World_OpenGL_note_Week06

This week, we will modulate the mistake last week unsolved first, than be going to enable light.

Step 1, open packaged project on web, teacher's upload

Step 2, remember change the user name to ensure computer can find our software real position.
notice: notePad++ is a good note to use, and easy to change the pointer vector.

Step 3, in tool-compiler, change 2rd optional function, making old language file can be used in new language scale.

Step 4,
when we forget to do depth test, the graph will be broken.

Step 5,
than run the result, we find out that there are all Black. This is result from the aspect we choose is back view, so we change the aspect.

Step 6, small tip: using Notepad++ to find some function

Step 7, rotate without re-display, need to push bottom once to motion

motion

Step 8, this week's last work: motion

Step 9, homework : try to insert some hotkey to have fun!

Hello World_OpenGL_note_Week05

This week, we want to get advance into operation

Step 1, download files from jsyeh.org/3dcg10 , and organize files into windows file.

 notice: data file has 2 levels, we have to pull 2nd file out

 Step 2, run to ensure the operator we did last week.

notice: these data sources can be run in Mac system.

Step 3,.viewing in projection.exe

this is the source of projection mode:

Step 4,  there are three types of perspective, difference lies on factors, 1st, perspective

Step 5, 2nd, frustum: the right figure is perspective, we can make comparison.

Step 6, 3rd, orthogonal

notice: factors are changed_

Step 7, glu--->up  than GL/ look at ---gluLookAt---special
            this is for look at eye's Y-axis viewing changing

Step 8, there are some bugs in using source from web site, since C file and C++ file are not in coherence.

Step 9,take mouse motion into using.........unfinished.

Step 10, glRotate first or glTranslate first has different meaning, the tip is based on reading order: from bottom to top.

Step 11, we had tried to project with teacher's files, but I faced some problems, I am trying again in this week.