1. Getting Started

GETTING STARTED

Information about downloading and installing openFrameworks, instructions of how to create a new project can be found here.

INSPIRATIONAL EXAMPLES

Before jumping into what OF is and how it works, let's get some inspiration about why you might be using it by exploring works and projects created with OF.

- openFrameworks on the Creative Applications Network

- openFrameworks examples on Vimeo

- openFrameworks on DevArt

- Insta #openFrameworks(>21k posts)

- openFrameworks Facebook page, openFrameworks Facebook community, OpenFrameworks Facebook group

- Cool trivia: the Globe4D project mentioned on the openFrameworks Wikipedia page was first created as a Media Tech project, then turned into a company

- Previous year openFrameworks projects ('lab 2' in the portfolios) in 2. Past NMNT Editions

What are some of the projects you like most?

EXPLORE WHAT IT CAN DO

Ok, time to try out some of the examples that are shipped with the install. Just navigate to the examples subfolder, open up an example (for xcode, the .xcodeproj file, set the scheme to the app name; for Visual Studio the 'solution' (.sln) file) and build and run it (detailed xcode instructions here; Visual Studio just hit F5, if Visual Studio complains that your project cannot be started, try right clicking on your project in the 'Solution Explorer' and select 'Set as startup project' and then try F5 again).

Try out a couple. What examples did you like most? 

The code is in the src folder, mainly in the ofApp.cpp file and ofApp.h file (more about this later). If you feel lucky, have a go at making small tweaks to an example and see what happens.

Optionally have a browse here to have a look here to learn more about the capabilities of openFrameworks and its extensions ('addOns'):

- check out the How Tos and ofBook

- browse over 2400 (!) addons that are available for openFrameworks

And understand the learning resources that are available:

- a listing of a range of learning resources

- explore tutorials (and some more) and reference documentation (also on the syntax for C++). 

- Reproduce some examples from the OFBook, for example the graphics chapter

- a video series on Youtube (still growing and highly recommendable)

- The Programming Interactivity book by Joshua Noble - recommended for folks new to coding

- https://github.com/benMcChesney/Open-Frameworks-Tutorials

So what does the openFrameworks folder actually contain? Amongst others:

CORE ANATOMY OF AN OPENFRAMEWORKS PROJECT

There are quite some similarities between Processing and openFrameworks, but also some differences. The core logical flow is very similar: first there are some setup activities, and then it will start an endless loop of listening (events such as mouse moves, keyboard presses, sensors, messages), doing some computation to update state, and taking some action (drawing, making some sounds, letting your Kuka robot do a little dance).

In an openFrameworks project directory on your file system, you will typically find following folders and files:

COMPARING PROCESSING AND OPENFRAMEWORKS

So we have seen some similarities between OF and Processing, primarily the idea of a continuous sense-think-act loop. A difference is that OF can be seen as more 'lower level' and less accessible, yet in return it will be performant, can be controlled at a more granular level, can integrate easier with a much wider set of addons, is based on C++ not JAVA, comes with its own IDE, and source code needs to be built and compiled.

So let's compare some source code too. Here is a demo script of simple graphics and control in openFrameworks (ofApp.cpp, left), compared to a Processing script (right) which does the same job. Inspect it to learn more about the similarities as well as differences of programming in these two environments. There are a lot of similarities!

ofApp.cpp versus a Processing sketch

Some of the differences include:

ofApp.h

main.cpp

Source code

More graphical examples can be found in ~/examples/graphics, tutorials on oFs website. Functions in oFs can be found in references.

HELLO GRAPHIC!

Now it is time to create our own app. There are multiple ways to create a project:

Step 1

Put your favorite graphic on your favorite location of the screen.

Sample code

void ofApp::draw(){          ofDrawWhateverYouLike(WhereverYouLikeX, WhereverYouLikeY, YouDecide);

} 

Draw an OfDrawCircle, OfDrawRectangle, OfDrawEllipse or indeed DrawWhateverYouLike, see the reference guide Graphics section for details on how to call these functions and what else is possible, check the examples, and especially check this great Graphics basics chapter in ofBook. Play around!

Nite that in setup(), you can set the background and foreground color:    

ofBackground(0,0,0); 

ofSetColor(255,255,255);

or even shorter in this case

