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

Screens

Creative Coding

Creative Tooling

Processing, OF, Cinder, more?

Hello@scottjanousek

Former Mobile & Device “Veteran”

“Analog and Digital Artisan”

Innovation Architect @ Isobar

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

Kinds of work we do

Custom Touch Table (for Reebok)

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

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

Processing

OpenFrameworks

Cinder

PolyCode

Shockwave

HyperCard

Languages Discussed Today

C++ (most of our focus)

ActionScript

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

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

People to Follow ...

@ben_fry@reas

@blprnt@shiffmanand more ...

processing.org

Java - the language

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

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

Performance is not 100% nativeSome fragmentation on devices

Java is powerful, but legacy

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

Long version cyclesSmaller, niche community

C++ learning curveLack of libraries*

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

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”

Kinect Library

Robert Hodgin’s “Body Dysmorphic Disorder”

Planetary App

Bloom.io - iOS music visualizer app

Targets

Desktop

Mobile - iOS

Slow to release updatesSmaller, niche community

C++ Learning curveLack of libraries

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

Mission Statement

Does Adobe even have one for Flash?Roadmap URL?

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

creative coding across screens

fitc screens

processing wikiwednesday

codingacross screens

fitc mobile

native development kit

computer software

hobbyists whouse processing

target screens desktops

Technology

des 400 creative coding art/science collaboration example

creative coding through games and apps

introduction to creative coding and openframeworks

creative coding with d3.js

processing, 2nd edition: creative coding and generative art...

gibber: abstractions for creative multimedia...

session 1 (creative coding and processing basics)

color to reveal the secret image {creative...

37 facebook screens · 2020. 5. 1. · 37 facebook screens....

creative coding 2 - textvis

product white paper · elite screens inc. |elite screens...

beginning computer programming beginning computer...

lissajous curves: an experiment in creative coding

lecture 01 dsdn142 creative coding

kick off creative coding

creative coding!

live creative coding. intro

processing 2: creative coding hotsh t - packt publishing |...

creative coding 1 - 1 introduction

creative coding art/science collaboration example title