OPEN FRAMEWORKS 101FOR FLASH DEVELOPERS

FITC TORONTO 2012

OverscanSOSO Limited

OverscanSOSO Limited

OverscanSOSO Limited

Scramble SuitKyle McDonald, Arturo Castro + others

NodebeatSeth Sandler + Justin Windle

NodebeatSeth Sandler + Justin Windle

SpellTowerZach Gage

EntrailsLukasz Karluk

EntrailsLukasz Karluk

EntrailsLukasz Karluk

Interactive Wall at University of DaytonFlightphase + HUSH

Van Gogh’s Starry Night Interactiveby Petros Vellis

We are an

Experience Design Studio

SF , NYC , Amsterdam, Cannes, Berlin, Shanghai ...

Intel Cannes

Ballys Results Center

Salesforce Sustainability Table

Open Frameworks is an open source,creative coding platform.

Makes it easy to start c++ More power with less headache

How do I use Open Frameworks ?

A few IDE options:

XCodemac

Code::blocksmac, windows , linux

Visual Studiowindows

Image + Video Utilities

Vector Graphics API

Sound in / out , panning, volume, play speed

Geometry Shader

GLSL Shader Example

Open GL 3D Utilities: Vector Classes , Geometry and Texture Utilities, Camera Control

String utilities, file system access

Core addons include...

XML Manipulation

Servers and Connections - TCP / UDP / OSC

OpenCV Wrapper

3D Model Animation loader

But the real power of Open Frameworks is in the community

Recently, www.ofxAddons.com was created which makes finding these great addons easy !

ofxBullet - Bullet Physics Wrappergithub.com/NickHardemann/ofxBullet

ofxKinect - wrapper for libfreeKinect interfaceofxOpenNI - wrapper for openNI + NITE libraries

openCL - Run C code on the GPU which can be fastergithub.com/MSAOpenCL

Multiple Augmented Reality LibrariesSURF , ARToolkit , Qualcomm

ofxFFT - FFT Sound Waveform Analysis

ofxBerkelium - Wrapper for Berkelium Project browser based off of Chromium

and all of it is open source

Download OF for your platform from :http://www.openframeworks.cc/download/

Copy the OF download to somewhere more permanent.

Everything you do for openFrameworks needs to be within this directory.

You may need to do some initial setup, check http://www.openframeworks.cc/setup/ for details

Your first App !

/examples/EmptyExample is your starting place for any new OF app.

You will not use your IDE’s “new” wizard, the emptyExample app has everything you need.

This will serve as your template to start from a clean slate.

Main.cpp

Sets up the window size and openGL contextRuns application class until quit

The Application Cake.

Ingredients - .h filesInstructions - .cpp files

testApp.h

declaration of class, functions, and variables

testApp.h

implementation of class, functions, and variables

setup ( )

load assetsinitialize valuesinitialize addons or components

update( )

apply force to particlescalculationsincrement video frames

draw ( )

draw shapes/images/videosuse GLSL ShadersApply Blend ModesSave Pixels from screen

Look at the folder 00_basics for class outline

There is no var keyword.

#include is your new import

float = AS3 number

lots of similar of typesstring, int, uint

Functions look a little different, with the return type at the start of the declaration.

Multiple functions can share the same name, as long as they have different input parameters or return types.

Step 1Preprocessor runs through and combines all your code in one giant file. Target the preprocessor with the “#” symbol

Step 2Compiler parses code and make sure there are no errors. Your code is broken down into a lower level language: Assembly.

Step 3The Assembly code is turned into readable code by the computer inside object files.

Step 4The object files are linked together into an executable file.

C++ Compiler - Step 1

Translation with Transformation Matrices

Instead of moving an object on the screen,the entire screen is moved.

Think of it as a global registration point.

Simple Translate

to build off of the current space or to end a local spaceuse:

ofPushMatrix( )

and

ofPopMatrix( )

Simple Translate

Simple Rotation

Simple Scaling

Order Matters

01 Circles

Step 1Draw a circle with a random color

01 Circles

Step 2Create struct ColorPoint, structs are like classes except they cannot have methods.

A Struct is useful for storing grouped data.

Store each color point in a vector<> which operates similar to a dynamically sized array

01 Circles

Step 3Draw screen into Frame Buffer Objects ( FBOs ) FBOs are called with begin() and end() Anything between those functions will be stored and be available for use later.

Mirror vertical / horizontal for kaleidoscope

01 Circles

Step 4 - BONUSPull colors from a color palette.

02 Animator

Step 1 Create a looping sequence of FBOsDraw a circle into wherever the mouse is

02 Animator

Step 2 Scale the circle radius based on mouse speedAnd draw a random color

02 Animator

Step 3 Including an addonWe will use ofxUI to add some sliders to make our animator a little more fun.

Adding addon files to a projectAdding a RGB slider color ranges

03 Particles

Step 1Load an ImageCreate still particles from the raw pixels of the image

03 Particles

Step 2Add the repulse / attract modes to the system

Add particle alpha trails

03 Particles

Step 3Update particles colors from a movie

Loading a movie

Joining the Community !

Introduce yourself at :

http://forum.openframeworks.cc/index.php/board,11.0.html

The OF community is very welcoming.

How to be a good community member ?

Read your IDE’s in depth forum walkthrough it will save you a lot of hassle.

Search the forums for answers before making a post.

Ask questions and post your code.

DO NOT beg for code.

Github

Github is awesome.

Go there. like now and sign up.

github.com

Github

Github is a social coding platform that allows you to host a git repository for free as long as it’s public and open source.

Github has great resources for getting started with githttp://help.github.com/

Github

Github is a great way to move your own files between machines.

It has built in issue tracker and and wiki capabilities.

Great way to collaborate and share code.

Git Quick Tip

.gitignore is a file specific to a repository that allows you to specify what is not tracked by git.

with c++ normally this is excessive IDE generated files, and build files.

Binary files don’t track super well on git because there are no changes to track except files size. but sometimes you need to include them anyway.

Additional Resources

There are now official OF tutorials !http://openframeworks.cc/tutorials

Roxlu has a wonderful collection of slides to explain some of the awesome features of OF 007http://roxlu.com/blog/entry/145/openframeworks-007-presentations

The new version of Programming Interactivity by Joshua Noble is the goto book for OFhttp://programminginteractivity.com/wordpress/

Additional Resources

Unofficial c++ reading listhttp://forum.openframeworks.cc/index.php/topic,9034.msg42670.html

Processing ‘s official site still has the best explanation of core concept I have seenhttp://processing.org/learning/

The OF forums are a treasure trove of discovery and works in progress. Subscribing to the RSS feed will keep you very up to date.http://forum.openframeworks.cc/

Additional Resources

Creative Applications does an amazing job showcasing and collecting installations and other creative apps.

http://www.creativeapplications.net/

Ben McChesneyLead Interaction Designer Helios Interactive

@bendesigning on twitter

benmcchesney.com/blog

github.com/benMcChesney

THANK YOU TORONTO