C++ 之 openFrameworks 框架

2023-07-11
四川
本文字数：2006 字
阅读完需：约 7 分钟

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

🔗 官网：openFrameworks

开启 oF 之旅

首先，创建基于 oF 的项目需要一个集成开发环境 (IDE) ，比如 Visual Studio (适用于 Windows)，Xcode（适用于 Mac OSX），大多数 IDE 都具有类似的用户界面。

Xcode 是苹果公司开发的集成开发环境 (IDE) ：

Visual Studio 是由微软公司开发的集成开发环境 (IDE) ：

在 Visual Studio 中的构建：

项目视图区域：提供一种一致的方式来查看构成项目的各个元素。

提供以下三种视图形式：

类视图（Class view）：允许在 C++类级别上查看和操作源代码。
资源视图（Resource view）：允许查找和编辑应用程序中使用的各种资源，如对话框、图标、菜单等。
文件视图（File view）：允许查找并浏览创建应用程序所需的所有文件。

oF 文件结构

从 openFrameworks (oF) 的官网 (download | openFrameworks) 下载并解压缩提供的框架文件，框架文件夹被称为 oF root 文件夹，oF root 文件夹包含以下多个文件夹：

Apps，Examples，libs ，other，projectGenerator，Addons

运行示例：oF 根目录下的 examples 文件夹包含了许多不同的示例项目，先尝试运行示例项目。

对于使用 Xcode 的用户，可以点击以 .xcodeproj 扩展名结尾的文件来运行项目。
对于使用 Visual Studio (VS) 的用户，可以点击以 .sln 扩展名结尾的文件来运行项目。

图形基础

画笔：为了创建各种形状的画笔，首先需要定义图形的基本构建块 (BBB)。 2D 图形函数可以分为两种类别。基本形状 (Basic Shapes): 如线条、矩形、三角形等。自由形状 (Freeform Shapes): 如多边形、路径等。

在绘制任何形状之前，需要理解在 oF 中如何确定对象的位置以及如何解释位置。计算机图形学通常使用笛卡尔坐标系，但在 oF 中使用了具有以下两个不同之处的坐标系：

原点 (Origin) 位于左上角
Y 轴的方向被翻转

创建一个新项目：

创建完新项目后，打开源文件中的 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);

复制代码

Fleeing 三角形笔刷：Vector

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

复制代码

Fleeing 三角形笔刷：Vectors 和旋转