Open frameworks 101_fitc


Published on

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

Published in: Technology, Art & Photos
1 Comment
  • Unfortuantely I couldn't upload all the videos associated with it! But I hope it's useful nonetheless !
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Open frameworks 101_fitc

  2. 2. OverscanSOSO Limited
  3. 3. OverscanSOSO Limited
  4. 4. OverscanSOSO Limited
  5. 5. Scramble SuitKyle McDonald, Arturo Castro + others
  6. 6. NodebeatSeth Sandler + Justin Windle
  7. 7. NodebeatSeth Sandler + Justin Windle
  8. 8. SpellTowerZach Gage
  9. 9. EntrailsLukasz Karluk
  10. 10. EntrailsLukasz Karluk
  11. 11. EntrailsLukasz Karluk
  12. 12. Interactive Wall at University of DaytonFlightphase + HUSH
  13. 13. Van Gogh’s Starry Night Interactiveby Petros Vellis
  14. 14. We are anExperience Design Studio
  15. 15. SF , NYC , Amsterdam, Cannes, Berlin, Shanghai ...
  16. 16. Intel Cannes
  17. 17. Ballys Results Center
  18. 18. Salesforce Sustainability Table
  19. 19. Open Frameworks is an open source,creative coding platform.
  20. 20. Makes it easy to start c++More power with less headache
  21. 21. How do I use Open Frameworks ? A few IDE options: XCode Code::blocks Visual Studio mac mac, windows , linux windows
  22. 22. Image + Video Utilities
  23. 23. Vector Graphics API
  24. 24. Sound in / out , panning, volume, play speed
  25. 25. Geometry Shader
  26. 26. GLSL Shader Example
  27. 27. Open GL 3D Utilities: Vector Classes , Geometry and TextureUtilities, Camera Control
  28. 28. String utilities, file system access
  29. 29. Core addons include...
  30. 30. XML Manipulation
  31. 31. Servers and Connections - TCP / UDP / OSC
  32. 32. OpenCV Wrapper
  33. 33. 3D Model Animation loader
  34. 34. But the real power of Open Frameworks is in the community
  35. 35. Recently, was created whichmakes finding these great addons easy !
  36. 36. ofxBullet - Bullet Physics
  37. 37. ofxKinect - wrapper for libfreeKinect interfaceofxOpenNI - wrapper for openNI + NITE libraries
  38. 38. openCL - Run C code on the GPU which can be
  39. 39. Multiple Augmented Reality LibrariesSURF , ARToolkit , Qualcomm
  40. 40. ofxFFT - FFT Sound Waveform Analysis
  41. 41. ofxBerkelium - Wrapper for Berkelium Projectbrowser based off of Chromium
  42. 42. and all of it is open source
  43. 43. Your first App !Download OF for your platform from : the OF download to somewhere more permanent.Everything you do for openFrameworks needs to be withinthis directory.You may need to do some initial setup, check for details
  44. 44. /examples/EmptyExample is your starting place for any newOF app.You will not use your IDE’s “new” wizard, theemptyExample app has everything you need.This will serve as your template to start from a clean slate.
  45. 45. Main.cppSets up the window size and openGL contextRuns application class until quit
  46. 46. The Application Cake.Ingredients - .h filesInstructions - .cpp files
  47. 47. testApp.hdeclaration of class, functions, and variables
  48. 48. testApp.himplementation of class, functions, and variables
  49. 49. setup ( ) load assets initialize values initialize addons or components
  50. 50. update( ) apply force to particles calculations increment video frames
  51. 51. draw ( ) draw shapes/images/videos use GLSL Shaders Apply Blend Modes Save Pixels from screen
  52. 52. Look at the folder 00_basics for class outline
  53. 53. There is no var keyword.#include is your new importfloat = AS3 numberlots of similar of types string, int, uint
  54. 54. Functions look a little different, with the return type atthe start of the declaration.Multiple functions can share the same name, as long asthey have different input parameters or return types.
  55. 55. C++ Compiler - Step 1Step 1Preprocessor runs through and combines all your code in onegiant file. Target the preprocessor with the “#” symbolStep 2Compiler parses code and make sure there are no errors. Yourcode is broken down into a lower level language: Assembly.Step 3The Assembly code is turned into readable code by thecomputer inside object files.Step 4The object files are linked together into an executable file.
  56. 56. Translation with Transformation MatricesInstead of moving an object on the screen,the entire screen is moved.Think of it as a global registration point.
  57. 57. Simple Translateto build off of the current space or to end a local spaceuse:ofPushMatrix( )andofPopMatrix( )
  58. 58. Simple Translate
  59. 59. Simple Rotation
  60. 60. Simple Scaling
  61. 61. Order Matters
  62. 62. 01 CirclesStep 1 Draw a circle with a random color
  63. 63. 01 CirclesStep 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
  64. 64. 01 CirclesStep 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
  65. 65. 01 CirclesStep 4 - BONUS Pull colors from a color palette.
  66. 66. 02 AnimatorStep 1 Create a looping sequence of FBOs Draw a circle into wherever the mouse is
  67. 67. 02 AnimatorStep 2 Scale the circle radius based on mouse speed And draw a random color
  68. 68. 02 AnimatorStep 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
  69. 69. 03 ParticlesStep 1 Load an Image Create still particles from the raw pixels of the image
  70. 70. 03 ParticlesStep 2 Add the repulse / attract modes to the system Add particle alpha trails
  71. 71. 03 ParticlesStep 3 Update particles colors from a movie Loading a movie
  72. 72. Joining the Community !Introduce yourself at :,11.0.htmlThe OF community is very welcoming.
  73. 73. How to be a good community member ?Read your IDE’s in depth forum walkthrough it willsave 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.
  74. 74. GithubGithub is awesome.Go there. like now and sign
  75. 75. GithubGithub is a social coding platform that allows you tohost a git repository for free as long as it’s public andopen source.Github has great resources for getting started with git
  76. 76. GithubGithub is a great way to move your own files betweenmachines.It has built in issue tracker and and wiki capabilities.Great way to collaborate and share code.
  77. 77. Git Quick Tip.gitignore is a file specific to a repository that allowsyou to specify what is not tracked by git.with c++ normally this is excessive IDE generatedfiles, and build files.Binary files don’t track super well on git because thereare no changes to track except files size. butsometimes you need to include them anyway.
  78. 78. Additional ResourcesThere are now official OF tutorials ! has a wonderful collection of slides to explainsome of the awesome features of OF 007 new version of Programming Interactivity byJoshua Noble is the goto book for OF
  79. 79. Additional ResourcesUnofficial c++ reading list,9034.msg42670.htmlProcessing ‘s official site still has the best explanation ofcore concept I have seen OF forums are a treasure trove of discovery andworks in progress. Subscribing to the RSS feed willkeep you very up to date.
  80. 80. Additional ResourcesCreative Applications does an amazing job showcasingand collecting installations and other creative apps.
  81. 81. Ben McChesneyLead Interaction DesignerHelios Interactive@bendesigning on