Creative coding, episode 1: openFrameworks

In deze tweedelige reeks gaan we op zoek naar experimentele manieren om jouw creaties te programmeren.

Tussen 13 en 15 juli 2011 vond in ASPACE te Antwerpen een workshop plaats over creative coding met openFrameworks. In dit verslag belicht Dries De Roeck de workshop vanuit het standpunt van iemand die nog nooit van de term ‘creative coding’ heeft gehoord. Geen evidentie, maar hopelijk wel een waardige poging.

openFrameworks, qué?

‘openFrameworks is an open source C++ toolkit for creative coding’, is zowat het enige dat er aan beschrijving op www.openframeworks.cc kan gevonden worden. In hun history wordt er geschreven dat openFrameworks het gemakkelijker maakt om “dingen” te maken via code.

Voor een leek is het vrij onduidelijk wat openFrameworks is, laat staan hoe het te gebruiken en waarvoor. (OpenFrameworks is een C++ library met een aantal voorgedefinieerde functies die je kan gebruiken om interactieve desktop & mobiele toepassingen te bouwen).

openFrameworks aan de hand van een voorbeeld

Om het wat duidelijker te maken, even een voorbeeld.
Stel je wil een toepassing maken waarin je een 3D cubus kan laten ronddraaien, met op elke zijde een foto uit een fotoalbum dat je online hebt staan. Deze toepassing zou kunnen worden gebruikt als screensaver voor een online photosharing bedrijf.

In het verleden zouden veel ontwerpers dit soort van toepassing maken in Flash, waarbij je dit in Action Script perfect zou kunnen programmeren. De problemen die vaak de kop opsteken met Flash en Action Script zijn:

  • Het draait niet op alle devices.
  • Soms is het niet zo performant als gewenst.
  • Het is niet altijd een evidentie om externe databronnen aan te roepen.

Om deze issues te vermijden, is er binnen het online creatieve milieu de laatste jaren een stroming ontstaan die soms gelabeld wordt als ‘creative coding’. Dat komt er op neer dat creatieven -die vroeger steevast tools als de standaard Adobe toolkits gebruikten- nu meer en meer alternatieven hanteren waarmee ze meer mogelijkheden hebben om zaken weer te geven of interacties te ontwerpen.

Het grote verschil met de gekende Adobe pakketten is dat in de ‘creative coding wereld’ computer code wordt geschreven en er amper met een grafische user interface wordt gewerkt. Dat vraagt om een verandering in attitude en werkwijze, wat niet evident is als computer code je vreemd is.

Om terug te komen op het voorbeeld met de cubus. Als je zoiets wil maken zonder een programma zoals Flash begin je vanaf een wit blad waarop je lijnen code begint te schrijven. Dat lukt aardig als je een uitgebreide achtergrond in programmeren hebt en als je weet hoe je dingen kan tonen op een computerscherm vanuit pure code.

Veel mensen kunnen dit niet, en dat is net waar een openFrameworks bij komt kijken. Ik vergelijk het vaak als een soort van ‘canvas’ en ‘assenstelsel’ gedefinieerd in een codeeromgeving.

Als creatieveling komt het er op neer te weten met welke stukjes code je kan tekenen op het assenstelsel. Heel rudimentair gesteld; je klikt niet met de muis op het icoontje van de rechthoek in Flash, maar je typt in je openFrameworks programma : ofRect(x1,y1,w,h), waarbij x1 en y1 het beginpunt van je rechthoek is. W & h zijn respectievelijk de breedte en de hoogte.

openFrameworks voorziet je dus een aantal voorgedefinieerde functies, zoals ofRect, die het programmeren een pak gemakkelijker maken. Deze functies richten zich vooral op grafsiche, geluids- en videogerelateerde zaken. Daarnaast kan je de oneindige mogelijkheden van C++ als programmeertaal gebruiken. Door de voorgedefineerde functies aan elkaar te breien kan je relatief eenvoudig een 3D cubus programmeren. Je kan dan je “mouseX” en “mouseY” coordinaten gebruiken om te interageren met de de cubus, op een gelijkaardige manier dan dat je zoiets in Actionscript zou doen.

Uiteraard is het voorbeeld met de cubus zeer basic … en mogelijks iets waar je openFrameworks niet voor nodig hebt. Maar het geeft wel een beeld van het soort toepassingen je met openFrameworks kan maken. openFrameworks wordt voornamelijk gebruikt om complexe multimedia installaties te maken, dingen die gebruik maken van grafische elementen die real time reageren op video/geluid en dergelijke.

The upside(s) of openFrameworks

  • Snelheid

Gezien openFrameworks een library is die gebruikt wordt in C++ kan je zeer performante dingen maken.  C++ is namelijk niet afhankelijk van programma’s of software zoals een Java Runtime (die wel gebruikt wordt door andere ‘creative coding’ frameworks zoals bvb Processing). Een C++ programma staat met andere woorden alleen waardoor het sneller draait. En sneller is -bijna altijd- beter.

  • Fysieke interactie

Net door de snelheid waarmee openFrameworks kan werken is het mogelijk om zonder al te veel problemen toepassingen te maken met camera vision (blob detection / tracking) of de Microsoft Kinect (3D camera) te gebruiken om real time interacties tussen de fysieke en de digitale wereld te ontwerpen. Gezien je via openFrameworks ook met openGL kan werken wordt het tevens mogelijk complexere dingen te maken in 3D die in realtime kunnen reageren op camerabeelden of andere niet-standaard inputs.

De nadelen van openFrameworks

  • Moeilijk toegankelijk

Het grote nadeel van openFrameworks is dat het zeer moeilijk toegangkelijk is voor iemand die nog nooit een lijn code geschreven heeft, of een zeer beperkte kennis van programmeren heeft. Om er echt alles uit te halen moet je goed vertrouwd zijn met de gebruikte syntax in C++. Je leert dit wel gaandeweg, maar zonder enige voorkennis is het zo goed als onbegonnen werk.

  • Weinig documentatie

Er is weinig documentatie. De bestaande documentatie is zeer beperkt en vrij outdated. Als beginner heb je er heel weinig aan. Gelukkig is er veel informatie terug te vinden op het openFrameworks forum, maar je moet dan wel weten waar je naar op zoek bent.

Getting started & alternatieven

Een prima startpunt om met openFrameworks te starten is de site van Rick Companje, die ook deel was van de workshop begeleiding. Je vindt er tal van voorbeelden. Ga je daar door dan krijg je een beter beeld van de multifunctionele inzetbaarheid van openFrameworks.

Heb je interesse in creative coding, maar is openFrameworks misschien een brug te ver? Probeer dan Processing. Er wordt vaak gezegd dat openFrameworks perfect is voor wanneer je tegen de limitaties van Processing aanbotst. Het gaat voornamelijk over performantie en snelheid. Processing werkt via Java, en is een perfecte omgeving als introductie tot creative coding. Het grote voordeel van Processing is dat de documentatie uitgebreid is en je veel sneller op weg bent.

Bots je op de limitaties van openFrameworks, bekijk dan zeker Cinder. Deze library werkt net zoals openFrameworks in C++, maar is nog performanter.

Genoten van die artikel? Deel het met jouw netwerk!