Copy of my "Open Frameworks 101 for Flash Developers" at FITC Toronto 2012

1. OPEN FRAMEWORKS 101
FOR FLASH DEVELOPERS
FITC TORONTO 2012

2. Overscan
SOSO Limited

3. Overscan
SOSO Limited

4. Overscan
SOSO Limited

5. Scramble Suit
Kyle McDonald, Arturo Castro + others

6. Nodebeat
Seth Sandler + Justin Windle

7. Nodebeat
Seth Sandler + Justin Windle

8. SpellTower
Zach Gage

9. Entrails
Lukasz Karluk

10. Entrails
Lukasz Karluk

11. Entrails
Lukasz Karluk

12. Interactive Wall at University of Dayton
Flightphase + HUSH

13. Van Gogh’s Starry Night Interactive
by Petros Vellis

16. We are an
Experience Design Studio

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

19. Intel Cannes

20. Ballys Results Center

21. Salesforce Sustainability Table

22. Open Frameworks is an open source,
creative coding platform.

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

24. How do I use Open Frameworks ?
A few IDE options:
XCode Code::blocks Visual Studio
mac mac, windows , linux windows

26. Image + Video Utilities

27. Vector Graphics API

28. Sound in / out , panning, volume, play speed

29. Geometry Shader

30. GLSL Shader Example

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

32. String utilities, file system access

33. Core addons include...

34. XML Manipulation

35. Servers and Connections - TCP / UDP / OSC

36. OpenCV Wrapper

37. 3D Model Animation loader

38. But the real power of Open Frameworks is in the community

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

40. ofxBullet - Bullet Physics Wrapper
github.com/NickHardemann/ofxBullet

41. ofxKinect - wrapper for libfreeKinect interface
ofxOpenNI - wrapper for openNI + NITE libraries

42. openCL - Run C code on the GPU which can be faster
github.com/MSAOpenCL

43. Multiple Augmented Reality Libraries
SURF , ARToolkit , Qualcomm

44. ofxFFT - FFT Sound Waveform Analysis

45. ofxBerkelium - Wrapper for Berkelium Project
browser based off of Chromium

46. and all of it is open source

50. Your first App !
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

53. /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.

54. Main.cpp
Sets up the window size and openGL context
Runs application class until quit

55. The Application Cake.
Ingredients - .h files
Instructions - .cpp files

56. testApp.h
declaration of class, functions, and variables

57. testApp.h
implementation of class, functions, and variables

58. setup ( )
load assets
initialize values
initialize addons or components

59. update( )
apply force to particles
calculations
increment video frames

60. draw ( )
draw shapes/images/videos
use GLSL Shaders
Apply Blend Modes
Save Pixels from screen

61. Look at the folder 00_basics for class outline

62. There is no var keyword.
#include is your new import
float = AS3 number
lots of similar of types
string, int, uint

63. 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.

64. C++ Compiler - Step 1
Step 1
Preprocessor runs through and combines all your code in one
giant file. Target the preprocessor with the “#” symbol
Step 2
Compiler parses code and make sure there are no errors. Your
code is broken down into a lower level language: Assembly.
Step 3
The Assembly code is turned into readable code by the
computer inside object files.
Step 4
The object files are linked together into an executable file.

65. 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.

66. Simple Translate
to build off of the current space or to end a local space
use:
ofPushMatrix( )
and
ofPopMatrix( )

67. Simple Translate

68. Simple Rotation

69. Simple Scaling

70. Order Matters

71. 01 Circles
Step 1
Draw a circle with a random color

72. 01 Circles
Step 2
Create 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

73. 01 Circles
Step 3
Draw 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

74. 01 Circles
Step 4 - BONUS
Pull colors from a color palette.

75. 02 Animator
Step 1
Create a looping sequence of FBOs
Draw a circle into wherever the mouse is

76. 02 Animator
Step 2
Scale the circle radius based on mouse speed
And draw a random color

77. 02 Animator
Step 3
Including an addon
We will use ofxUI to add some sliders to make our
animator a little more fun.
Adding addon files to a project
Adding a RGB slider color ranges

78. 03 Particles
Step 1
Load an Image
Create still particles from the raw pixels of the image

79. 03 Particles
Step 2
Add the repulse / attract modes to the system
Add particle alpha trails

80. 03 Particles
Step 3
Update particles colors from a movie
Loading a movie

81. Joining the Community !
Introduce yourself at :
http://forum.openframeworks.cc/index.php/board,
11.0.html
The OF community is very welcoming.

82. 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.

83. Github
Github is awesome.
Go there. like now and sign up.
github.com

84. 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 git
http://help.github.com/

85. 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.

86. 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.

87. 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 007
http://roxlu.com/blog/entry/145/openframeworks-007-
presentations
The new version of Programming Interactivity by
Joshua Noble is the goto book for OF
http://programminginteractivity.com/wordpress/

88. Additional Resources
Unofficial c++ reading list
http://forum.openframeworks.cc/index.php/topic,
9034.msg42670.html
Processing ‘s official site still has the best explanation of
core concept I have seen
http://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/

89. Additional Resources
Creative Applications does an amazing job showcasing
and collecting installations and other creative apps.
http://www.creativeapplications.net/

90. Ben McChesney
Lead Interaction Designer
Helios Interactive
@bendesigning on twitter
benmcchesney.com/blog
github.com/benMcChesney

91. THANK YOU TORONTO