作業1 元智夜景

1.主題介紹

這次的主題是元智夜景，利用課堂上所教的OpenGL來畫一個簡單的圖，
我畫的是：元智夜晚的星空。


2.過程與成果展示


一、首先我先把所有的底色，用深夜的暗深藍色填滿

程式碼如下
    glBegin(GL_POLYGON);     
        glColor3f(0.1, 0.1, 0.3);
        glVertex2f(-1, -1);       
        glVertex2f(-1, 1);       
        glVertex2f(1, 1);       
        glVertex2f(1, -1);
    glEnd();
使用的顏色是RGB(0.1 0.1 0.3)。

二、再來畫出一棟暗灰色建築

程式碼如下
    glBegin(GL_POLYGON);  
        glColor3f(0.2, 0.2, 0.2);
        glVertex2f(-0.3, -1);       
        glVertex2f(-0.3, 0.2);       
        glVertex2f(0.3,  0.2);       
        glVertex2f(0.3, -1);
    glEnd();
使用的顏色是RGB(0.2, 0.2, 0.2)。

三、夜晚關燈後的黑色窗戶

程式碼如下
    glBegin(GL_POLYGON);  
        glColor3f(0.1, 0.1, 0.1);
        glVertex2f(-0.18, -0.3);       
        glVertex2f(-0.18, 0.1);       
        glVertex2f(-0.06, 0.1);       
        glVertex2f(-0.06, -0.3);
    glEnd();

    glBegin(GL_POLYGON);  
        glColor3f(0.1, 0.1, 0.1);
        glVertex2f(0.18, -0.3);       
        glVertex2f(0.18, 0.1);       
        glVertex2f(0.06, 0.1);       
        glVertex2f(0.06, -0.3);
    glEnd();

    glBegin(GL_POLYGON);  
        glColor3f(0.1, 0.1, 0.1);
        glVertex2f(-0.18, -0.9);       
        glVertex2f(-0.18, -0.5);       
        glVertex2f(-0.06, -0.5);       
        glVertex2f(-0.06, -0.9);
    glEnd();

    glBegin(GL_POLYGON);  
        glColor3f(0.1, 0.1, 0.1);
        glVertex2f(0.18, -0.9);       
        glVertex2f(0.18, -0.5);       
        glVertex2f(0.06, -0.5);       
        glVertex2f(0.06, -0.9);
    glEnd();
使用的顏色是RGB(0.1,0.1,0.1) 。

四、先畫出一個圓形的黃色月亮

程式碼如下
    glBegin(GL_POLYGON);
        glColor3f(1,1,0);
        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(5))-0.7, (sin(angle)/(5))+0.7);
        }
    glEnd();

使用顏色是RGB(1,1,0)。
迴圈中的angle後面，分母是控制這個圓的大小，
這個分母越大則圓越小，反之亦然。
後面那個0.7是控制位置，circlepoint我是把他定義成100點。


五、用覆蓋的方式畫出一彎弦月

 程式碼如下
    glBegin(GL_POLYGON);
        glColor3f(0.1,0.1,0.3);
    for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(5))-0.8, (sin(angle)/(5))+0.8);
        }
    glEnd();
這個圓的顏色跟背景的夜空一樣，
座標比上一個黃色的圓左上一格，
因為這個圓較後畫，
所以會把前面的黃色圓月蓋掉一個部份，
看起來就有弦月的效果。


六、用很多圈圈來畫一朵灰白色的雲

程式碼如下
    glBegin(GL_POLYGON);
        glColor3f(1,1,0);
        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(5))-0.7, (sin(angle)/(5))+0.7);
        }
    glEnd();
   
    glBegin(GL_POLYGON);
        glColor3f(0.1,0.1,0.3);
    for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(5))-0.8, (sin(angle)/(5))+0.8);
        }
    glEnd();
   

    glBegin(GL_POLYGON);
        glColor3f(0.9,0.9,0.9);
        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.55, (sin(angle)/(15))+0.55);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.5, (sin(angle)/(15))+0.57);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.45, (sin(angle)/(15))+0.54);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.4, (sin(angle)/(15))+0.53);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.35, (sin(angle)/(15))+0.55);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.3, (sin(angle)/(15))+0.58);
        }

        for (i=0;i<circle_points;i++){
            float angle = 0.1*pi*i;
            glVertex2f((cos(angle)/(15))-0.25, (sin(angle)/(15))+0.53);
        }
    glEnd();

這些cos跟sin座標都是亂取的，
這樣雲層的樣式會比較不固定，
比較自然。
顏色是用RGB(0.9,0.9,0.9)。


七、用白色的點來呈現北斗七星的感覺

程式碼如下
    glPointSize(3.0); 
    glBegin(GL_POINTS);
        glColor3f(1,1,1);
        glVertex2f(-0.4,0.8);
        glVertex2f(-0.1,0.9);
        glVertex2f(0.2,0.8);
        glVertex2f(0.4,0.7);
        glVertex2f(0.45,0.45);
        glVertex2f(0.8,0.5);
        glVertex2f(0.9,0.8);
    glEnd();
使用的顏色是RGB(1,1,1)。

這就是整幅圖的製作過程。


3.心得與討論
這是我第一次用程式繪圖，以往從來沒有過經驗，算是很新鮮的體驗。剛開始就碰到的困難是，編譯器需要做的函式庫跟標頭檔......等等的設定有點繁瑣，一直缺這個缺那個，我本來想用DEV C++去寫，不過用不太順，所以最後搞定的時候是用Visual Studio 2010來編輯的。剛開始的時候不知道如何下手，所以去查了很多資料，慢慢一步一步的把圖弄出來，雖然這個第一次作業的圖很簡陋，可是當完成的時候還是有很棒的成就感。原本想要設計得更複雜一點，但是後來發現這麼做，要不是成果很醜，就是程式碼很亂，所以就暫時先打消這個念頭，希望我能在這個方面有更大的進步。