ProcessingとopenFrameworks
Let's try openFrameworks, comparing features with Processing

YouTubeにアップした動画、「Let's try openFrameworks, comparing features with Processing」の補足説明の記事です。

Here's a little more about the 「Let's try openFrameworks, comparing features with Processing」 video I uploaded to YouTube.

Processingと比較しながらOpenframeworksを始めてみました。

Let's try Openframeworks, comparing features with Processing.

Windows10でVisual Studio 2017を使って動かしていきたいと思います。

We'll be running openframeworks with Visual Studio 2017 on Windows 10.

まずはOpenframeworksのサイトからVisual Studio 2017用のプロジェクトフォルダをダウンロードします。

First, we shold Download the openframeworks project folder for Visual Studio 2017 from the Openframeworks site.

次にVisual Studio 2017用のインストーラーを使って、必要なワークロードとオプションをインストールします。

Then use the installer for Visual Studio 2017 to install the required workloads and options.

準備ができたら先ほどダウンロードしたフォルダの中のProjectGeneratorを使ってopenframeworksのプロジェクトを作成します。

When you are ready, create a project for openframeworks using the ProjectGenerator in the folder you just downloaded.

まずはProcessingのスケッチを作成して、それをopenframeworksで再現してみましょう。

Let's start by creating a Processing sketch and recreating it in openframeworks.

Processingとopenframeworksの違いですが、JavaとC++といった言語的な違いやクラスの作り方やメソッド名など、多少ありますが、殆ど同じです。

The difference between Processing and openframeworks is almost the same, although there are some differences in the languages of Java and C++, how classes are made, and method names.

openframeworksはProcessingと違い、メイン関数でウインドウのサイズを決めています。

openframeworks differs from Processing in that the main function determines the size of the window.

Processing/test.pde

Circle[] circles;
int count;

void setup(){
    size(1920, 1080, P2D);
    count = 600;
    circles = new Circle[count];
    for(int i = 0; i < count; i++){
    circles[i] = new Circle();
    }
}

void draw(){
    //background(0);
    fill(0,60);
    rect(0,0,width,height);
    for(Circle c : circles){
    c.update();
    c.display();
    }
}
class Circle{
    float cx,cy,xacc,yacc,d;
    color c;
    Circle(){ 
    }
    void update(){
    }
    void display(){
    }
}

openFrameworks/main.cpp

#include "ofMain.h"
#include "ofApp.h"


//========================================================================
int main( ){
    ofSetupOpenGL(1024,768,OF_WINDOW);			// <-------- setup the GL context

    //// this kicks off the running of my app
    //// can be OF_WINDOW or OF_FULLSCREEN
    //// pass in width and height too:
    ofRunApp(new ofApp());
}

openFrameworks/ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    ofBackground(255, 255, 255);

    for (size_t i = 0; i < NBALLSIZE; i++)
    {
        circles[i].init(ofRandom(ofGetWidth()), ofRandom(ofGetHeight()), ofRandom(1,2), ofRandom(1, 3), ofRandom(1, 3));
    }
}

//--------------------------------------------------------------
void ofApp::update(){
    for (size_t i = 0; i < NBALLSIZE; i++)
    {
        circles[i].update();
    }
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofSetColor(0, 0, 0);

    for (size_t i = 0; i < NBALLSIZE; i++)
    {
        circles[i].display();
    }
    ofSetColor(255, 0, 0);
    ofDrawBitmapString(ofToString(ofGetFrameRate()) + "fps", 20, 20)
}
            

openFrameworks/ofApp.h

#pragma once

#include "ofMain.h"
#include "Circle.h"

#define NBALLSIZE 10000

class ofApp : public ofBaseApp{

    public:
        void setup();
        void update();
        void draw();

        void keyPressed(int key);
        void keyReleased(int key);
        void mouseMoved(int x, int y );
        void mouseDragged(int x, int y, int button);
        void mousePressed(int x, int y, int button);
        void mouseReleased(int x, int y, int button);
        void mouseEntered(int x, int y);
        void mouseExited(int x, int y);
        void windowResized(int w, int h);
        void dragEvent(ofDragInfo dragInfo);
        void gotMessage(ofMessage msg);

        Circle circles[NBALLSIZE];
};

openFrameworks/Circle.cpp

#include "Circle.h"

void Circle::init(float _x, float _y, int _eSize, float _xacc, float _yacc) {
    x = _x;
    y = _y;
    eSize = _eSize;
    xacc = _xacc;
    yacc = _yacc;
}

void Circle::update() {
}

void Circle::display() {
}

openFrameworks/Circle.h

#pragma once
#include "ofMain.h"

class Circle {

public:

    void init(float _x, float _y, int _eSize, float _xspeed, float _yspeed);  //初期化メソッド
    void update();  //更新
    void display(); //描画

    float x, y, eSize, xacc, yacc;

private:

};

後はメソッド名の多少の違いを覚えるか、公式リファレンスを見ればすぐにコードが書けるようになります。

Now you can learn some differences in method names or look at the official reference and you'll be able to write openframeworks code right away.

Openframeworks用のコード補完ツールをオンラインからインストールすれば、より書きやすくなります。

Installing the code completion tools for Openframeworks online makes writing code easier.

それではクラスの作り方を比較してみましょう。

Let's compare how class files are made.

[プロジェクト]から[新しい項目の追加]を選んで、[クラスファイル名.h]と[クラスファイル名.cpp]をプロジェクトの[src]フォルダ内に作成します。

Select [Add New Item] from [Project] and create [Class name.h] and [Class name.cpp] in the [src] folder of the project.

ヘッダーファイルのほうに、クラスで使われているメンバ変数やメンバ関数を宣言します。

Declare the member variables and member functions used in the class in the header file.

publicにすればコードの外から自由にこのクラスのメンバ変数やメンバ関数を読み書きすることができます。

If you make a function or variable public, you can read and write member variables or member functions of this class freely from outside the code.

後はCPPファイルのほうに、ヘッダーファイルをインクルードして、メンバ変数やメンバ関数の具体的な数値と処理の内容を記述していきます。

You then include the header file in the CPP file to describe the concrete numeric values and processing of the member variables and functions.

Processingだとクラス内ですべて完結させることができますが、openframeworksだとこのように少し煩わしいです。

Comparing Processing and Openframeworks, Processing can complete all the processing inside Class, but openframeworks, as you can see, is a little annoying.

さらに[ofApp.h]にこのクラス型の変数を宣言して、[ofApp.cpp]のセットアップとドロー関数にProcessingと同じように初期化して、クラスのメソッドをオブジェクトの数だけ実行させます。

Then, you declare a variable of this class type in [ofApp.h], initializes it with the [ofApp.cpp] setup function, like Processing, and uses the draw function to execute an object's method.

ここからはおまけです。

It's a bonus from here.

ProcessingではcreatePImageを使うことでグローエフェクトを再現できますが、OpenframeworksだとofxBlur等のアドオンが必要になります。

Processing can reproduce glow effects with createPImage, but Openframeworks require add-ons like ofxBlur.

ここまで二つを試してみて、Processingを普段使っている人が、Openframeworksに切り替えるメリットがあまり無いように思えます。

Now that I've tried both, In my opinion, if you're a regular user of Processing, you don't see much benefit from switching to Openframeworks.

さらにおまけです。

There's one more bonus.

GLSLというGPUに直接命令して、画面に色や形などを描画できる言語を、ProcessingとOpenframeworksから呼び出せる方法をお見せします。

GLSL is a language that directly commands the GPU to draw colors, shapes, and so on on the screen. I'll show you how to call it from Processing and Openframeworks.

GLSLSandboxというサイトで色々な作品がGLSLコードと共に公開されています。

GLSLSandbox is a very useful website where you can find various works that use GLSL code.

今回はこの中から適当に選んだ作品を使わせて頂きました。

This time, I used a work that I randomly selected from these.

Processingから呼び出す場合は、まずスケッチがあるフォルダと同じ階層に[data]というフォルダを作り、その中にGLSLファイルを作成しておきます。

To call it from Processing, first create a folder called [data] at the same level as the folder containing the sketches, and then create a GLSL file in it.

そして、PShader型の変数を定義した後、loadShaderメソッドを使ってGLSLファイルを読み込み、PShader型のオブジェクトを作成します。

After defining a variable of type PShader, use the loadShader method to load the GLSL file and create an object of type PShader.

あとはsetメソッドとloadメソッドを使用すれば画面にGLSLコードを再現することができます。

You can then use the set and load methods to reproduce the GLSL code on the screen.

型にuniformと名づけられている変数は外部のコードから呼び出して設定することができます。

Variables of the type named uniform can be set by calling them from outside code.

sizeメソッドに[P2D]か[P3D]と付け加えることを忘れずに。

Remember to add [P2D] or [P3D] to the size method.

Openframeworksも同じ作業の流れになります。

Openframeworks is the same workflow.

[data]フォルダ内にGLSLファイルを作成して、[ofApp]内で必要なメソッドを使ってGLSLコードを呼び出します。

Create a GLSL file in the [data] folder and call the GLSL code using the required methods in [ofApp].

マウスを使って簡単なGLSLコードを作成して遊んでみましょう。

Let's play with some simple GLSL code using the mouse.

以上です。お疲れ様です。

That's all. Thank you for your hard work.

色々と詰め込んでしまいましたが、これで多少ProcessingとOpenframeworksの違いが理解できたのではないでしょうか。

I've crammed a lot of methods into you, but I hope this helps you understand some of the differences between Processing and Openframeworks.

See You Next Page!