First day of slides for @GAFFTA workshop http://www.gaffta.org/2012/07/24/hacking-the-kinect-with-openframeworks/ Part 1 of the live stream : http://www.youtube.com/watch?v=WXfy8Cuje-0&feature=plcp Part 2 of the live stream : http://www.youtube.com/watch?v=I80FsOlMPj8&feature=plcp

1. OPEN FRAMEWORKS +
KINECT PART 1
@GAFFTA

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

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

4. Overscan
SO SO Limited
http://www.creativeapplications.net/openframeworks/overscan-
openframeworks/

5. Scramble Suit
Kyle McDonald + Arturo Castro + Others
http://www.creativeapplications.net/openframeworks/scramble-suit-face-tracking-
openframeworks/

6. Nodebeat
Justin Windle + Seth Sandler
http://www.creativeapplications.net/iphone/nodebeat-iphone-ipad-
of/

7. Entrails
By Lukasz Karluk
http://www.creativeapplications.net/openframeworks/entrails-
openframeworks/

8. University of Dayton Interactive Wall
By Flight Phase
http://www.creativeapplications.net/openframeworks/interactive-wall-at-ud-openframeworks-
kinect/

9. Starry Night Van Gough Interactive
by Petros Vrellis
http://www.creativeapplications.net/openframeworks/vincent-van-goghs-starry-night-interactive-by-petros-vrellis-
openframeworks/

10. Bloom Skin
by Elttob Tep issey Miyake
http://www.creativeapplications.net/openframeworks/bloom-skin-the-wave-installation-for-elttob-tep-issey-
miyake/

11. Screen Lab #2
Screen Lab + MediaCityUK
http://www.creativeapplications.net/environment/
screenlab-2/

12. CLOUDS Interactive Documentary
James George + Jonathan Minard
http://www.creativeapplications.net/openframeworks/clouds-interactive-documentary-exploring-the-creativity-through-the-lens-of-
code/

13. Mclaren P12 Trailer
Marshmellow Laser Feast
http://www.creativeapplications.net/processing/mclaren-p12-teaser-mclaren-vs-aerodynamics-by-
mlf/

14. Light Form
Mathieu Rivier ( ECAL )
http://www.creativeapplications.net/openframeworks/light-form-interactive-landscape-by-mathieu-rivier-
ecal/

15. Saatchi and Saatchi New Directors Showcase
Marshmellow Laser Feast
http://www.creativeapplications.net/openframeworks/light-form-interactive-landscape-by-mathieu-rivier-
ecal/

16. Paik Times Five
By Flightphase
http://www.creativeapplications.net/openframeworks/light-form-interactive-landscape-by-mathieu-rivier-
ecal/

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

19. Image + Video Utilities

20. Vector Graphics API

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

22. Geometry Shader

23. GLSL Shader Example

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

25. String utilities, file system access

26. Core addons include...

27. XML Manipulation

28. Servers and Connections - TCP / UDP / OSC

29. OpenCV Wrapper

30. 3D Model Animation loader

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

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

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

34. Multiple Augmented Reality Libraries
SURF , ARToolkit , Qualcomm

35. and all of it is open source

39. 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
Literally do this.

42. Recently the community created a project genearator which
makes it easier to get started.

43. You can also include any addons you want from the start to
avoid messing with any compiler settings.

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

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

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

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

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

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

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

51. Look at the folder 00_basics for class outline

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

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

54. 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.
show person staring at a screen stereotypically
monkey at a computer works too
First you write some code. You could do this in your IDE ( xcode )

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

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

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

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

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

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

61. Simple Translate

62. Simple Rotation

63. Simple Scaling

64. Order Matters

66. 01 Circles
Step 1
Draw a circle with a random color where the mouse
cursor is.

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

68. 01 Circles
Step 3
Draw screen into a Frame Buffer Object ( FBOs )
FBOs are called with begin() and end()
Anything between those functions will be stored and
be available for use later.
Mirror the FBO vertical / horizontal for symmetry

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

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

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

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

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

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

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

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

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

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

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

81. Additional Resources
Jeffery Crouse has some really good tutorials and is a
professor
http://www.jeffcrouse.info/teaching/
Creative Applications does an amazing job showcasing
and collecting installations and other creative apps.
http://www.creativeapplications.net/

82. Ben McChesney
Lead Experience Developer
Helios Interactive
@bendesigning on twitter
benmcchesney.com/
benmcchesney.com/blog
github.com/benMcChesney

83. THANK YOU