ofBackground(0); 

ofSetColor(255);

Step 2

Make what you draw track the movement of your mouse. 

First, substitute the position coordinates with (mouseX, mouseY) and try this out.  Second, unlike in Processing, OF will refresh the background each time draw() is called, try turning this off by calling ofSetBackgroundAuto(false) in setup(). 

Step 3

Experiment to see what the following functions do: ofBackground, ofFill, ofSetColor, ofDrawBitmapString, getHeight, getWidth. 

Step 4

Make your graphic move towards the mouse at a given speed, as opposed to directly tracking it.

Use global variables (x, y) to represent the position coordinates of your graphic, update their values in update(), remember to make declaration in ofApp.h every time new objects are introduced. Remember the Pacman?

Step 5

React to events. In addition to looping between update() and draw() openFrameworks will listen for events, such as a key being pressed. What other events can you see in ofApp.cpp? 

Implement a function that changes the color of the shape (or some other parameter or action) based on a key that is being pressed. 

Some tips:

They key's ASCII code is being recorded in the key function parameter. To see what number is linked to a particular key you can output this value to the output using  

cerr << "Key pressed:" << key <<  endl;

in the keyPressed function.

To check for particular value you can use the if statement:

if (key == 91) dowhateveryouwanttodo

or

if (key == 91)  {     dowhateveryouwanttodo1;     dowhateveryouwanttodo2; }

Implement another change in mousePressed() and/or mouseReleased(). 

Step 6

Let's introduce some GUI sliders to parameterize graphics - GUI sliders can be very useful for testing parameter settings twice. This is also an opportunity to learn how to use addons. Follow the instructions in this how to. Then use it to parameterize some graphics of your own.

Step 7 

Display an image rather than a shape.

Variables can be more complex objects than an int, double or char.  In this case we are going to use an ofImage object. Make sure that you declare this is a global variable in the header file, for example as ofImage cuddlycat;.  In your setup() function you can then load an image into your variable using the loadImage function, for example cuddlycat.loadImage("lolcat.png");, assuming in your example you have created a 'data' directory where lolcat.png resides. You can put it on some position on the screen using the .drawmethod, for example cuddlycat.draw(100,100).

If you want to play and practice more with graphics, check out the aforementioned Graphics basics chapter in ofBook.

TINKERING WITH AN EXISTING EXAMPLE 

One benefit of working with OF lies in its collaborative environment. There are many open source examples and projects that can be found online that you can learn from and build upon. Also, the examples in the ~/examples folder cover almost all aspects of OF, they are the most convenient tools you can use to start playing with it.  Below is a demo of tinkering with the videoGrabberExample, by changing one parameter or few lines of codes you can realize very unexpected effects.

Exercise:

Step 1

Copy the videoGrabberExample directory from /examples to /apps/MyApps and open this copy. Note that in oFs the changes you made in the source code will be automatically saved when you compile your program.  Reproduce the examples above.

Step 2

Browse through the existing examples, find one that interests you, try to understand at a high level what is happening where, and then ‘glitch’ it. 

Step 3 

Switch computers with your neighbor, tinker with her/his project (but make a copy first).

HELLO OFWORLD

Hello oFWorld is a sequence of examples that step by step become more advanced to introduce more concepts. Walk through the examples to understand how these are structured, and if you have time, try some of these out and try to change them.

WHAT ELSE

If you found that the exercises above aren’t challenging enough, try to build a project that shares features like:

- Always surprise those who interact with your project. Maybe considering taking into account of multiple inputs to create an illusion of ‘randomness’, or having the system evolve with the data from past interactions. 

- Create a social environment to bring people together. An interesting interactive project doesn’t always require frightening complexities of code, think about how to use technology to direct people’s attention to each other again.

- Make the impossible possible. Since computer is capable of ‘materialicing’ all instructions that can be expressed mathematically, try to implement algorithms that describe phenomena beyond human perception, e.g. infinity, multidimensional space, etc.

Here are some examples that share the features mentioned above, please post in the comment area if you found something interesting too. 1, 2, 3, 4

As for the assignment, you can explore more possibilities by playing with more diverse devices, like Arduino, projectors, Kinect, etc.

See the Learning page on the openFrameworks website for how-tos, video series, an OF book, Wiki page and more.

Have fun!