Music 256a/CS 476a | Fall 2016

Lecture 8: Integrating Better Graphics

Center for Computer Research in Music and Acoustics
Stanford University


Languages, frameworks, IDEs, code style all contribute to an aesthetic.

Whatever you do, do it with aesthetic.

Perry Cook, as told by Ge Wang

Case study

The Warthog, Victoria Grace

OpenFrameworks logo


Download | GitHub | Documentation


Downloading on OSX and Windows is straightforward.

Linux requires compilation. See linux install guide


This worked for me on Ubuntu Linux.

# Clone master OpenFrameworks repo
$ git clone
$ cd openFrameworks
# Get dependencies, codecs, and necessary libs
$ cd scripts/linux/ubuntu
$ sudo ./
$ sudo ./
$ cd ..
$ sudo ./
# Compile openFrameworks
$ ./
# Now clone the ProjectGenerator repo
$ cd ../../apps
$ git clone
# and go back to the linux scripts to build it
$ cd ../scripts/linux/
$ ./

OpenFrameworks & Mac OSX

Almost everything works out-of-the-box.

You need to make a small fix to the Project Generator

Mac OSX Project Generator fix

Locate openFrameworks/export/osx/libs/libfmodex.dylib

Mac OSX Project Generator fix

Copy it

Mac OSX Project Generator fix

Locate your Project Generator app, right click, and click "Show Package Contents."

Mac OSX Project Generator fix

In Contents/Resources/app/ make a new folder ...

Mac OSX Project Generator fix

... called Frameworks

Mac OSX Project Generator fix

Then paste libfmodex.dylib into this directory, and you're done.

The Project Generator

Like the Projucer for JUCE. Creates and modifies OF projects.


There are tons of examples in the OF/examples/* folders.

Great source of ideas and solutions. Build them and check them out!


  • As JUCE has "modules", OpenFrameworks has "Addons".
  • Many more can be downloaded.
  • There are some gems (remember the STK?), but also some old/broken ones out there.
  • To use, simply download an addon and unzip it into your addons folder.
    • Elegant git-clone solution (using ofxFft as an example):
      $ cd $OPENFRAMEWORKS/addons/
      $ git clone
      # That's it!

Further OpenFrameworks reading

Documentation | Learning

Starter code

Planets | Waveform Waterfall

Faust Integration | Audio-controlled Bokeh

Some inspiration


Andrew Lee, Music 256a, Fall 2015


Jack Atherton, Fall 2015

3D Graphics

cat credit


See ofCamera(), ofEasyCam()

NOTE: default camera is different! Coordinate origin is in top left, y points down.


How to map a 3D scene to your 2d screen.

Perspective vs. orthographic projection

See, e.g., ofCamera::setupPerspective()

See, e.g., ofCamera::enableOrtho()

See also:

Viewing frustum | Field of view / angle of view

Utah Teapot

Transformations &
Transformation Matrices

ofPushMatrix(); and ofPopMatrix();


ofRotate() (and ofRotateX(), ofRotateY(), ofRotateZ())

Analogously for color/style: ofPushStyle(); and ofPopStyle();



Parting thoughts

expressiveness > realism

This alone isn't an instrument.

Parting thoughts

Create the minimum viable product.
  • Forces you to clarify your vision and design.
  • Inhibits time-wastage perfecting non-essential elements.

Parting thoughts

Use git *throughout* your development process!

(or whatever other form of version control).

Some git best practices...