日更第2期-2015-1-16-openFrameworks系列第一講-手把手制作openFrameworks上的第一個程序!


恩,今天和朋友打球來着,於是今天的案例程序就做一個球吧!O(∩_∩)O哈哈~

首先,沒有看過上一篇教程的同學,還有還沒有下載好VS和OpenFrameworks的同學,都去下一下。

傳送地址:http://www.cnblogs.com/linongbo/p/4227552.html

那么,開始今天的日更啦!

 

Hello OpenFrameworks!

 

VS的安裝部分我就不說了,不過我個人建議——默認是安裝在C盤的,不過你要是手動改到別的盤上的話,C盤上

依然會有6G左右的內容.......Σ( ° △ °|||)︴所以干脆就放在C盤好了,畢竟他和Windows內核聯系不少。然后

OpenFrameworks的部分.....你其實有兩種選擇,第一種是從官網下載已經釋放的版本;第二種,是在gitHub

上找到OpenFrameworks這個工程,然后download as zip或者fork一下。恩,我知道有可能你都聽不懂我在講啥,

不過之后一定會講的,到時候要去github給我加星哦!

 

然后還是說說怎么使用OpenFrameworks吧,我這次按步驟來說。

 

第一步 選擇合適目錄並解壓OpenFrameworks的安裝包

 

實際上,安裝包這個說法並不正確。因為OpenFrameworks其實並不是一個應用程序(雖然里面含有),它是一個

編程框架,所以,其實它是一些整理好了的代碼。還是拿工地來比喻的話,它就是一個已經建好了地基的工地,並且

已經打好了好多柱子,只等你去給它豐富了。那么,這些原始的材料、工地,其實只是一些文件,所以不需要在你的

電腦里配置甚至開機啟動,所以直接解壓即可。

 

不過這里說一下,這可不是放在哪里都好的——雖然壓縮包不到一個G,但是你在之后的使用中,必然會變得很大。

這是因為,你編譯出程序的同時,還會出很多臨時的東西,你如果都留着的話,可能會變得巨大無比,比如我就

編譯了幾個例子,就已經4G了。所以還是放在硬盤空間比較富裕的地方為好。

 

第二步 測試安裝包里的例子

 

想要測試你的環境有沒有問題,VS安裝是不是正確,版本是不是合適的最簡單的方法就是——編一個程序試試。

所幸,為了幫助學習OpenFrameworks,它自帶了很多樣例程序,你可以不用自己編寫而選擇用已成型的代碼來

測試你的工作環境是不是正確。

 

那些樣例的路徑是of_v0.8.4_vs_release\of_v0.8.4_vs_release\examples

也就是你點到一堆文件夾那里,選擇examples文件夾即可。然后你會看到很多小文件夾,然后隨便挑一個進去,

會發現更多的小文件夾......Σ( ° △ °|||)︴不過再點進去的話就出現文件了。選擇后綴名為.sln的那一個(電腦里

看不到后綴名的去上網學學怎么打開......程序員怎么可以不看后綴!)sln的意思是“solution”,中文譯名是“解決

方案”,你可以理解為這是這個程序的工程的接入點。

                          (划線處那個)

打開之后,你會看到如下圖那個界面,點擊那個綠色的三角,然后......等。於是樣例程序就會出來了——如果

沒出來,你就要看看自己安裝軟件的時候是不是哪里除了問題。

 

 

第三步 建立自己的工程

一般上來說,你用框架時你要做兩件事——第一件,配置環境;第二步,配置工程。當然,OpenFrameworks

自然也需要配,但是,偉大的程序員想到了別的簡單的替代方法,即讓程序替我們去配置就好了!(這真是太好了,

我之前看過OpenGL Super Bible(第五版)這本書,我連第一個例子都沒做出來,因為環境一直沒配好!然后

我上網查找才發現這書就是這么絕,就是這么難配!( ⊙ o ⊙ ))

 

然后我來說說OpenFrameworks工程的最簡單建立方法!(也基本是最常用的)

 

打開剛才的examples那級目錄(即一堆文件夾那個),然后進入projectGenerator這個文件夾,然后點擊那個exe。

你會看到下圖的這個程序窗口彈了出來,然后點擊橘色框中的按鈕就可以彈出那個窗口來改變你新建的工程的名稱,

點擊綠色框內的按鈕就可以生成工程。

           (那個有着ok和cancel按鈕的窗口是點擊了Name之后才會彈出來的)

 

然后你就建立好一個你的新工程啦!是不是非常簡單!\(^o^)/~

不過那個工程在哪里?Σ( ° △ °|||)︴

又在和example同級那個目錄下的apps/myApps里,根據你剛才新建的工程名就可以找到了!

 

第四步 寫點什么

 

如果你有過學習一些編程語言的經歷的話,你就會知道,一般第一個程序就會叫做hello world,原因不明,可以說是

程序界的一大傳統(一般對於命令行輸出的程序來說,還是寫句話最簡單。話說也有程序會寫這么句話“we will not

say ‘hello world’”),不過對於有圖形的窗口的編程來說,第一個程序一般是會畫個圓啊,三角啊,矩形啊,線啊

之類的。這一次,我們畫個球。

 

首先還是打開你新建的工程

  (先點紅的,然后會出現新的一層,再點黃的,最后雙擊紫的。不然你就什么也看不到,如同第二張圖那樣)

 

然后——你會看到好多好多不明白的東西——現在無視掉!你還是點那個綠色三角運行好了!然后你就會發現出現了

一個什么都沒有的窗口——那個就是你的程序。你現在要在上面這張圖中的右邊那個編輯器里面寫一些東西,然后就

可以看到相應的結果了。

 

現在你要按照我的代碼,把相應的部分填到你的編輯窗口里哦。

1 void ofApp::draw(){
2     ofBackgroundGradient(ofColor::white,ofColor(200,200,200), OF_GRADIENT_CIRCULAR);
3         //設置背景漸變顏色
4     ofSetColor(255, 255, 0);
5        //設置圖形的填充顏色
6     ofCircle(100, 200, 60);
7        //在(100,200)畫一個半徑60的圓
8 }

第一次編譯的時候可能會花很長很長時間,稍微等等就好。然后你就會看到這么一個圖:

 

其實現在你就已經開始OpenFrameworks的編程了,這顯然比什么puts或者system.out.printf之類的有趣多了,但是

這樣很明顯還不夠,起碼還不可以玩,而一個好的教程,是必須的玩壞程序的,所以我要加一些功能,你可能看不到,不過

放在適應的位置就好了。注意,一定要親手試試看!

然后,代碼如下所示:

 1 int x;
 2 int y;
 3 double deX;
 4 double deY;
 5 int c[3];
 6 //以上代碼請放在最上面
 7 
 8 //--------------------------------------------------------------
 9 void ofApp::setup(){
10     x=200;
11     y=180;
12     deX=1;
13     deY=-1;
14     ofEnableSmoothing();
15     ofBackgroundGradient(ofColor::white,ofColor(200,200,200), OF_GRADIENT_CIRCULAR);
16 }
17 
18 //--------------------------------------------------------------
19 void ofApp::update(){
20     c[0] = x+y;
21     if(x+y>255)
22     {
23         c[0] = 255;
24     }
25     c[1] = x;
26     if(x>255)
27     {
28         c[1] = 255;
29     }
30     c[2] = x-y;
31     if(x-y<=0)
32     {
33         c[2] =0;
34     }
35     if(x-y>=255)
36     {
37         c[2]=255;
38     }
39 
40     x+=1*deX;
41     y+=1.4*deY;
42     if(y<60 )
43     {
44         deY *=-1;
45         y=60;
46         deY = deY*0.95;
47     }
48     if(y>1024-60)
49     {
50         deY *=-1;
51         y=540;
52         deY = deY*0.95;
53     }
54     if(x<60 )
55     {
56         deX *=-1;
57         x=60;
58         deX = deX*0.95;
59     }
60     if(x>756-60)
61     {
62         deX *=-1;
63         x=740;
64         deX = deX*0.95;
65     }
66     deX = deX*0.999;
67     deY = deY*0.999;
68     cout<<deX<<endl;
69 }
70 
71 
72 //--------------------------------------------------------------
73 void ofApp::draw(){
74     
75     ofSetColor(c[0], c[1], c[2]);
76     ofCircle(x, y, 60);
77 }
78 
79 //--------------------------------------------------------------
80 void ofApp::keyPressed(int key){
81     deX *= 5;
82     deY *= 5;
83     int a = mouseX;
84 }

這一次的代碼我不會解釋太多——因為有太多事情要講了!下一期就將就這個程序來展開。

那么現在,運行程序吧,那樣你就會看到一個小球,變着顏色的在你的屏幕上滾來滾去!

點擊鍵盤上任何按鍵還可以加速哦!快來試試吧!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM