openFrameworksからProcessingに書き換えてみる

#openframeworks #programming https://t.co/FwzXyKQ3aK pic.twitter.com/aZjDZge6yU
— junkiyoshi (@junkiyoshi) August 17, 2017

TwitterでTLに流れてきたもので、気になった。これはopenFrameworksというProcessingの思想から影響を受けて開発されたクリエイティブコーディング環境で作られていてC++で書かれている。Processingは気軽に書けて実行しやすいところ、openFrameworksは実行時の速度の点でそれぞれ優位性がある。ある言語から別の言語に書き換えることをポーティングというんだけど、今回はopenFrameworksからProcessingにポーティングしてみる。

ProcessingとopenFrameworksは書き方もある部分すごく似ている。C++で書かれているプログラムのメインの部分はこんな感じのコードだ。Processingを少しやってきた観点から、なんとなく命令が読めるだろうか。

void ofApp::setup(){
    ofSetFrameRate(60);
    ofBackground(0);
    ofSetWindowTitle("Insta");

    ofSetLineWidth(5);
    //ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);
}

//--------------------------------------------------------------
void ofApp::draw(){

    this->cam.begin();

    float angle = 0;

    for (float radius = 10; radius < 300; radius += 15) {
        float tmp_x = 0;
        float tmp_y = 0;

        ofRotateZ(ofGetFrameNum() * 0.25);
        angle += ofGetFrameNum() * 0.25;

        ofColor c;
        c.setHsb(ofMap((int)(angle) % 360, 0, 360, 0, 255), 255, 255);
        ofSetColor(c);

        for (int deg = ofGetFrameNum(); deg < ofGetFrameNum() + 300; deg += 1) {
            float x = radius * cos(deg * DEG_TO_RAD);
            float y = radius * sin(deg * DEG_TO_RAD);

            if (tmp_x != 0 && tmp_y != 0) {
                ofLine(x, y, tmp_x, tmp_y);
            }

            tmp_x = x;
            tmp_y = y;
        }
    }

    this->cam.end();
}

で、今回はこのアルゴリズムを使ってProcessingで同様のことをしてみる。

// setup関数 : 初回1度だけ実行される
void setup() {
  size(960, 540); // ウィンドウサイズを960px,540pxに
  colorMode(HSB, 360, 100, 100); // HSBでの色指定にする
  smooth(); // 描画を滑らかに
}

// draw関数 : setup関数実行後繰り返し実行される
void draw() {
  background(0, 0, 0);
  translate(width/2, height/2);
  float angle = 0;
  float step =15;
  for (float radius = 10; radius < 250; radius += step) {

    rotate(frameCount * 0.005);
    angle += frameCount * 0.25;

    color c = color((angle*0.5)%360, 100, 100);
    stroke(c);
    strokeWeight(step/3);
    noFill();
    arc(0,0,radius*2,radius*2,radians(frameCount),radians(frameCount+90));
    arc(0,0,radius*2,radius*2,radians(frameCount+180),radians(frameCount+270));
  }
}

さらに長い円弧から短い円弧を2つ、同一円周上に配置してみる。

// setup関数 : 初回1度だけ実行される
void setup() {
  size(960, 540); // ウィンドウサイズを960px,540pxに
  colorMode(HSB, 360, 100, 100); // HSBでの色指定にする
  smooth(); // 描画を滑らかに
}

// draw関数 : setup関数実行後繰り返し実行される
void draw() {
  background(0, 0, 0);
  translate(width/2, height/2);
  float angle = 0;
  float step =15;
  for (float radius = 10; radius < 250; radius += step) {

    rotate(frameCount * 0.005);
    angle += frameCount * 0.25;

    color c = color((angle*0.5)%360, 100, 100);
    stroke(c);
    strokeWeight(step/3);
    noFill();
    arc(0,0,radius*2,radius*2,radians(frameCount),radians(frameCount+90));
    arc(0,0,radius*2,radius*2,radians(frameCount+180),radians(frameCount+270));
  }
}