creative coding across screens

@scottjanousek#SCREENS, #FITC

Wednesday, November 16, 11

Creating Coding across Screens

at FITC Screens taking placeNov 14-15 2011 in lovely Toronto


Agenda

Intro

Screens

Creative Coding

Creative Tooling

Processing, OF, Cinder, more?

Outro


INTRO


Hello@scottjanousek

Former Mobile & Device “Veteran”

“Analog and Digital Artisan”

Innovation Architect @ Isobar


Web

Interactive

Mobile & Devices

Physical Computing


FITC MOBILE 2009


Recent FITCEvents ...


FITC Toronto 2011

“Sifteo Cubes” @ Influxis Voodoo Lounge


Riaunleashed 2011Physical Computing + Android


Google Android ADK & OA


Cool stuff you should check

out ...


Conferences!


@seb_lyCreative JS world tour!


@blprntJer Thorp

Processing Workshop


Work


Kinds of work we do

Custom Touch Table (for Reebok)


Let’s play ...“Weird stuff in Scott’s office!”


Research &Development


Parametric Speaker Array. :)


Robotic Claw!


“Lit Plexi”


Light Globe “Thingy Ma-Bob”


RF-ID, & arduino


“Umbilical” Cord for a “project”


Other StuffI’m engaged in ...


Makerbot & “Fab”


MakerBot!


“Spatial & Gestural UI” space


CREATIVECODING


Tools & Frameworks


SCREENS


Visual Spectrum


Target Screens

Desktops, Laptops & Netbooks

SmartPhones & Pocket Devices

Tablets

TVs

Tables, Kiosks, Billboards

Projected Displays


Mobile Impact

In my mind, there is no question these are the clear winners ... but what is the “next race”?


Some Devices ...


What’s nextwith Screens?


Projected Light UI


CREATIVE TOOLING


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.


What do we wantin our tools?

“Performability”

Portability

Extensibility

& more ...


Timeline (Rough)

1990’s

2000’s

2010

Processing

OpenFrameworks

Cinder

PolyCode

Flash

Shockwave

HyperCard


Languages Discussed Today

C++ (most of our focus)

Java

ActionScript

Lua

JS


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


http://en.wikipedia.org/wiki/Software_development_kit

http://en.wikipedia.org/wiki/Software_development_kit

http://en.wikipedia.org/wiki/Application_programming_interface

http://en.wikipedia.org/wiki/Application_programming_interface

http://en.wikipedia.org/wiki/Computer_software

http://en.wikipedia.org/wiki/Computer_software

http://en.wikipedia.org/wiki/Computing_platform

http://en.wikipedia.org/wiki/Computing_platform

http://en.wikipedia.org/wiki/Virtual_machine

http://en.wikipedia.org/wiki/Virtual_machine

C++

Fast

Powerful

Strict (& unforgiving)

Extendable

Reliable


Processing


Genesis

aka (LEFT) Casey Reas and (RIGHT) Ben Fry -The Co-creators of Processing


“Processing is an open source programming language and environment for people who want to create images, animations, and interactions.”

Mission Statement


Ben updated it ...


“Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.”

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


Processing Wiki


vimeo.com/28117873

Processing 2.0


http://vimeo.com/28117873




People to Follow ...

@ben_fry@reas

@blprnt@shiffmanand more ...


processing.org


Java - the language


FYI

Processing 2.0 alpha 3 is recently out! *

* As of November 2011


Environment


“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);}


Examples


Libraries


Generative Art Experiments


Data Visualization


`

Toxilibs

“toxiclibs is an independent, open source library collection for computational design tasks with Java & Processing developed by Karsten “toxi” Schmidt (thus far).”


http://processing.org/

http://processing.org/

http://postspectacular.com/

http://postspectacular.com/

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


Targets


Desktops


Web - JS Export


processing.js


Mobile - iProcessing


Mobile - Android


Mobile ProcessingRecent Event


Cons

Performance is not 100% nativeSome fragmentation on devices

Java is powerful, but legacy


Pros

Simple to install & runSimple, yet powerful language

Nice learning curveDecent librariesFast prototyping!


Future?

Processing is a multi-versatile tool Community driven

2.03a brings power & > targetsStellar tool for data viz!


openframeworks.cc


Mission Statement


Some of the OF Dev “Crew”


OF “GANG SIGN”


OF Forums


“007” release


Dev Environments


Code Basics

#include "ofMain.h"#include "testApp.h"#include "ofAppGlutWindow.h"

//========================================================================int main( ){

ofAppGlutWindow window;! ofSetupOpenGL(&window, 1024,768, OF_WINDOW);! ! ! // <-------- setup the GL context

! // this kicks off the running of my app! // can be OF_WINDOW or OF_FULLSCREEN! // pass in width and height too:! ofRunApp( new testApp());

}


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){}


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);};


OF API


OF Core Objects

ApplicationGraphicsVideoUtilsSound Player

Sound StreamMathSerialArduino


Addons

“openFrameworks addons are additional third party libraries that can be added to your projects to extend their functionality.”


Provided Addons

ofxDirListofxXmlSettingsofxOscofxOpenCvofxNetwork

ofxThreadofxVectorMathofxVectorGraphicsofx3dModelLoader


New Addons Site


Examples


Targets


Desktop


Mobile - iOS


Mobile - Android


Face Tracking Example


Cons

Long version cyclesSmaller, niche community

C++ learning curveLack of libraries*

* check out recent site: ofxaddons.comWednesday, November 16, 11

Pros

Innovative Dev CommunityNative Performance

Audio & Visual CapabilitiesComputer Vision

Physical Computing


Future?

OF is gaining momentum. OF is prime for Physical Computing.


cinderlib.org


“Cinder is a powerful, intuitive cross-platform toolbox for programming graphics, audio, video, networking, image processing and computational geometry. “

CinderLib


“Cinder is a community-developed, free and open source library for professional-quality creative coding in C++.”

Mission Statement


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!

Support


Contents


Environments


Basic Code


Tinderbox


Examples


Kinect Library

Robert Hodgin’s “Body Dysmorphic Disorder”


http://creativecodingpodcast.com


Planetary App

Bloom.io - iOS music visualizer app




Targets


Desktop


Mobile - iOS


Cons

Slow to release updatesSmaller, niche community

C++ Learning curveLack of libraries


Pros

Innovative Dev CommunityNative Performance

Audio & Visual CapabilitiesComputer Vision

Physical Computing


Cinder is still experimental. Last push was Summer 2011.

Lots of promise. Hopeful it sticks around!

Future?


adobe.com/flash


http://www.adobe.com/flash

http://www.adobe.com/flash

Mission Statement

Does Adobe even have one for Flash?Roadmap URL?

... Video, 3-D, Games I suppose ...


creative coding across screens

Technology

fitc screens

processing wikiwednesday

codingacross screens

fitc mobile

native development kit

computer software

hobbyists whouse processing

target screens desktops