快捷導(dǎo)航

C++之openFrameworks框架介紹

更新時間：2023年05月05日 10:43:21 作者：檸檬葉子C

本章我們將介紹一個非常好用的跨平臺的 C++開源框架 openFrameworks。它是一個開源的跨平臺的C++工具包，方便開發(fā)者創(chuàng)建出一個更簡單和直觀的框架，擅長開發(fā)圖像和動畫，感興趣的同學(xué)可以參考一下

0x00 openFrameworks 介紹

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

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

oF被設(shè)計(jì)成通用的“膠水”，包括以下常用庫：

圖形：OpenGL、GLEW、GLUT 等
音頻輸入輸出和分析：rtAudio、PortAudio、OpenAL 等
圖像加載和保存：FreeImage
計(jì)算機(jī)視覺：OpenCV
3D模型加載：Assimp

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

Visual Studio、Xcode、Eclipse、Code::Blocks

?? 官網(wǎng)：openFrameworks

0x01 開啟 oF 之旅

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

Xcode 是蘋果公司開發(fā)的集成開發(fā)環(huán)境 (IDE) ：

Visual Studio是由微軟公司開發(fā)的集成開發(fā)環(huán)境 (IDE) ：

在 Visual Studio 中的構(gòu)建：

項(xiàng)目視圖區(qū)域：提供一種一致的方式來查看構(gòu)成項(xiàng)目的各個元素。

提供以下三種視圖形式：

類視圖（Class view）：允許在C++類級別上查看和操作源代碼。
資源視圖（Resource view）：允許查找和編輯應(yīng)用程序中使用的各種資源，如對話框、圖標(biāo)、菜單等。
文件視圖（File view）：允許查找并瀏覽創(chuàng)建應(yīng)用程序所需的所有文件。

0x02 oF 文件結(jié)構(gòu)

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

Apps，Examples，libs ，other，projectGenerator，Addons

運(yùn)行示例：oF 根目錄下的 examples 文件夾包含了許多不同的示例項(xiàng)目，先嘗試運(yùn)行示例項(xiàng)目。

對于使用 Xcode 的用戶，可以點(diǎn)擊以 .xcodeproj 擴(kuò)展名結(jié)尾的文件來運(yùn)行項(xiàng)目。
對于使用 Visual Studio (VS) 的用戶，可以點(diǎn)擊以 .sln 擴(kuò)展名結(jié)尾的文件來運(yùn)行項(xiàng)目。

0x03 圖形基礎(chǔ)

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

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

原點(diǎn) (Origin) 位于左上角
$y$ 軸的方向被翻轉(zhuǎn)

創(chuàng)建一個新項(xiàng)目：

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

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

?? 運(yùn)行結(jié)果如下：

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

ofFill() 函數(shù)用于設(shè)置形狀的填充顏色，使繪制的形狀被填充。
ofNoFill() 函數(shù)用于設(shè)置形狀的無填充狀態(tài)，只繪制輪廓線，不填充顏色。

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);

?? 運(yùn)行結(jié)果如下：

使用基本形狀來創(chuàng)建一個小項(xiàng)目，具有以下目標(biāo)。

目標(biāo)：通過按下鼠標(biāo)左鍵并移動，用畫筆創(chuàng)建一個隨機(jī)散布的 "爆炸狀" 效果。

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

單矩形畫刷：使用鼠標(biāo)（2）

// 我們?nèi)匀幌Ｍ诤谏尘吧线M(jìn)行繪制，因此在進(jìn)行畫刷操作之前需要先繪制背景
ofSetBackgroundAuto(false); 
ofBackground(0); // 設(shè)置背景顏色為黑色

修改 draw() 函數(shù)，隨機(jī)指定出現(xiàn)的矩形的顏色：

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

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

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

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

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);
}
}

發(fā)光圓形筆刷：使用顏色

了解如何更改顏色：

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;

?? 運(yùn)行結(jié)果如下：

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 和旋轉(zhuǎn)