Creative Coding Across Screens

  • 2,205 views
Uploaded on

Creative Coding Across Screens …

Creative Coding Across Screens

In today’s world of mobile development, there is no shortage of products, tools, and frameworks to create your applications. A question is often what’s best for building creative, interactive, and more visual experiences.

In this session, we’ll take a look at three popular creative frameworks for creating visual experiences across screens, including mobile ones. We’ll look at Cinder: a library for professional quality coding in C++. OpenFrameworks: a cross platform open source toolkit and Processing: an open source programming language and integrated development environment. We'll also look at some newbie platforms like Polycode.

We’ll discuss the power of each of these creative tools, and attendees walk away understanding the strengths and weaknesses of each technology, and how to leverage each in projects that may come their way.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,205
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @scottjanousek #SCREENS, #FITCWednesday, November 16, 11
  • 2. Creating Coding across Screens at FITC Screens taking place Nov 14-15 2011 in lovely TorontoWednesday, November 16, 11
  • 3. Agenda Intro Screens Creative Coding Creative Tooling Processing, OF, Cinder, more? OutroWednesday, November 16, 11
  • 4. INTROWednesday, November 16, 11
  • 5. Hello @scottjanousek Former Mobile & Device “Veteran” “Analog and Digital Artisan” Innovation Architect @ IsobarWednesday, November 16, 11
  • 6. Web Interactive Mobile & Devices Physical ComputingWednesday, November 16, 11
  • 7. Wednesday, November 16, 11
  • 8. FITC MOBILE 2009Wednesday, November 16, 11
  • 9. Recent FITC Events ...Wednesday, November 16, 11
  • 10. FITC Toronto 2011 “Sifteo Cubes” @ Influxis Voodoo LoungeWednesday, November 16, 11
  • 11. Riaunleashed 2011 Physical Computing + AndroidWednesday, November 16, 11
  • 12. Google Android ADK & OAWednesday, November 16, 11
  • 13. Cool stuff you should check out ...Wednesday, November 16, 11
  • 14. Wednesday, November 16, 11
  • 15. Conferences!Wednesday, November 16, 11
  • 16. Wednesday, November 16, 11
  • 17. Wednesday, November 16, 11
  • 18. @seb_ly Creative JS world tour!Wednesday, November 16, 11
  • 19. Wednesday, November 16, 11
  • 20. Wednesday, November 16, 11
  • 21. Wednesday, November 16, 11
  • 22. Wednesday, November 16, 11
  • 23. Wednesday, November 16, 11
  • 24. Wednesday, November 16, 11
  • 25. Wednesday, November 16, 11
  • 26. @blprnt Jer Thorp Processing WorkshopWednesday, November 16, 11
  • 27. WorkWednesday, November 16, 11
  • 28. Kinds of work we do Custom Touch Table (for Reebok)Wednesday, November 16, 11
  • 29. Kinds of work we do Custom Touch Table (for Reebok)Wednesday, November 16, 11
  • 30. Let’s play ... “Weird stuff in Scott’s office!”Wednesday, November 16, 11
  • 31. Research & DevelopmentWednesday, November 16, 11
  • 32. Parametric Speaker Array. :)Wednesday, November 16, 11
  • 33. Robotic Claw!Wednesday, November 16, 11
  • 34. “Lit Plexi”Wednesday, November 16, 11
  • 35. Light Globe “Thingy Ma-Bob”Wednesday, November 16, 11
  • 36. RF-ID, & arduinoWednesday, November 16, 11
  • 37. “Umbilical” Cord for a “project”Wednesday, November 16, 11
  • 38. Other Stuff I’m engaged in ...Wednesday, November 16, 11
  • 39. Makerbot & “Fab”Wednesday, November 16, 11
  • 40. MakerBot!Wednesday, November 16, 11
  • 41. “Spatial & Gestural UI” spaceWednesday, November 16, 11
  • 42. CREATIVE CODINGWednesday, November 16, 11
  • 43. Tools & FrameworksWednesday, November 16, 11
  • 44. SCREENSWednesday, November 16, 11
  • 45. Visual SpectrumWednesday, November 16, 11
  • 46. Target Screens Desktops, Laptops & Netbooks SmartPhones & Pocket Devices Tablets TVs Tables, Kiosks, Billboards Projected DisplaysWednesday, November 16, 11
  • 47. Mobile Impact In my mind, there is no question these are the clear winners ... but what is the “next race”?Wednesday, November 16, 11
  • 48. Some Devices ...Wednesday, November 16, 11
  • 49. What’s next with Screens?Wednesday, November 16, 11
  • 50. Projected Light UIWednesday, November 16, 11
  • 51. Projected Light UIWednesday, November 16, 11
  • 52. CREATIVE TOOLINGWednesday, November 16, 11
  • 53. What are we talking about? “... Computer Programs in art such as real life art installations, interactive video, large-scale public projections, computer vision projects, interactive sound recordings, & more ...” OR ... into the realm of ... PHYSICAL COMPUTING.Wednesday, November 16, 11
  • 54. What do we want in our tools? “Performability” Portability Extensibility & more ...Wednesday, November 16, 11
  • 55. Timeline (Rough) PolyCode Cinder 2010 OpenFrameworks 2000’s Processing Flash 1990’s Shockwave HyperCardWednesday, November 16, 11
  • 56. Languages Discussed Today C++ (most of our focus) Java ActionScript Lua JSWednesday, November 16, 11
  • 57. Going Native “A native development kit (NDK) is a software development kit (SDK) based on a native application programming interface (API) which allows computer software to be developed directly on a computing platform, rather than via a virtual machine. Creating software on a virtual machine is often easier than on a native development kit. However, the advantages of using an NDK is that it allows developers more options, and can yield higher performance.”Wednesday, November 16, 11
  • 58. C++ Fast Powerful Strict (& unforgiving) Extendable ReliableWednesday, November 16, 11
  • 59. Wednesday, November 16, 11
  • 60. ProcessingWednesday, November 16, 11
  • 61. Genesis aka (LEFT) Casey Reas and (RIGHT) Ben Fry - The Co-creators of ProcessingWednesday, November 16, 11
  • 62. Mission Statement “Processing is an open source programming language and environment for people who want to create images, animations, and interactions.”Wednesday, November 16, 11
  • 63. Ben updated it ...Wednesday, November 16, 11
  • 64. Why Processing? “Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work.” “Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.”Wednesday, November 16, 11
  • 65. Processing WikiWednesday, November 16, 11
  • 66. Processing 2.0 vimeo.com/28117873Wednesday, November 16, 11
  • 67. People to Follow ... @ben_fry @reas @blprnt @shiffman and more ...Wednesday, November 16, 11
  • 68. processing.orgWednesday, November 16, 11
  • 69. Wednesday, November 16, 11
  • 70. Java - the languageWednesday, November 16, 11
  • 71. FYI Processing 2.0 alpha 3 is recently out! * * As of November 2011Wednesday, November 16, 11
  • 72. EnvironmentWednesday, November 16, 11
  • 73. “Sketch” (i.e. app) void setup() { // define the window size & enable anti-aliasing size(200, 200); smooth(); // Set "ink" color, font, and alignment for rendering text. fill(0); // Black // setup the font (system default sans serif) textFont(createFont("SansSerif",18)); textAlign(CENTER); noLoop(); // draw() executes only once } void draw() { // Draw text to screen using the previously set font. text("Hello World!", width/2, height/2); }Wednesday, November 16, 11
  • 74. ExamplesWednesday, November 16, 11
  • 75. LibrariesWednesday, November 16, 11
  • 76. Generative Art ExperimentsWednesday, November 16, 11
  • 77. Wednesday, November 16, 11
  • 78. Wednesday, November 16, 11
  • 79. Wednesday, November 16, 11
  • 80. Wednesday, November 16, 11
  • 81. Wednesday, November 16, 11
  • 82. Wednesday, November 16, 11
  • 83. Wednesday, November 16, 11
  • 84. Wednesday, November 16, 11
  • 85. Wednesday, November 16, 11
  • 86. Wednesday, November 16, 11
  • 87. Wednesday, November 16, 11
  • 88. Wednesday, November 16, 11
  • 89. Wednesday, November 16, 11
  • 90. Wednesday, November 16, 11
  • 91. Wednesday, November 16, 11
  • 92. Wednesday, November 16, 11
  • 93. Wednesday, November 16, 11
  • 94. Wednesday, November 16, 11
  • 95. Wednesday, November 16, 11
  • 96. Wednesday, November 16, 11
  • 97. Wednesday, November 16, 11
  • 98. Data VisualizationWednesday, November 16, 11
  • 99. Wednesday, November 16, 11
  • 100. Wednesday, November 16, 11
  • 101. Wednesday, November 16, 11
  • 102. Wednesday, November 16, 11
  • 103. Toxilibs “toxiclibs is an independent, open source library ` collection for computational design tasks with Java & Processing developed by Karsten “toxi” Schmidt (thus far).”Wednesday, November 16, 11
  • 104. Toxilibs “The classes are purposefully kept fairly generic in order to maximize re-use in different contexts ranging from generative design, animation, interaction/interface design, data visualization to architecture and digital fabrication, use as teaching tool and more.”Wednesday, November 16, 11
  • 105. TargetsWednesday, November 16, 11
  • 106. DesktopsWednesday, November 16, 11
  • 107. Web - JS ExportWednesday, November 16, 11
  • 108. processing.jsWednesday, November 16, 11
  • 109. Mobile - iProcessingWednesday, November 16, 11
  • 110. Mobile - AndroidWednesday, November 16, 11
  • 111. Mobile Processing Recent EventWednesday, November 16, 11
  • 112. Cons Performance is not 100% native Some fragmentation on devices Java is powerful, but legacyWednesday, November 16, 11
  • 113. Pros Simple to install & run Simple, yet powerful language Nice learning curve Decent libraries Fast prototyping!Wednesday, November 16, 11
  • 114. Future? Processing is a multi-versatile tool Community driven 2.03a brings power & > targets Stellar tool for data viz!Wednesday, November 16, 11
  • 115. Wednesday, November 16, 11
  • 116. openframeworks.ccWednesday, November 16, 11
  • 117. Mission StatementWednesday, November 16, 11
  • 118. Some of the OF Dev “Crew”Wednesday, November 16, 11
  • 119. OF “GANG SIGN”Wednesday, November 16, 11
  • 120. OF ForumsWednesday, November 16, 11
  • 121. “007” releaseWednesday, November 16, 11
  • 122. Dev EnvironmentsWednesday, November 16, 11
  • 123. Code Basics #include "ofMain.h" #include "testApp.h" #include "ofAppGlutWindow.h" //======================================================================== int main( ){ ofAppGlutWindow window; ! ofSetupOpenGL(&window, 1024,768, OF_WINDOW);! ! ! // <-------- setup the GL ! // this kicks off the running of my app ! // can be OF_WINDOW or OF_FULLSCREEN ! // pass in width and height too: ! ofRunApp( new testApp()); }Wednesday, November 16, 11
  • 124. Code Basics #include "testApp.h" void testApp::setup(){} void testApp::update(){} void testApp::draw(){} void testApp::keyPressed(int key){} void testApp::keyReleased(int key){} void testApp::mouseMoved(int x, int y ){} void testApp::mouseDragged(int x, int y, int button){} void testApp::mousePressed(int x, int y, int button){} void testApp::mouseReleased(int x, int y, int button){} void testApp::gotMessage(ofMessage msg){}Wednesday, November 16, 11
  • 125. Code Basics #pragma once #include "ofMain.h" class testApp : public ofBaseApp { ! public: ! ! void setup(); ! ! void update(); ! ! void draw(); ! ! void keyPressed (int key); ! ! void keyReleased(int key); ! ! void mouseMoved(int x, int y ); ! ! void mouseDragged(int x, int y, int button); ! ! void mousePressed(int x, int y, int button); ! ! void mouseReleased(int x, int y, int button); ! ! void windowResized(int w, int h); ! ! void dragEvent(ofDragInfo dragInfo); ! ! void gotMessage(ofMessage msg); };Wednesday, November 16, 11
  • 126. OF APIWednesday, November 16, 11
  • 127. OF Core Objects Application Sound Stream Graphics Math Video Serial Utils Arduino Sound PlayerWednesday, November 16, 11
  • 128. Addons “openFrameworks addons are additional third party libraries that can be added to your projects to extend their functionality.”Wednesday, November 16, 11
  • 129. Provided Addons ofxDirList ofxThread ofxXmlSettings ofxVectorMath ofxOsc ofxVectorGraphics ofxOpenCv ofx3dModelLoader ofxNetworkWednesday, November 16, 11
  • 130. New Addons SiteWednesday, November 16, 11
  • 131. ExamplesWednesday, November 16, 11
  • 132. TargetsWednesday, November 16, 11
  • 133. DesktopWednesday, November 16, 11
  • 134. Mobile - iOSWednesday, November 16, 11
  • 135. Mobile - AndroidWednesday, November 16, 11
  • 136. Face Tracking ExampleWednesday, November 16, 11
  • 137. Cons Long version cycles Smaller, niche community C++ learning curve Lack of libraries* * check out recent site: ofxaddons.comWednesday, November 16, 11
  • 138. Pros Innovative Dev Community Native Performance Audio & Visual Capabilities Computer Vision Physical ComputingWednesday, November 16, 11
  • 139. Future? OF is gaining momentum. OF is prime for Physical Computing.Wednesday, November 16, 11
  • 140. Wednesday, November 16, 11
  • 141. cinderlib.orgWednesday, November 16, 11
  • 142. CinderLib “Cinder is a powerful, intuitive cross-platform toolbox for programming graphics, audio, video, networking, image processing and computational geometry. “Wednesday, November 16, 11
  • 143. Mission Statement “Cinder is a community-developed, free and open source library for professional-quality creative coding in C++.”Wednesday, November 16, 11
  • 144. Support Event Handling, Screensavers, Internet I/O, I/O from flat files, memory, resources, & networks, C++ Core, iOS Support & Multitouch, UI Events, XML Parser and more!Wednesday, November 16, 11
  • 145. ContentsWednesday, November 16, 11
  • 146. EnvironmentsWednesday, November 16, 11
  • 147. Basic CodeWednesday, November 16, 11
  • 148. TinderboxWednesday, November 16, 11
  • 149. ExamplesWednesday, November 16, 11
  • 150. Kinect Library Robert Hodgin’s “Body Dysmorphic Disorder”Wednesday, November 16, 11
  • 151. Kinect Library Robert Hodgin’s “Body Dysmorphic Disorder”Wednesday, November 16, 11
  • 152. Planetary App Bloom.io - iOS music visualizer appWednesday, November 16, 11
  • 153. TargetsWednesday, November 16, 11
  • 154. DesktopWednesday, November 16, 11
  • 155. Mobile - iOSWednesday, November 16, 11
  • 156. Cons Slow to release updates Smaller, niche community C++ Learning curve Lack of librariesWednesday, November 16, 11
  • 157. Pros Innovative Dev Community Native Performance Audio & Visual Capabilities Computer Vision Physical ComputingWednesday, November 16, 11
  • 158. Future? Cinder is still experimental. Last push was Summer 2011. Lots of promise. Hopeful it sticks around!Wednesday, November 16, 11
  • 159. Wednesday, November 16, 11
  • 160. adobe.com/flashWednesday, November 16, 11
  • 161. Mission StatementDoes Adobe even have one for Flash? Roadmap URL? ...Video, 3-D, Games I suppose ...Wednesday, November 16, 11
  • 162. Recent NewsWednesday, November 16, 11
  • 163. ThoughtsWednesday, November 16, 11
  • 164. Thoughts Watch @seb_ly’s “What the Flux?” presoWednesday, November 16, 11
  • 165. Recent Project Custom Touch TableWednesday, November 16, 11
  • 166. Recent Project Custom Touch TableWednesday, November 16, 11
  • 167. EnvironmentWednesday, November 16, 11
  • 168. HYPE FrameworkWednesday, November 16, 11
  • 169. Sample CodeWednesday, November 16, 11
  • 170. TargetsWednesday, November 16, 11
  • 171. DesktopWednesday, November 16, 11
  • 172. Mobile - iOSWednesday, November 16, 11
  • 173. Mobile - AndroidWednesday, November 16, 11
  • 174. Mobile - Blackberry OSWednesday, November 16, 11
  • 175. Cons Too Versatile? Flash Player for Devices Not native performance*. Proprietary Runtimes.Wednesday, November 16, 11
  • 176. Pros Multi-versatile. Cross Platform (on the Desktop). Easy to pick up ActionScript. Fast Prototyping.Wednesday, November 16, 11
  • 177. Future? Parts of Flash are Deprecated. Flash is targeting video, games, 3-D. Adobe is getting back to its roots?Wednesday, November 16, 11
  • 178. Wednesday, November 16, 11
  • 179. polycode.orgWednesday, November 16, 11
  • 180. CreatorWednesday, November 16, 11
  • 181. Basic AppWednesday, November 16, 11
  • 182. Mission Statement “Polycode is a free, open-source, cross-platform framework for creative code. You can use it as a C++ API or as a standalone scripting language to get easy and simple access to accelerated 2D and 3D graphics, hardware shaders, sound and network programming, physics engines and more.”Wednesday, November 16, 11
  • 183. PolyCode “On top of the core C++ API, Polycode offers a Lua- based scripting system with its own set of compilation tools.The Lua API mirrors the C++ API and can be used to easily create prototypes and even publish complete applications to multiple platforms without compiling C+ +. Polycode is completely open-source and available under the MIT license and was designed and developed by Ivan Safrin”Wednesday, November 16, 11
  • 184. Modules 2D/3D Physics and Collision UI Networking LightMaps GLSL CgShading Terrain KinectWednesday, November 16, 11
  • 185. APIWednesday, November 16, 11
  • 186. Basic CodeWednesday, November 16, 11
  • 187. EnvironmentWednesday, November 16, 11
  • 188. ExamplesWednesday, November 16, 11
  • 189. GalleryWednesday, November 16, 11
  • 190. TargetsWednesday, November 16, 11
  • 191. Desktop OnlyWednesday, November 16, 11
  • 192. Cons Fairly New. API limitations. Smaller, niche community. No mobile targets (yet).Wednesday, November 16, 11
  • 193. Pros Native Performance. Easy to get started. Lua or C++. Turning out to be good at 2 & 3D.Wednesday, November 16, 11
  • 194. Future? Polycode is still early in development. Lua is gaining popularity within developer circuit. Alternatives are always good.Wednesday, November 16, 11
  • 195. TAKE AWAYSWednesday, November 16, 11
  • 196. TAKE AWAY #1 “Be passionate about your work, but do not get emotionally attached to your tools ... Tools can, and will be replaced.”Wednesday, November 16, 11
  • 197. TAKE AWAY #2 “Whenever possible, use the right tool for the right job.” “Using a Hammer to screw in a nail doesn’t lead to good results.”Wednesday, November 16, 11
  • 198. TAKE AWAY #3 GO FORTH ... EXPERIMENT AND TINKER! HAVE FUN!Wednesday, November 16, 11
  • 199. OUTROWednesday, November 16, 11
  • 200. ResourcesWednesday, November 16, 11
  • 201. BookWednesday, November 16, 11
  • 202. BookWednesday, November 16, 11
  • 203. PodCast creativecodingpodcast.comWednesday, November 16, 11
  • 204. Q&AWednesday, November 16, 11
  • 205. Thank you.Wednesday, November 16, 11
  • 206. Links www.creativeapplications.net processing.org cinderlib.org openframeworks.cc polycode.org adobe.com/flashWednesday, November 16, 11