open frameworks 101_fitc
DESCRIPTION
Copy of my "Open Frameworks 101 for Flash Developers" at FITC Toronto 2012TRANSCRIPT
![Page 1: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/1.jpg)
OPEN FRAMEWORKS 101FOR FLASH DEVELOPERS
FITC TORONTO 2012
![Page 2: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/2.jpg)
OverscanSOSO Limited
![Page 3: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/3.jpg)
OverscanSOSO Limited
![Page 4: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/4.jpg)
OverscanSOSO Limited
![Page 5: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/5.jpg)
Scramble SuitKyle McDonald, Arturo Castro + others
![Page 6: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/6.jpg)
NodebeatSeth Sandler + Justin Windle
![Page 7: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/7.jpg)
NodebeatSeth Sandler + Justin Windle
![Page 8: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/8.jpg)
SpellTowerZach Gage
![Page 9: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/9.jpg)
EntrailsLukasz Karluk
![Page 10: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/10.jpg)
EntrailsLukasz Karluk
![Page 11: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/11.jpg)
EntrailsLukasz Karluk
![Page 12: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/12.jpg)
Interactive Wall at University of DaytonFlightphase + HUSH
![Page 13: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/13.jpg)
Van Gogh’s Starry Night Interactiveby Petros Vellis
![Page 14: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/14.jpg)
![Page 15: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/15.jpg)
![Page 16: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/16.jpg)
We are an
Experience Design Studio
![Page 17: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/17.jpg)
SF , NYC , Amsterdam, Cannes, Berlin, Shanghai ...
![Page 18: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/18.jpg)
![Page 19: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/19.jpg)
Intel Cannes
![Page 20: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/20.jpg)
Ballys Results Center
![Page 21: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/21.jpg)
Salesforce Sustainability Table
![Page 22: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/22.jpg)
Open Frameworks is an open source,creative coding platform.
![Page 23: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/23.jpg)
Makes it easy to start c++ More power with less headache
![Page 24: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/24.jpg)
How do I use Open Frameworks ?
A few IDE options:
XCodemac
Code::blocksmac, windows , linux
Visual Studiowindows
![Page 25: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/25.jpg)
![Page 26: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/26.jpg)
Image + Video Utilities
![Page 27: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/27.jpg)
Vector Graphics API
![Page 28: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/28.jpg)
Sound in / out , panning, volume, play speed
![Page 29: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/29.jpg)
Geometry Shader
![Page 30: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/30.jpg)
GLSL Shader Example
![Page 31: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/31.jpg)
Open GL 3D Utilities: Vector Classes , Geometry and Texture Utilities, Camera Control
![Page 32: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/32.jpg)
String utilities, file system access
![Page 33: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/33.jpg)
Core addons include...
![Page 34: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/34.jpg)
XML Manipulation
![Page 35: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/35.jpg)
Servers and Connections - TCP / UDP / OSC
![Page 36: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/36.jpg)
OpenCV Wrapper
![Page 37: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/37.jpg)
3D Model Animation loader
![Page 38: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/38.jpg)
But the real power of Open Frameworks is in the community
![Page 39: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/39.jpg)
Recently, www.ofxAddons.com was created which makes finding these great addons easy !
![Page 40: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/40.jpg)
ofxBullet - Bullet Physics Wrappergithub.com/NickHardemann/ofxBullet
![Page 41: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/41.jpg)
ofxKinect - wrapper for libfreeKinect interfaceofxOpenNI - wrapper for openNI + NITE libraries
![Page 42: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/42.jpg)
openCL - Run C code on the GPU which can be fastergithub.com/MSAOpenCL
![Page 43: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/43.jpg)
Multiple Augmented Reality LibrariesSURF , ARToolkit , Qualcomm
![Page 44: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/44.jpg)
ofxFFT - FFT Sound Waveform Analysis
![Page 45: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/45.jpg)
ofxBerkelium - Wrapper for Berkelium Project browser based off of Chromium
![Page 46: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/46.jpg)
and all of it is open source
![Page 47: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/47.jpg)
![Page 48: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/48.jpg)
![Page 49: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/49.jpg)
![Page 50: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/50.jpg)
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 !
![Page 51: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/51.jpg)
![Page 52: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/52.jpg)
![Page 53: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/53.jpg)
/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.
![Page 54: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/54.jpg)
Main.cpp
Sets up the window size and openGL contextRuns application class until quit
![Page 55: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/55.jpg)
The Application Cake.
Ingredients - .h filesInstructions - .cpp files
![Page 56: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/56.jpg)
testApp.h
declaration of class, functions, and variables
![Page 57: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/57.jpg)
testApp.h
implementation of class, functions, and variables
![Page 58: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/58.jpg)
setup ( )
load assetsinitialize valuesinitialize addons or components
![Page 59: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/59.jpg)
update( )
apply force to particlescalculationsincrement video frames
![Page 60: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/60.jpg)
draw ( )
draw shapes/images/videosuse GLSL ShadersApply Blend ModesSave Pixels from screen
![Page 61: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/61.jpg)
Look at the folder 00_basics for class outline
![Page 62: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/62.jpg)
There is no var keyword.
#include is your new import
float = AS3 number
lots of similar of typesstring, int, uint
![Page 63: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/63.jpg)
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.
![Page 64: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/64.jpg)
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
![Page 65: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/65.jpg)
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.
![Page 66: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/66.jpg)
Simple Translate
to build off of the current space or to end a local spaceuse:
ofPushMatrix( )
and
ofPopMatrix( )
![Page 67: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/67.jpg)
Simple Translate
![Page 68: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/68.jpg)
Simple Rotation
![Page 69: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/69.jpg)
Simple Scaling
![Page 70: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/70.jpg)
Order Matters
![Page 71: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/71.jpg)
01 Circles
Step 1Draw a circle with a random color
![Page 72: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/72.jpg)
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
![Page 73: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/73.jpg)
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
![Page 74: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/74.jpg)
01 Circles
Step 4 - BONUSPull colors from a color palette.
![Page 75: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/75.jpg)
02 Animator
Step 1 Create a looping sequence of FBOsDraw a circle into wherever the mouse is
![Page 76: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/76.jpg)
02 Animator
Step 2 Scale the circle radius based on mouse speedAnd draw a random color
![Page 77: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/77.jpg)
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
![Page 78: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/78.jpg)
03 Particles
Step 1Load an ImageCreate still particles from the raw pixels of the image
![Page 79: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/79.jpg)
03 Particles
Step 2Add the repulse / attract modes to the system
Add particle alpha trails
![Page 80: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/80.jpg)
03 Particles
Step 3Update particles colors from a movie
Loading a movie
![Page 81: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/81.jpg)
Joining the Community !
Introduce yourself at :
http://forum.openframeworks.cc/index.php/board,11.0.html
The OF community is very welcoming.
![Page 82: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/82.jpg)
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.
![Page 83: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/83.jpg)
Github
Github is awesome.
Go there. like now and sign up.
github.com
![Page 84: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/84.jpg)
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/
![Page 85: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/85.jpg)
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.
![Page 86: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/86.jpg)
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.
![Page 87: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/87.jpg)
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/
![Page 88: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/88.jpg)
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/
![Page 89: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/89.jpg)
Additional Resources
Creative Applications does an amazing job showcasing and collecting installations and other creative apps.
http://www.creativeapplications.net/
![Page 90: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/90.jpg)
Ben McChesneyLead Interaction Designer Helios Interactive
@bendesigning on twitter
benmcchesney.com/blog
github.com/benMcChesney
![Page 91: Open frameworks 101_fitc](https://reader034.vdocuments.us/reader034/viewer/2022052523/55643284d8b42a06138b4dc0/html5/thumbnails/91.jpg)
THANK YOU TORONTO