Als de tijd het toelaat, probeer ik op eigen houtje onderzoek te doen naar de vele frameworks die tegenwoordig uitgebouwd en beschikbaar gemaakt worden met als voornaamste doel de creatieve industrie een handje te helpen. Zaken als Processing en openFrameworks zijn hier al meermaals aan bod gekomen, maar de laatste tijd probeer ik vooral zaken uit in Cinder, net als openFrameworks gebaseerd op C++. Om performantie-verschillen op te merken, besloot ik beide frameworks eenzelfde applicatie te laten uitvoeren.

Het moet gezegd worden dat Cinder niet gericht is op de hobbyist, maar eerder op beroepsmatige grafische studio’s die een intensief beroep doen op zulke frameworks. Het is dus ook niet onlogisch dat ik in de komende maanden en jaren eerder toevlucht zoek tot Processing in de eerste plaats, en openFrameworks als volwaardig alternatief. Desondanks blijkt reeds uit vacatures die deze branche betreffen, dat kennis van en inzicht in C++ allesbehalve een nadeel is.

De toepassing waarmee beide frameworks getest worden, is gebaseerd op de tutorial van Cinder. Eerlijkheidshalve moet ik toegeven dat mijn kennis van C++ nog niet voldoende is om applicaties te ontwikkelen die eenvoudig zijn qua opzet, en waarbij op een efficiënte wijze performatie kan getest worden. Concreet bestaat de applicatie uit de creatie van 25000 willekeurige partikels, die bewegen in een willekeurige richting. Reeds van bij programmatie blijkt duidelijk dat Cinder beschikt over een veel uitgebreider arsenaal aan geometrische hulpmiddelen dan Processing: de berekening van een vector volgens de eenheidscirkel is een ingebouwde functie, terwijl men dit bij Processing dient op te lossen met random-waarden.

Zoals ook uit de bijgevoegde vergelijkende filmpjes mag blijken, is Cinder (en dus C++) in dit geval de snelste. Het beeld blijft steeds vloeiend verlopen, terwijl in Processing het beeld de eerste tientallen seconden (tot er om en bij de 10000 partikels zichtbaar blijven) schokkerig verloopt. Desondanks is de code een letterlijke vertaling naar een andere programmeertaal, en is de code in Processing her en der zelfs geoptimaliseerd.

De filmpjes en de onderaan bijgevoegde referentie naar de gebruikte code tonen respectievelijk eerst de toepassing in Processing, en vervolgens in Cinder. Beide tests werden uitgevoerd op eenzelfde computer, waarbij geen andere programma’s werden uitgevoerd (met uitzondering van de applicatie die de schermgebeurtenissen registreert). Het resultaat duidt op de voordelen van C++, hoewel ik Processing blijf aanraden – wat bovendien ook gedaan wordt door de mensen van Cinder – als instap-platform in creative coding.

import processing.opengl.*;

ParticleController mParticleController;

void setup() {
    size(1280, 720, OPENGL);
    frameRate(60);

    smooth();

    fill(255, 255, 255);
    noStroke();

    mParticleController = new ParticleController();
    mParticleController.addParticles(25000);
}

void draw() {
    background(0, 0, 0);

    mParticleController.draw();
}

class ParticleController {
    private ArrayList mParticles;

    ParticleController() {
        this.mParticles = new ArrayList();
    }

    void update() {
        Iterator it = mParticles.iterator();
        while (it.hasNext()) {
            ((Particle) it.next()).update();
        }
    }

    void draw() {
        Iterator it = mParticles.iterator();
        Particle temp;
        while (it.hasNext()) {
            temp = (Particle) it.next();
            temp.draw();
            temp.update();
        }
    }

    void addParticles(int amt) {
        for (int i = 0; i < amt; i++) {
            float x = random(width);
            float y = random(height);
            mParticles.add(new Particle(new PVector(x, y)));
        }
    }
}

class Particle {
    private PVector mLoc;
    private PVector mDir;
    private float mVel;
    private float mRadius;

    Particle(PVector loc) {
        this.mLoc = loc;
        this.mDir = new PVector(random(-1, 1), random(-1, 1));
        this.mVel = random(5.0);
        this.mRadius = 3.0;
    }

    void update() {
        this.mLoc = PVector.add(this.mLoc, PVector.mult(this.mDir, this.mVel));
    }

    void draw() {
        ellipse(mLoc.x, mLoc.y, this.mRadius * 2, this.mRadius * 2);
    }
}

Onderstaande code in C++ (Cinder) omvat niet de noodzakelijke header-bestanden. Desondanks wordt een duidelijk beeld geschapen van de algemene visie, de gelijkenis met bovenstaande code in Java (Processing) en de gelijkaardige object-georienteerde aanpak.

void ParticleApp::prepareSettings( Settings *settings ) {
    settings->setWindowSize( 1280, 720 );
    settings->setFrameRate( 60.0f );
}

void ParticleApp::setup() {
    mParticleController.addParticles( 25000 );
}

void ParticleApp::update() {
    mParticleController.update();
}

void ParticleApp::draw() {
    gl::clear( Color( 0, 0, 0 ), true );

    glDisable( GL_TEXTURE_2D );
    glColor3f( 1, 1, 1 );
    mParticleController.draw();
}

CINDER_APP_BASIC( ParticleApp, RendererGl )

ParticleController::ParticleController() { }

void ParticleController::update() {
    for( list<Particle>::iterator p = mParticles.begin(); p != mParticles.end(); ++p ){
        p->update();
    }
}

void ParticleController::draw() {
    for( list<Particle>::iterator p = mParticles.begin(); p != mParticles.end(); ++p ){
        p->draw();
    }
}

void ParticleController::addParticles( int amt ) {
    for( int i=0; i<amt; i++ ) {
        float x = Rand::randFloat( app::getWindowWidth() );
        float y = Rand::randFloat( app::getWindowHeight() );
        mParticles.push_back( Particle( Vec2f( x, y ) ) );
    }
}

Particle::Particle() { }

Particle::Particle( Vec2f loc ) {
    mLoc    = loc;
    mDir    = Rand::randVec2f();
    mVel    = Rand::randFloat( 5.0f );
    mRadius    = 3.0f;
}

void Particle::update() {
    mLoc += mDir * mVel;
}

void Particle::draw() {
    gl::drawSolidCircle( mLoc, mRadius );
}