銘傳夜間部教你寫程式 Week02 點線面色彩

 

第一個程式:GLUT實作茶壺

• 學校教室的2022葉正聖老師上課軟體內有內建freeglut-MinGW-3.0.0-1.mp.zip,如果用自己的電腦或者沒有,下載網站在下面~~(按一下圖片紅色文字那邊就會自動下載)
• https://www.transmissionzero.co.uk/software/freeglut-devel/
  
• 把freeglut-MinGW-3.0.0-1.mp.zip檔案解壓縮後,點選freeglut-MinGW-3.0.0-1.mp檔案夾,在選擇freeglut檔案夾,最後打開lib檔案夾會看到以下畫面

• 接著把"libfreeglut.a"複製一遍貼上得到"libfreeglut - 複製.a"

• 把"libfreeglut - 複製.a"重新命名為"libglut32.a",副檔名不用動,完成初始設定了,接下來就可以開啟CodeBlocks

• 老樣子開啟CodeBlocks(17.12版本最佳)

• 點選左上角"File",接著拖移屬標到"New",但是不要按下去!右邊浮現選項後,選擇"Project"
  

• 進入Project後,不用滑至最下方,選擇"GLUT Project"開源軟件,然後按下視窗右上角的"Go"

• 進入第一個畫面直接按下"Next",下一頁設定名稱(Project title)為"Week02-1.1_GLUT_茶壺",(檔案位置推薦設定在桌面)即可按下"Next"

• 第三頁不能急著按"Finish",點選那神奇的三個點"..."

• 然後就會出現一個視窗

• 什麼都不要做,沒錯就是這樣,然後按下"X"即可

• 接下來會直接跳出選擇資料夾頁面,Just like this,選擇一整個"freeglut-MinGW-3.0.0-1.mp"裡的"freeglut"資料夾(不需對檔案點兩下,按一下選取後,直接按確定即可)

• 恭喜你成功完成了前置作業,畫面是灰色空白的,到目前為止跟上禮拜一樣,程式碼還是GLUT的範例,請去左方"Projects",展開你的檔案名稱,展開"Sources",找到主程式"main.cpp"點擊兩下

• 接著畫面會顯示範例程式碼,就是原本會跑出紅色球,紅色三角錐,跟紅色甜甜圈的那個

• 不要懷疑!全部刪除!寫上屬於自己的程式碼~~
• 以下為Week02-1.1_GLUT_茶壺範例:

• 寫上之後,點選"Build and run"按鈕,就會顯示基礎茶壺了!
  

第二個程式:GLUT實作進階茶壺

• 仿造以上開啟檔案方法開啟一個新的檔案,以下這一頁不須再點"..."來找尋"freeglut"資料夾,因為你剛剛找過電腦自動存檔了,除非重啟或者換一台電腦才需重新抓位置

• 程式碼還是GLUT的範例,請去左方"Projects",展開你的檔案名稱,展開"Sources",找到主程式"main.cpp"點擊兩下

• 全部刪除!寫上屬於自己的程式碼~~
• 以下為Week02-1.2_GLUT_進階茶壺範例:

• 寫上之後,點選"Build and run"按鈕,就會顯示進階茶壺了!

第三個程式:GLUT實作頂點跟茶壺

• 仿造以上開啟檔案方法開啟一個新的檔案,以下這一頁不須再點"..."來找尋"freeglut"資料夾,因為你剛剛找過電腦自動存檔了,除非重啟或者換一台電腦才需重新抓位置

• 程式碼還是GLUT的範例,請去左方"Projects",展開你的檔案名稱,展開"Sources",找到主程式"main.cpp"點擊兩下

• 全部刪除!寫上屬於自己的程式碼~~
• 以下為Week02-2.1_GLUT_頂點茶壺範例:

• 寫上之後,點選"Build and run"按鈕,就會顯示頂點茶壺了!
  
  
  
  
  

第四個程式:GLUT實作彩色版頂點跟茶壺

• 仿造以上開啟檔案方法開啟一個新的檔案,以下這一頁不須再點"..."來找尋"freeglut"資料夾,因為你剛剛找過電腦自動存檔了,除非重啟或者換一台電腦才需重新抓位置

• 程式碼還是GLUT的範例,請去左方"Projects",展開你的檔案名稱,展開"Sources",找到主程式"main.cpp"點擊兩下
  
  
  

• 全部刪除!寫上屬於自己的程式碼~~
• 以下為Week02-2.2_GLUT_彩色頂點茶壺範例:

• 寫上之後,點選"Build and run"按鈕,就會顯示彩色頂點茶壺了!
  

  

第五個程式:GLUT實作彩利用頂點＆色彩

畫出你覺得很酷的圖片

• 首先上網查詢你喜歡的圖片,建議偏方正不然很累,要設定很多點！
• 比如這個：
  
  
  
• 接著利用小畫家把圖片打開,順便把縮放比例調整為可以看見全部圖片的％數

• 仿造以上開啟檔案方法開啟一個新的檔案,以下這一頁不須再點"..."來找尋"freeglut"資料夾,因為你剛剛找過電腦自動存檔了,除非重啟或者換一台電腦才需重新抓位置
  
  
  

• 程式碼還是GLUT的範例,請去左方"Projects",展開你的檔案名稱,展開"Sources",找到主程式"main.cpp"點擊兩下

• 全部刪除!寫上屬於自己的程式碼~~
• 首先寫上程式碼執行之框架

//#include <bits/stdc++.h>函式庫是一個包含近乎90%函式的一個函示庫(剛好這就是其中10%)母湯用

#include <GL/glut.h> ///(For Windows)

///#include <GLUT/glut.h>(For Mac OS)

void display()

{

    glBegin(GL_POLYGON);

       

    glEnd();

    glutSwapBuffers();  ///交換顯示出來

}

int main(int argc,char *argv[]) ///這個main()括號裡的程式碼可以程式讀取小黑內容

{

    glutInit(&argc, argv); ///啟用GLUT功能

    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); ///GLUT顯示模式

    glutCreateWindow("Week02-3_GLUT_回家作業"); ///要建立一個視窗,這是他的名稱

    glutDisplayFunc(display); ///要顯示的函示 display()

    glutMainLoop();  ///主迴圈卡在後面

}

• 回到小畫家,我們看到圖片的像素都是XX(X軸)*YY(Y軸)像素,但是程式語言只有-1到+1像素,所以我們要做轉換,以下為轉換公式
• 假設我要取的點位於70*105像素,那我就寫上
• glVertex2f((70-100)/100.0,-(105-100)/100.0);
• glVertex2f((XX-100)/100.0,-(YY-100)/100.0);

• 注意像素得要控制在200*200以內,不然會顯示不出來!
• 如果你很喜歡這個圖片或者找不到低於200*200的圖,可以利用以下網站調整
• https://www.iloveimg.com/zh-tw/resize-image/resize-png

• 調整完之後就可以抓頂點了!

• 比如我的圖片是這樣,我就個別讓鼠標靠近頂點,右下角就會顯示當下頂點,紀錄後套上公式寫入

• 接下來是顏色,一樣有公式,套入即可,抓取方式是點選色彩選擇器,放在你圖片的上方按一下吸取顏色

• 接下來點選色彩編輯就會顯示顏色面板,右下角就是該顏色的RGB

• 套上這個公式即可顯示該顏色在CodeBlocks上
• glColor3f(R/255.0,G/255.0,B/255.0);

• 以下為Week02-3_GLUT_回家作業範例: