C++之openFrameworks框架怎么使用

這篇“C++之openFrameworks框架怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“C++之openFrameworks框架怎么使用”文章吧。

0x00 openFrameworks 介紹

openFrameworks（簡稱 oF）是一個基于C++的開源庫。

它提供了豐富的功能庫和工具，用于快速開發多媒體、交互性和藝術創作相關的應用程序，如藝術裝置、互動藝術、音視頻作品、實時圖形等。oF 的設計目標是讓創意編程變得更加簡單、直觀和靈活，使藝術家、設計師、創意工作者等能夠利用編程進行創作和表達。oF提供了豐富的圖形、音頻、輸入輸出、計算機視覺等功能庫，并支持跨平臺開發，適用于Windows、Mac OSX、Linux等操作系統。oF的社區活躍，有大量的用戶和開發者共享和貢獻了各種擴展、插件和示例代碼。

oF被設計成通用的“膠水”，包括以下常用庫：

• 圖形：OpenGL、GLEW、GLUT 等

• 音頻輸入輸出和分析：rtAudio、PortAudio、OpenAL 等

• 圖像加載和保存：FreeImage

• 計算機視覺：OpenCV

• 3D模型加載：Assimp

此外，oF還支持跨平臺。目前支持Windows、Mac OSX、Linux等IDE

• Visual Studio、Xcode、Eclipse、Code::Blocks

0x01 開啟 oF 之旅

首先，創建基于 oF 的項目需要一個集成開發環境 (IDE) ，比如 Visual Studio (適用于Windows)，Xcode（適用于 Mac OSX），大多數 IDE 都具有類似的用戶界面。

Xcode 是蘋果公司開發的集成開發環境 (IDE) ：

Visual Studio是由微軟公司開發的集成開發環境 (IDE) ：

在 Visual Studio 中的構建：

項目視圖區域：提供一種一致的方式來查看構成項目的各個元素。

提供以下三種視圖形式：

• 類視圖（Class view）：允許在C++類級別上查看和操作源代碼。

• 資源視圖（Resource view）：允許查找和編輯應用程序中使用的各種資源，如對話框、圖標、菜單等。

• 文件視圖（File view）：允許查找并瀏覽創建應用程序所需的所有文件。

0x02 oF 文件結構

從 openFrameworks (oF) 的官網 (download | openFrameworks) 下載并解壓縮提供的框架文件，框架文件夾被稱為 oF root 文件夾，oF root 文件夾包含以下多個文件夾：

Apps，Examples，libs ，other，projectGenerator，Addons

運行示例：oF 根目錄下的 examples 文件夾包含了許多不同的示例項目，先嘗試運行示例項目。

• 對于使用 Xcode 的用戶，可以點擊以 .xcodeproj 擴展名結尾的文件來運行項目。

• 對于使用 Visual Studio (VS) 的用戶，可以點擊以 .sln 擴展名結尾的文件來運行項目。

0x03 圖形基礎

畫筆：為了創建各種形狀的畫筆，首先需要定義圖形的基本構建塊 (BBB)。 2D 圖形函數可以分為兩種類別。 基本形狀 (Basic Shapes): 如線條、矩形、三角形等。 自由形狀 (Freeform Shapes): 如多邊形、路徑等。

在繪制任何形狀之前，需要理解在 oF 中如何確定對象的位置以及如何解釋位置。計算機圖形學通常使用笛卡爾坐標系，但在 oF 中使用了具有以下兩個不同之處的坐標系：

• 原點 (Origin) 位于左上角

•  軸的方向被翻轉

 創建一個新項目：

創建完新項目后，打開源文件中的 ofAPP.cpp 的 draw() 函數，試試下面的代碼：

ofBackground(0); // 用黑色清空屏幕，0 表示完全白色的灰度顏色。
ofSetColor(255); // 將繪制顏色設置為白色。
 
// 在下面繪制一些圖形。
ofDrawRectangle(50, 50, 100, 100); // 左上角坐標為 (50, 50)，寬度為 100，高度為 100。
ofDrawCircle(250, 100, 50); // 中心坐標為 (250, 100)，半徑為 50。
ofDrawEllipse(400, 100, 80, 100); // 中心坐標為 (400, 100)，寬度為 80，高度為 100。
ofDrawTriangle(500, 150, 550, 50, 600, 150); // 三個頂點坐標分別為 (500, 150), (550, 50), (600, 150)。
ofDrawLine(700, 50, 700, 150); // 從 (700, 50) 到 (700, 150) 的直線。

???? 運行結果如下：

下面再試試 ofFill() 和 ofNoFill() 函數：

• ofFill() 函數用于設置形狀的填充顏色，使繪制的形狀被填充。

• ofNoFill() 函數用于設置形狀的無填充狀態，只繪制輪廓線，不填充顏色。

ofBackground(0);
ofSetColor(255);
ofFill();
ofDrawRectangle(50, 50, 100, 100);
ofDrawCircle(250, 100, 50);
ofDrawEllipse(400, 100, 80, 100);
ofDrawTriangle(500, 150, 550, 50, 600, 150);
ofDrawLine(700, 50, 700, 150);
ofNoFill();
ofDrawRectangle(50, 200, 100, 100);
ofDrawCircle(250, 250, 50);
ofDrawEllipse(400, 250, 80, 100);
ofDrawTriangle(500, 300, 550, 200, 600, 300);
ofDrawLine(700, 200, 700, 300);

???? 運行結果如下：

使用基本形狀來創建一個小項目，具有以下目標。

• 目標：通過按下鼠標左鍵并移動，用畫筆創建一個隨機散布的 "爆炸狀" 效果。

// 如果左鼠標按鈕被按下...
if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) {  
    ofSetColor(255);
    ofSetRectMode(OF_RECTMODE_CENTER);
    ofDrawRectangle(
        ofGetMouseX(), 
        ofGetMouseY(), 
        50, 
        50
    );  
    // 在鼠標位置繪制一個寬高為50的矩形，居中對齊
}

單矩形畫刷：使用鼠標（2） 

// 我們仍然希望在黑色背景上進行繪制，因此在進行畫刷操作之前需要先繪制背景
ofSetBackgroundAuto(false); 
ofBackground(0); // 設置背景顏色為黑色

修改 draw() 函數，隨機指定出現的矩形的顏色：

if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) { // 如果左鼠標按鈕被按下...
  float randomColor = ofRandom(50, 255); // 隨機生成顏色值，范圍從50到255
  ofSetColor(randomColor); // 設置矩形的顏色為隨機生成的顏色值，排除黑色背景上不可見的灰度值（0 - 50）
  ofSetRectMode(OF_RECTMODE_CENTER); 
  ofDrawRectangle(ofGetMouseX(), ofGetMouseY(), 50, 50); // 在鼠標位置繪制一個寬高為50的矩形，居中對齊
}

ofRandom() 用于生成指定范圍內的隨機數。它接受兩個參數，表示生成隨機數的范圍，可以是整數或浮點數。例如，ofRandom(0, 255) 會生成一個0到255之間的隨機整數。

ofSetColor() 接受一個或多個參數，用于指定顏色的RGBA值（紅、綠、藍和透明度）。常見的用法是傳入三個整數參數來設置RGB顏色值，例如 ofSetColor(255, 0, 0) 表示設置顏色為紅色。

這兩個函數通常在繪圖時一起使用，例如在繪制圖形之前先生成隨機顏色，然后使用 ofSetColor() 設置繪制的圖形顏色，從而實現隨機顏色的效果。

if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) { // If the left mouse button is pressed...
ofSetRectMode(OF_RECTMODE_CENTER);
int numRects = 10;
for (int r=0; r<numRects; r++) {
ofSetColor(ofRandom(50, 255));
float width = ofRandom(5, 20);
float height = ofRandom(5, 20);
float xOffset = ofRandom(-40, 40);
float yOffset = ofRandom(-40, 40);
ofDrawRectangle(ofGetMouseX()+xOffset, ofGetMouseY()+yOffset, width, height);
}
}

發光圓形筆刷：使用顏色

了解如何更改顏色：

ofColor myOrange(255, 132, 0); // Defining an opaque orange color - specified using RGB
ofColor myBlue(0, 0, 255, 50); // Defining a transparent blue color - specified using RGBA
// We can access the red, green, blue and alpha channels like this:
ofColor myGreen(0, 0, 255, 255);
cout << "Red channel:" << myGreen.r << endl;
cout << "Green channel:" << myGreen.g << endl;
cout << "Blue channel:" << myGreen.b << endl;
cout << "Alpha channel:" << myGreen.a << endl;
// We can also set the red, green, blue and alpha channels like this:
ofColor myYellow;
myYellow.r = 255; myYellow.b = 0; myYellow.g = 255; myYellow.a = 255;
// We can also make use of some predefined colors provided by openFrameworks:
ofColor myAqua = ofColor::aqua;
ofColor myPurple = ofColor::plum;

???? 運行結果如下：

Fleeing 三角形筆刷：Vector

ofVec2f mousePos(ofGetMouseX(), ofGetMouseY());
// Define a triangle at the origin (0,0) that points to the right
ofVec2f p1(0, 25.0);
ofVec2f p2(100, 0);
ofVec2f p3(0, -25.0);
// Shift the triangle to the mouse position
p1 += mousePos;
p2 += mousePos;
p3 += mousePos;

Fleeing 三角形筆刷：Vectors 和旋轉

0x04 使用 projectGenerator 創建項目

在 of_v0.11.2_vs2017_release\projectGenerator 路徑下，雙擊：

然后定義 Project name 項目名稱，路徑可以不做修改，如果需要，可以在 Addons 中可以添加插件。最后點擊 Generate 按鈕，即可生成。

此時點擊 Open in IDE 即可，IDE 就會彈出：

以上就是關于“C++之openFrameworks框架怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。