腳本之家服務器常用軟件

快捷導航

C++之openFrameworks框架介紹

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

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

0x00 openFrameworks 介紹

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

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

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

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

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

Visual Studio、Xcode、Eclipse、Code::Blocks

?? 官網(wǎng)：openFrameworks

0x01 開啟 oF 之旅

首先，創(chuàng)建基于 oF 的項目需要一個集成開發(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)建：

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

提供以下三種視圖形式：

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

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

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

Apps，Examples，libs ，other，projectGenerator，Addons

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

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

0x03 圖形基礎

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

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

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

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

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

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) 的直線。

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

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

ofFill() 函數(shù)用于設置形狀的填充顏色，使繪制的形狀被填充。
ofNoFill() 函數(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);

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

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

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

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

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

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

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

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

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

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

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;

?? 運行結(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)