bnn_beyondinteraction.pdf

8/17/2019 BNN_BeyondInteraction.pdf

1/307


2/307

Beyond Interaction - PDF edition by Atsushi Tadokoro, Satoru

Higa, Akihiro Kubota, BNN, Inc. is licensed under a Creative

Commons - - 3.0 License.

Beyond Interaction - PDF edition

20121212

20102Beyond Interaction

openFrameworks

PDF

201212openFrameworks v0073

URL

https://github.com/tado/BeyondInteraction

Beyond Interaction

openFrameworks

B5

182mm257mm21mm

304p

680g

T 90.5kg

L T 18.5kg

T

OK B T 71kg


3/307

PDF edition

Beyond Interaction

openFrameworks

2010v0062openFrameworks

201212v0073

3

openFrameworks

openFrameworks

openFramworks

openFrameworks

openFrameworks

openFrameworks

openFrameworks

openFrameworks

!

2012127


4/307

o p e n F r amewo r k s


5/307

Beyond Interaction–

Introductory o openFrameworks

Programming or Media Art

by Atsushi Tadokoro, Satoru Higa, Akihiro Kubota

Copyright © 2010 Atsushi Tadokoro, Satoru Higa, Akihiro Kubota

Published in 2010 by BNN, Inc.

All rights reserved. No part o this publication may be reproduced

or transmitted in any orm or by any means, electronic or

mechanical, including photocopy, recording or any inormation

storage and retrieval system, without prior permission in writing

rom the publisher.


6/307

Beyond Interaction

openFrameworks

openFrameworks

C++

ProcessingFlash

openFrameworks

Beyond Interaction

GUI

generative ,

openFrameworks

openFrameworks

20101


7/307

|

openFrameworks is a toolkit or creative coding

in C++, designed to help artists, hackers, andexperimenters jump in and make sotware with

minimal overhead.

It began in 2004, when I was teaching a group

o graduate students at Parsons School o

Design in New York City, and I wanted to give

them a set o tools, similar to the kinds o tools I

was using as a practicing artist, to make their

work with. I had just started teaching and otherproessors warned me, Art students arent going

to want to learn coding, and definitely not with

C++. However, my students proved them wrong.

Not only were they able to understand and

jump in to the code in a way no one could never

have predicted, they were able to make great,

creative, compelling works.

Since those early days, the openFrameworksteam has grown (we are now three core

openFrameworksC++

openFrameworks2004

C++

openFrameworks3

welcome

Zachary Lieberman openFrameworks


8/307

developers) and the community has grown, but

the roots o openFrameworks - a tool designed

to help beginners get up and running has

always stayed the same.

In addition to teaching and making artwork,

I sometimes eel that I am also working as a

preacher. One thing that I oten preach is that

artistic practice is a orm research, just like the

other sciences. In the way that a company

would have a R&D (research and development)

department, to develop products o the uture,

artistic practice is a orm o R&D or humanity,

imaging possible utures. openFrameworks is

an attempt to take this idea o art making as

laboratory seriously -- we publish our research

in the orm o open source tools. In that way, the

code is /use driven/: we take the things we

learn as we make projects and put them back

into the toolkit to help others make work.

Another idea I preach is DIWO (Do it with

others). There's been a big push recently or

DIY culture (Do it Yoursel ), things like Makemagazine and Instructables. The next step is

doing with others. With openFrameworks, we've

been trying to oster a tight community o

hackers and experimenters, meeting both

online, but also in workshops, inormal

gatherings, and research labs. We've even had

the privilege o teaching several workshops in

Japan, including YCAM (Yamaguchi Center or

Arts and Media) and Kyushu University, eachtime we've been excited by how diverse and

enthusiastic the OF community in Japan is.

The last thing I oten preach is that making art is

not hard, writing sotware, even in C++ is not (that!)

hard, and we should try to have as much un as

possible along the way. It's my sincere hope that

you have un with this book, that you have un with

openFrameworks, and that i you are not already apart o the community, *welcome*.

R&D

R&D

open

Frameworks

use-driven,

1DIWODo It With

Others,Make magazine

InstructablesDIYDo it Yoursel

DIY DIWO

openFrameworks

YCAM

open

Frameworks

C++

openFrameworks

oF


9/307

|

welcome

1 openFrameworks

– openFrameworks

–– openFrameworks


–– glueopenFrameworks


–



–



–– Xcode


–

––

Interview 01The Graffiti Research LabG.R.L.

2 openFrameworks

– openFrameworks

––

–

––

––

––

–– oLine

––

oRect –– oCircleoEllipse


10/307

–– oTriangle

–

––

––

––

––

–

––

––

––

––

–

–– or

––

––

–

––

––

––

–

––

––

––

–

––

––

–

––

––

–

––

––

––

––


11/307

|

–

––

––

––

Interview 02

3 openFrameworks

–


–– openFrameworksC++

––

––

––

–– C++

––

–– UML

–– testApp

–– testAppoBaseApp


–


––

––

–– oSoundStream

–– oSoundStream

–– oSoundPlayer

–– oImage

–– oTrueTypeFont

–– oVideoPlayer

––

oVideoGrabber

– OOOFoF


––

–– 1

––

––

–– 2

––

3 –– 1


12/307

–– 2

–

––

–– 1oxBox2d

–– 2

oxOpenCv

–– oxBox2DoxOpenCv

–

––

––

––

––

––

––

Interview 03

4 openFrameworks

–

–

–

–

TextDesign by Computations

AppendixXcode 298

Index


13/307

|

Mac OS X 10.6Snow LeopardXcode 3.2

openFrameworksMacWindowsLinux

Webhttp://openframeworks.jp/

openFrameworks ver.0.061

Mac OS X 10.6Snow LeopardXcode 3.2

Mac OS X 10.5LeopardXcode 3.1

Windows XP, Windows Vista, Windows 7Visual Studio 2008

XcodeVisual Studio 2008

OSopenFrameworks

URL


14/307

1

openFrameworks

openFrameworks

openFrameworks

openFrameworks


15/307

|

– openFrameworks1


openFrameworks

openFrameworks

openFrameworks

Web

openFrameworks

23

openFrameworks

openFrameworks

openFrameworksMac OS XWindowsLinux

ver.0.061Mac OS XiPhone


16/307

– openFrameworks


openFrameworksZachary LiebermanTheodore Watson

Zachary LiebermanParsons School o Design

C++

C++

Ben FryCasey Reas

Processinghttp://processing.org/Java

openFrameworks

Parsons SchoolTheodore WatsonArturo CastroChirs O'Shea

–– glueopenFrameworks

openFrameworksC++C++

openFrameworks

OpenGL

RtAudioFreeTypeFreeImageQuickTime

openFrameworks

Zachary Liebermanglue

openFrameworks


C++openFrameworksJavaProcessing

Processing

openFrameworks

JavaC++

3D

openFrameworks

openFrameworks


17/307

|

openFrameworks

101,000

10,000

11

openFrameworks


18/307

– openFrameworks


opneFrameworksopenFrameworks

Body PaintMehmet Akten

URL http://www.memo.tv/body_paint

GPU100OpenCL in openFrameworks example

Mehmet Akten

URL http://memo.tv/opencl_in_openrameworks_example_1_milion_particles

– 1


19/307

|

GPU

PCGPU

CPU

100

100

Hand from AboveChris O'Shea

URL http://www.chrisoshea.org/projects/hand-rom-above/

AudienceChris O'Shea

URL http://www.chrisoshea.org/projects/audience/


20/307


21/307

|

The Manual Input Sessions

Tmema (Golan Levin & Zachary Lieberman)

URL http://www.tmema.org/mis/

L.A.S.E.R. TagGraffiti Reserch Lab

URL http://graffitiresearchlab.com/?page_id=76

LASER Tag


22/307

– openFrameworks

EyeWriter, Free Art and Technology (FAT),

openFrameworksGraffiti Reserch Lab

URL http://www.eyewriter.org/

2003ALS

Tony Quanaka TEMPTONETony QuanALS

LEDLights onZachary Lieberman, Joel Gethin

Lewis, Damian Stewart (YesYesNo), Daito Manabe

URL http://openrameworks.ino/project/lights-on/7

Lights on1,085LED

LED

3


23/307

|

Arcs 21Lia

URL http://www.liaworks.com/theprojects/arcs-21-iphone-app/

LiaArcs 21

ProcessingWeb

openFrameworksiPhone

SynthPondZach Gage

URL http://apps.stf.net/synthPond/


24/307

– openFrameworks

SynthPond

Max/

MSPPd

F - void sample

URL http://plaza.bunka.go.jp/estival/2009/art/001217/

URL http://tadahi.com/gw.html

1


25/307

|


openFrameworks

openFrameworksWeb

openFrameworks

URL http://openrameworks.cc

openFrameworksWeb

openFrameworks

openFrameworks

Web

about openFrameworksopenFrameworksFAQ

setup openFrameworks

downloadopenFrameworks

addons addonopenFrameworksaddon

docs openFrameworks

gallery openFrameworks

communityopenFrameworks

forumopenFrameworks

wikiwikiopenFrameworks

openFrameworks

URL http://openrameworks.cc/orum/

openFrameworksorum

openFrameworksopen

Frameworks

openFrameworks


26/307

– openFrameworks

openFrameworks

openFrameworks

openFrameworks

Zachary LiebermanDo It With Others

DIWODIY

Do It Yoursel

openFrameworks

DIWOopenFrameworks

oF Unofficial

URL http://openrameworks.ino/

openFrameworks

Flocking

openFrameworksoxBox2D

openFrameworks.jpURL http://openrameworks.jp/

openFrameworks

openFrameworks

openFrameworksopenFrameworks


27/307

|



Mac OS XWindows

openFrameworksC++open

FrameworksC++

C++

Mac OS XWindows

（IDE）

GUI

1Mac OS XWindows

IDE

Mac OS XXcode

Mac OS XXcodeMac OS X

XcodeMacintoshMac OS X

Mac OS XMac

– 1


28/307

– openFrameworks

Optional Installs

Xcode Tools

XcodeTools.mpkg

Xcode

Xcode

Macintosh HDDeveloperApplications

Xcode.appXcode.app

Dock

WindowsVisual Studio 2008

Express EditionWindows XPWindows VistaWindows 7

Visual Studio 2008Visual Studio

2008

Visual Studio 2008 Express Edition

Visual Studio 2008 Express EditionWeb

Visual Studio Express Edition

URL http://www.microsot.com/japan/msdn/vstudio/express/


29/307

|

Visual Studio Express

Edition

openFrameworksC++

Visual C++

Visual C++Web

Visual C++

Visual Studio 2008 C++ Express

Edition

Microsot Visual C++ 2008 Express

C++


openFrame

worksopenFrameworksOS

FAT

FAT

URL http://www.openrameworks.cc/download


30/307

– openFrameworks

20101pre release v0.061

Mac OS X 10.5LeopardXcode

x-code FAT (10.5)o_preRelease_v0061_osx_FAT.zip

Mac OS X 10.6Snow LeopardXcode

x-code FAT (10.6)o_preRelease_v0061_osxSL_FAT.zip

Windows XPWindows VistaWindows 7Visual C++ 2008

visual studio 2008 FATo_preRelease_v0061_vs2008_FAT.zip

ZIP

Mac OS X

Windows

–– Xcode

Mac OS XXcodeopenFrameworksXcode

XcodeopenFrameworks

Xcode

URL http://www.openrameworks.jp/download

ZIPMac OS X

Mac OS X 10.5Leopardopen

Frameworks Project Template Mac OS 10.5.pkg

10.6Snow Loeaprdopen

Frameworks Project Template Mac OS 10.6.pkg



openFrameworks

addonsopenFrameworks


31/307

|

apps

addonsExamples

examplesopenFrameworks

libs openFrameworksopenFrameworks

other

apps

openFrameworksapps

examplesaddonsExamples

openFrameworksappsmyApps

appsmyApps

of_preRelease_v0061

of_preRelease_v0061

addons

addons

addonsExample

addonsExample

examples

examples

myApps

myApps

apps

apps

libs

libs

other

other


32/307

– openFrameworks

––

openFrameworks

1–3–4 openFrameworks

P.27apps

openFrameworksXcodeXcode

.xcodeprojVisual C++Visual C++

.vcproj

graphicsExampleapps

examplesgraphicsExample

Xcode openFrameworks.xcodeprojVisual C++

graphicsExample.vcproj

Xcode

Visual C++

– 1


33/307

|

graphicsExampleopenFrameworks

openFrameworksDebugQuit

openFrameworksDebug

examples

advancedGraphicsExample

sin

eventsExample

audioInputExample


34/307

– openFrameworks

audioOutputExample

sin

soundPlayerExample

soundPlayerFFTExample

imageLoaderExample

GIFJpegPNG


35/307

|

imageSaverExample

X

PNG

fontsExample

TTF

fontShapesExample

TTF

textureExample


36/307

– openFrameworks

textureScreengrabExample

movieGrabberExample

moviePlayerExample

MOV

openFrameworks

openFrameworks


37/307

|

The Graffiti Research Lab

Evan RothJames Powderly2006

L.A.S.E.R Tag

LEDLED ThrowiesEyewriter

DIY

G.R.L. UtahMike Baca

URL http://graffitiresearchlab.com/

2009.10.31@CREAM2009

Interview 01

The Graiti Research LabG.R.L.


38/307

Interview : The Graffiti Research LabG.R.L.

openFrameworks

Mike BacaM

TheoTheodore Watson

Evan

M

openFrameworks

openFrameworks

M

EvanopenFrameworks

Evan RothE Parsons The New School or

Design ZachZachary Lieberman

openFrameworks

2005

openFrameworks

PrereleaseopenFrameworks

openFrameworks

Prerelease0.04

E

openFrameworks

Zach20

M

openFrameworks

M L.A.S.E.R TagG.R.L.open

Frameworks

openFrameworksGenerative Graffiti

TheoEyebeam

EvanTheo

Theo

E


39/307

|

E

M

TheoZach

openFrameworks

openFrameworks

M

OpenCV

M CV

E

M 2openFrameworks

openFrameworks

Theo

ZachChris Sugrue

C

ChrisZach

Theo

2

1LT/C (One Laser Tag Per Child) openFrameworks

James PowderlyJ 5

5

Atom

openFrameworks

J

PC


40/307

Interview : The Graffiti Research LabG.R.L.

J PC4

J

openFrameworks

J openFrameworks

E

120.5

openFrameworks

E

E

openFrameworks

1,000200

IR Roller

E TheoTheo


41/307

|

ZachopenFrameworks

TheoZach

2openFrameworks

EyewriterZach

6Eyewriter

M EyewriterTony Quan70

90

10

7

Mick Ebeling

MickThe Ebeling

Group

TonyMick

Tony

Tony

Zach

ChrisTheoTony

15

PLAYSTATION Eye

3USB

API

Tony

openFrameworks

EyewriterEmail

Tony

M TTonyTEMPTONE

BNN


42/307

2

openFrameworks

openFrameworks

openFrameworks

openFrameworks


43/307

|

– openFrameworks

––

openFrameworks

Webhttp://openrameworks.jp

1

2


44/307

– openFrameworks

– 2

––

openFrameworks

pixel

1024768

1024768786,432

1

coordinate

222

xyxyx, y

openFrameworks

0, 0x0y

00, 0

x

y

300, 200

300200

x

y

(0,0)

(300,200)


45/307

|

––

openFrameworks

Xcode

Mac OS XopenFrameworks

v0061 ApplicationopenFrameworks

1openFrameworksP.27appsmyApps

TestProject

Testprojectsrc3

3

main.cpp

testApp.h

testApp.cpp


46/307

– openFrameworks

testApp.cpp

testApp.cpp

–_ #include "testApp.h"

void testApp::setup(){

}

void testApp::update(){

}

void testApp::draw(){

}

void testApp::keyPressed(int key){

}

void testApp::keyReleased(int key){

main.cpp

testApp.h

openFrameworks

testApp.cpp


47/307

|

}

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::windowResized(int w, int h){

}

––

LIST 2-2-Avoid testApp::setup( )void testApp::update( )void testApp::draw( )

{ }

unction

1

LIST 2-2_A


48/307

– openFrameworks

3openFrameworks

(1,2,3...) {

}

void


}

testApp::setup

void

testApp::setup

testApp.cpp33openFrameworks

testApp::setup()

setup( )


49/307

|

testApp::update()

update ( )setup( )

update( )draw( )

testApp::draw()

draw( )update( )update( )

draw( )

–– ofLine

testApp.cppdraw( )



}


}


ofLine(100, 300, 800, 500); //

}


}


}

……

draw()update()

setup()


50/307

– openFrameworks

draw( )oLine ( )oLine ( )

openFrameworks

( )

oLine ( )4

ofLine(x,y,x,y);

100,

300800, 500

;

–– ofRect

oRect ( )

oRect4oLine

ofRect(x,y,,);

LIST 2-2_B

(x2,y2)

(x1,y1)


51/307

|

200, 250150200



}


}


ofLine(100, 300, 800, 500); //

ofRect(200, 250, 150, 200); //

}


}


}

……

LIST 2-2_C

width

(x,y)

h e i g h t


52/307

– openFrameworks

–– ― ofCircleofEllipse

2oCircle( )

ofCircle(x,y,);

oEllipse ( )

oEllipse ( )

ofEllipse(x,y,,);

oCircle ( )oEllipse ( )21

450, 30060

550, 500200100


void testApp::setup(){}

(x,y)

(x,y)

width

h e i g h t


53/307

|


}


ofLine(100, 300, 800, 500); //

ofRect(200, 250, 150, 200); //

ofCircle(450, 300, 60); //

ofEllipse(550, 500, 200, 100); //

}


}


}

––

ofTriangle

3

3

6

(x1,y1)

(x2,y2)

(x3,y3)

LIST 2-2_D


54/307

– openFrameworks

ofTriagnle(1x,1y,2x,2y,

3x,3y);

700, 200550, 400750, 3803

-_ #include "testApp.h"


}


}


ofLine(100, 300, 800, 500); //

ofRect(200, 250, 150, 200); //

ofCircle(450, 300, 60); //

ofEllipse(550, 500, 200, 100); //

ofTriangle(700, 200, 550, 400, 750, 380); //

}


}


}

LIST 2-2_E


55/307

|

--

2–2–1 P.41

RedGreenBlue

33

RedGreenBlue

RGB

RGB

RGB3

RGB

CyanMagentaYellow

CMY

CMYK

– 2

RGB CMYK


56/307

– openFrameworks

124

24RGB8

01282

00000000 1111111110

0 2550256

RGB256

16,777,2162563224

R8bit - 00000000 1111111120 25510

G8bit - 00000000 1111111120 25510

B8bit - 00000000 1111111120 25510

24bit224256316,777,216

openFrameworksRGB0 255

--

setup( )oBackground ( )

RGB(Red, Green, Blue)

ofBackGround(R,G,B);

oSetColor ( )oSetColor ( )

RGB

ofSetColor(R,G,B);

R = 31G = 31B = 31

R = 242G = 204B = 47



ofBackground(31, 31, 31); // ofSetColor(242, 204, 47); //


57/307

|

}


}


ofLine(100, 300, 800, 500); //

ofRect(200, 250, 150, 200); //

ofCircle(450, 300, 60); //

ofEllipse(550, 500, 200, 100); //

ofTriangle(700, 200, 550, 400, 750, 380); //

}


}


}

--

oSetColor ( )draw( )

1

LIST 2-3_A


58/307

– openFrameworks



ofBackground(47, 47, 47); //

}


}


ofSetColor(242, 242, 242); //

ofLine(100, 300, 800, 500); //

ofSetColor(242, 204, 47); //

ofRect(200, 250, 150, 200); //

ofSetColor(174, 221, 60); //

ofCircle(450, 300, 60); //

ofSetColor(116, 193, 206); //

ofEllipse(550, 500, 200, 100); //

ofSetColor(211, 24, 24); //

ofTriangle(700, 200, 550, 400, 750, 380); //

}


}


}

LIST 2-3_B


59/307

|

--

RGBoSetColor ( )4

4

RGB0 255

0255

openFrameworks

oEnableAlphaBlending( )

oEnableAlphaBlending ( )




ofEnableAlphaBlending(); //()

}


}


ofSetColor(242, 242, 242, 127); //()

ofLine(100, 300, 800, 500); //

ofSetColor(242, 204, 47, 127); //()

ofRect(200, 250, 200, 300); //

ofSetColor(174, 221, 60, 127); //()

ofCircle(450, 300, 150); // ofSetColor(116, 193, 206, 127); //()

ofEllipse(550, 500, 400, 300); //

ofSetColor(211, 24, 24, 127); //()

ofTriangle(700, 150, 450, 400, 750, 400); //

}


}

void testApp::keyReleased(int key){}


60/307

– openFrameworks

…

…

LIST 2-3_C


61/307

|

--

1024768

+

-

*

/




ofEnableAlphaBlending(); //() ofSetCircleResolution(64); //

– 2


62/307

– openFrameworks

}


}


ofSetColor(31, 127, 255, 127); //

ofCircle(1024/2, 768/2, 100); //

ofCircle(1024/2, 768/2, 100+40); //40

ofCircle(1024/2, 768/2, 100+80); //80

ofCircle(1024/2, 768/2, 100+120); //120

ofCircle(1024/2, 768/2, 100+160); //160

}


}


}

…

…

--

variable

1

LIST 2-4_A


63/307

|

openFrameworks

bool truefalse

true, false

char a, b, 1, #

int

1, 32, -120

float

1.5, 3.14,-24.1542

int x; //

float y; //

bool b; //

=

=

=


64/307

– openFrameworks

int x; //

float y; //

x = 10; // x10

y = x + 0.5 // x0.5yy = 10.5

y = y + 2; // y2 y = 12.5

--

x

xyyradius40




ofEnableAlphaBlending(); //

ofSetColor(31, 127, 255, 127); //

ofSetCircleResolution(64); //

}


}


float x; //x

float y; //y

float radius; //

x = 1024/2; //x y = 768/2; //y

radius = 30; //

radius = radius + 40; //40

ofCircle(x, y, radius); //1





radius = radius + 40; //40 ofCircle(x, y, radius); //4


65/307

|



}


}


}

…

…




ofEnableAlphaBlending(); // ofSetColor(31, 127, 255, 127); //


}


}


float x; //x float y; //y

LIST 2-4_B


66/307

– openFrameworks

float radius; //

x = 1024/2; //x

y = 768/2; //y

radius = 100; //


x = x + 20; //x20

y = y + 30; //y20



x = x + 20; //x20

y = y + 30; //y20



x = x + 20; //x20

y = y + 30; //y20



x = x + 20; //x20

y = y + 30; //y20



}


}


}

…

…

LIST 2-4_C


67/307

|

--

openFrameworks

ofGetWidth()：

ofGetHeight()：





ofSetColor(31, 127, 255, 127); //


}


}


float x; //x

float y; //y

float radius; //

x = ofGetWidth()/2; //x y = ofGetHeight()/2; //y

radius = ofGetWidth()/40; //

x = x + 20; //x20

y = y + 30; //y30



x = x + 20; //x20


68/307

– openFrameworks

y = y + 30; //y30



x = x + 20; //x20

y = y + 30; //y30



x = x + 20; //x20

y = y + 30; //y30



x = x + 20; //x20

y = y + 30; //y30



}


}


}

LIST 2-4_D


69/307

|

-- for

10

1001000

openFrameworksor

or

for(;;){

}

or

ii099100

int i;

for(i = 0; i


70/307

– openFrameworks

or

xy

101

x20

y30

40

x20

y30

40

x20

y30

40

x20

y30

40

or





ofSetColor(31, 127, 255, 127); //


}


71/307

|


}


float x; //x

float y; //y

float radius; //

int i; //for

x = ofGetWidth()/2; //x

y = ofGetHeight()/2; //y

radius = 30; //

//5

for(i=0; i


72/307

– openFrameworks

or

1001000

1/10 12012

550

x 202

y 303

404





ofSetColor(31, 127, 255, 12); //


}


}


float x; //x

float y; //y

float radius; //

int i; //for

x = ofGetWidth()/2; //x

y = ofGetHeight()/2; //y

radius = 30; //

//50

for(i=0; i


73/307

|


}


}

…

…

--

or





}


}


LIST 2-5_B


74/307

– openFrameworks

float x; //x

float y; //y

float w; //

float h; //

int i; //for

w = ofGetWidth()/30.0 + 1; //

h = ofGetHeight()/20.0 + 1; //

x = 0; //x0

y = ofGetHeight()/2 - h/2; //y

//30

for(i=0; i


75/307

|

--

forforfor

-_

#include "testApp.h"




}


}


float x; //x

float y; //y

float w; //

float h; //

int i, j; //for

x = 0; //x0

y = 0; //y0

w = ofGetWidth()/30.0 + 1; //

h = ofGetHeight()/20.0 + 1; //

for(j=0; j


76/307


77/307

|

--

2–4–2 P.591

4xy

float x0;

float x1;

float x2;

float x3;

float y0;

float y1;

float y2;

float y3;

10

100100010000

4

float x[4];

float y[4];

– 2


78/307

– openFrameworks

x[0], x[1], x[2], x[3], y[0], y[1], y[2], y[3]

[ ]

[];

float x[100];

char message[20];

bool cheked[128];

--

oror

30100or

int multi_three[100];

for(int i = 0; i


79/307

|

--

1

6

openFrameworksoRandom ( )

oRandom ( )

ofRandom(,);

xy3

31000

float x[1000]; // x1000

float y[1000]; // y1000

float radius[1000]; // 1000

setup( )oroRandom ( )

xy

draw( )or


80/307

– openFrameworks

x 0（ofGetWidth）

y 0（ofGetHeight）

10 40


float x[1000];

float y[1000];

float radius[1000];


int i;




for(i=0; i < 1000; i++){//1000

x[i] = ofRandom(0, ofGetWidth()); //x

y[i] = ofRandom(0, ofGetHeight()); //y

radius[i] = ofRandom(10, 40); //

}

}


}


int i;

ofSetColor(31, 63, 255, 63); //

for(i=0; i


81/307

|

draw( )


float start_x[1000]; // x

float start_y[1000]; // y

float end_x[1000]; // x

float end_y[1000]; // y


int i;



ofSetLineWidth(2); //

ofEnableSmoothing(); //

for(i=0; i < 1000; i++){ //

start_x[i] = ofRandom(0, ofGetWidth());

start_y[i] = ofRandom(0, ofGetHeight());

end_x[i] = ofRandom(0, ofGetWidth());

end_y[i] = ofRandom(0, ofGetHeight());

}

}


}


LIST 2-6_A


82/307

– openFrameworks

int i;

ofSetColor(31, 127, 255, 63); //

for(i=0; i


83/307

|


for(i=0; i < 768; i++){ //

red[i] = ofRandom(0, 255); //

green[i] = ofRandom(0, 255); //

blue[i] = ofRandom(0, 255); //

}

}


}


int i;

for(i=0; i < 768; i++){ //

ofSetColor(red[i],green[i],blue[i]); //

ofLine(0, i, ofGetWidth(), i); //

}

}


}


}

RGB

LIST 2-6_C


84/307

– openFrameworks


int i;

ofBackground(0, 0, 0);

for(i=0; i < 768; i++){

red[i] = ofRandom(0, 31);

green[i] = ofRandom(63, 127);

blue[i] = ofRandom(127, 255);

}

}


int i; ofBackground(0, 0, 0); //

for(i=0; i < 768; i++){ //




}

}

R0 31 G63 127 B127 255


85/307

|


int i;


for(i=0; i < 768; i++){ //




}

}

R191 255 G127 255 B127 255

R0 31 G31 63 B31 63


86/307

– openFrameworks

--

openFrameworks

1

1

openFrameworks

--

2–2–2 P.42openFrameworks3

– 2


87/307

|

setup()

update()

draw()

3

setup() ―

update()

draw()

openFrameworks

setup()

update()

draw()

31

--

3

setup() 1

xy0, 0update() x3y2

draw()


float loc_x; //x

float loc_y; //y



88/307

– openFrameworks


ofSetFrameRate(60); //60fps


loc_x = 0; //x

loc_y = 0; //y

}


loc_x = loc_x + 3; //x3

loc_y = loc_y + 2; //y2

}


ofSetColor(31, 63, 255); //

ofCircle(loc_x, loc_y, 40); //

}


}


}

LIST 2-7_A


89/307

|

--

2–7–3 P.84

i i

openFrameworks

if(){

} else {

}

– 2


90/307

– openFrameworks

if(){

}

i 4

xloc_x

yloc_y

ofGetWidth()

ofGetHeight()

x = 0;

x = ofGetWidth();

y = 0;

y = ofGetHeight();

1

loc_x > ofGetWidth()

loc_x = 0

0,0

ofGetWidth(),ofGetHeight()


91/307

|

2

loc_x < 0

loc_x = ofGetWidth()

3

loc_y < 0

loc_y = ofGetHeight()

4

loc_y > ofGetHeight()

loc_y = 0

4update ( )


float loc_x; //x

float loc_y; //y



ofSetFrameRate(60); //


loc_x = 20; //x

loc_y = 20; //y

}


loc_x = loc_x + 3; //x3

loc_y = loc_y + 2; //y2

//1

if(loc_x < 0){

loc_x = ofGetWidth();

}

//2

if(loc_x > ofGetWidth()){

loc_x = 0;

}

//3 if(loc_y < 0){


92/307

– openFrameworks

loc_y = ofGetHeight();

}

//4

if(loc_y > ofGetHeight()){

loc_y = 0;

}

}


ofSetColor(31, 63, 255); //


}


}


}

LIST 2-8_A


93/307

|

--

x

y

xy

y

x

3

-3

-22

-1

xloc_x

yloc_y

xspeed_x

yspeed_y


94/307

– openFrameworks

1

loc_x > oGetWidth();

speed_x = speed_x * -1;

2

loc_x < 0;


3

loc_y > oGetHeight();

speed_y = speed_y * -1;

4

loc_y < 0;



float loc_x; //x

float loc_y; //y

float speed_x; //x

float speed_y; //x





loc_x = 20; //x

loc_y = 20; //y

speed_x = 4; //x

speed_y = 7; //y

}


loc_x = loc_x + speed_x; //x

loc_y = loc_y + speed_y; //y

//1

if(loc_x < 0){


} //2


95/307

|

if(loc_x > ofGetWidth()){


}

//3

if(loc_y < 0){


}

//4

if(loc_y > ofGetHeight()){


}

}


ofSetColor(31, 63, 255); //


}


}


}

LIST 2-8_A


96/307

– openFrameworks

--

1

4

x

y

x

y

3

oRandom ( )


float loc_x1; //1x

float loc_y1; //1yfloat speed_x1; //x1

float speed_y1; //x1

float loc_x2; //2x

float loc_y2; //2y

float speed_x2; //x2


float loc_x3; //3xfloat loc_y3; //3y

– 2


97/307

|

float speed_x3; //x3







loc_x1 = ofRandom(0, ofGetWidth()); //1x

loc_y1 = ofRandom(0, ofGetHeight()); //1y

speed_x1 = ofRandom(-10, 10); //x1

speed_y1 = ofRandom(-10, 10); //y1









}


loc_x1 = loc_x1 + speed_x1; //1x

loc_y1 = loc_y1 + speed_y1; //1y

//1

if(loc_x1 < 0){

speed_x1 = speed_x1 * -1;

}

if(loc_x1 > ofGetWidth()){


}

if(loc_y1 < 0){

speed_y1 = speed_y1 * -1;

}

if(loc_y1 > ofGetHeight()){


}



98/307

– openFrameworks


//2

if(loc_x2 < 0){


}



}

if(loc_y2 < 0){


}



}



//3

if(loc_x3 < 0){


}



}

if(loc_y3 < 0){


}



}

}


ofSetColor(31, 63, 255, 127); //

ofCircle(loc_x1, loc_y1, 40); //1



}


}



99/307

|

}

3

100100010000

--

2–5

P.66or

or

4

xoat loc_x[];

yoat loc_y[];

xoat speed_x[];

yoat speed_y[];

#defineNUM

100

LIST 2-9_A


100/307

– openFrameworks

#define NUM 100

#define;

NUM100100


#define NUM 100 //NUM100

float loc_x[NUM]; //x

float loc_y[NUM]; //y

float speed_x[NUM]; //x

float speed_y[NUM]; //y2






//NUM

for(int i = 0; i < NUM; i++){

loc_x[i] = ofRandom(0, ofGetWidth()); //x

loc_y[i] = ofRandom(0, ofGetHeight()); //y

speed_x[i] = ofRandom(-10, 10); //x

speed_y[i] = ofRandom(-10, 10); //y

}

}


//NUM


loc_x[i] = loc_x[i] + speed_x[i]; //x

loc_y[i] = loc_y[i] + speed_y[i]; //y

//

if(loc_x[i] < 0){

speed_x[i] = speed_x[i] * -1;

} if(loc_x[i] > ofGetWidth()){


101/307

|


}

if(loc_y[i] < 0){

speed_y[i] = speed_y[i] * -1;

}

if(loc_y[i] > ofGetHeight()){


}

}

}


ofSetColor(31, 63, 255, 127); //

//NUM


ofCircle(loc_x[i], loc_y[i], 40); //

}

}


}


}

LIST 2-9_B


102/307

– openFrameworks

1001000






float speed_y[NUM]; //y

float radius[NUM]; //






//NUM







}

}


//NUM




//

if(loc_x[i] < 0){


} if(loc_x[i] > ofGetWidth()){


103/307

|


}

if(loc_y[i] < 0){


}



}

}

}


ofSetColor(31, 63, 255, 127); //

//NUM


ofCircle(loc_x[i], loc_y[i], radius[i]); //

}

}


}


}

…

…

LIST 2-9_C


104/307

– openFrameworks

RGB








int red[NUM]; //Red

int green[NUM]; //Green

int blue[NUM]; //Blue






//NUM







red[i] = ofRandom(0, 255); //Red

green[i] = ofRandom(0, 255); //Green

blue[i] = ofRandom(0, 255); //Blue

}

}


//NUM




//

if(loc_x[i] < 0){ speed_x[i] = speed_x[i] * -1;


105/307

|

}

if(loc_x[i] > ofGetWidth()){


}

if(loc_y[i] < 0){


}



}

}

}


//NUM


ofSetColor(red[i], green[i], blue[i], 127); //


}

}


}


}

LIST 2-9_D


106/307

– openFrameworks

--

openFrameworks

2

interaction

openFrameworks

--

mouseXmouseY

xy

mouseXxmouseYy

– 2


107/307

|






}


}


ofSetColor(31, 63, 255); //

ofCircle(mouseX, mouseY, 40); //

}


}


}

…

…

LIST 2-10_A


108/307

– openFrameworks

--

openFrameworks

draw( )

openFrameworks

mouseMoved(int x, int y) xxyy

mouseDrugged(int x, inty) xxyy

mousePressed(int x, int y,int button)

xxyybutton0:1:2:

mouseReleased(int x, inty, int button)

xxyybutton0:1:2:

127, 127, 127

255, 63, 31

31, 63, 255


float loc_x, loc_y;

int red, green, blue;






109/307

|

//

loc_x = ofGetWidth() / 2;

loc_y = ofGetHeight() / 2;

//

red = 31;

green = 63;

blue = 255;

}


}


ofSetColor(red, green, blue); //


}


}


}


//

red = 127;

green = 127;

blue = 127;

}


// loc_x = x;

loc_y = y;

}


//

loc_x = x;

loc_y = y;

// red = 255;


110/307

– openFrameworks

green = 63;

blue = 31;

}


//

red = 31;

green = 63;

blue = 255;

}


}

--

2–9–2 P.96

LIST 2-10_B


111/307

|

1

xy

2

1

P.60

mouse_pressedmouse_pressed = true

mouse_pressed = alse

mousePressed( )mouseReleased( )

update( )

mouse_pressed = true

mouse_pressed = alse




float loc_y[NUM]; //yfloat speed_x[NUM]; //x



int red[NUM]; //Red



bool mouse_pressed; //?

void testApp::setup(){ ofBackground(0, 0, 0); //

A B

1 2 3 4 5...


112/307

– openFrameworks




mouse_pressed = false; //

//NUM










}

}


//NUM


//

if(mouse_pressed){

//

speed_x[i] = (mouseX - loc_x[i]) / 8.0; //xx

1/8

speed_y[i] = (mouseY - loc_y[i]) / 8.0; //yy

1/8

}

loc_x[i] = loc_x[i] + speed_x[i]; //x loc_y[i] = loc_y[i] + speed_y[i]; //y

//

if(loc_x[i] < 0){


}



} if(loc_y[i] < 0){


113/307

|


}



}

}

}


//NUM




}

}


}


}


}


}


mouse_pressed = true; //

}



//




}

}


114/307

– openFrameworks


}

LIST 2-10_C


115/307

|

--

--

gravity

y

– 2


116/307

– openFrameworks

0.0 1.0

1.00.0

xy

xy








int red[NUM]; //Red




float gravity; //

float friction; //



ofSetFrameRate(60); // ofSetCircleResolution(64); //



gravity = 0.1; //

friction = 0.999; //

//NUM


loc_x[i] = ofGetWidth() / 2; //x loc_y[i] = ofGetHeight() / 2; //y


117/307

|







}

}


//NUM


//

if(mouse_pressed){

//

speed_x[i] = (mouseX - loc_x[i]) / 8.0;

//xx1/8

speed_y[i] = (mouseY - loc_y[i]) / 8.0;

}

speed_x[i] = speed_x[i] * friction; //x

speed_y[i] = speed_y[i] * friction; //y

speed_y[i] = speed_y[i] + gravity; //



//

if(loc_x[i] < 0){

loc_x[i] = 0;

speed_x[i] = speed_x[i] * -1.0;

}


loc_x[i] = ofGetWidth();


}

if(loc_y[i] < 0){

loc_y[i] = 0;

speed_y[i] = speed_y[i] * -1.0;

}

if(loc_y[i] > ofGetHeight()){ loc_y[i] = ofGetHeight();


118/307

– openFrameworks


}

}

}


//NUM



ofCircle(loc_x[i], loc_y[i], radius[i]); //1

}

}


}


}


}


}



}



// for(int i = 0; i < NUM; i++){



}

}


}


119/307

|

--

openFrameworks

openFrameworks

oSetBackgroundAuto ( )

ofSetBackgroundAuto(true)

ofSetBackgroundAuto(false)

oSetBackgroundAuto(true)

LIST 2-11_A


120/307

– openFrameworks








int red[NUM]; //Red




float gravity;

float friction;


ofSetBackgroundAuto(false);






gravity = 0.1; //

friction = 0.999;

//NUM


loc_x[i] = ofGetWidth() / 2; //x

loc_y[i] = ofGetHeight() / 2; //y




red[i] = ofRandom(0, 255); //Red green[i] = ofRandom(0, 255); //Green


}

}


//NUM


// if(mouse_pressed){


121/307

|

//

speed_x[i] = (mouseX - loc_x[i]) / 8.0; //x

x1/8

speed_y[i] = (mouseY - loc_y[i]) / 8.0;

}

speed_x[i] = speed_x[i] * friction;

speed_y[i] = speed_y[i] * friction;

speed_y[i] = speed_y[i] + gravity;



//

if(loc_x[i] < 0){

loc_x[i] = 0;


}


loc_x[i] = ofGetWidth();


}

if(loc_y[i] < 0){

loc_y[i] = 0;


}


loc_y[i] = ofGetHeight();


}

}

}


//

ofSetColor(0, 0, 0, 23);

ofRect(0, 0, ofGetWidth(), ofGetHeight());

//NUM



ofCircle(loc_x[i], loc_y[i], radius[i]); //1

}}


122/307

– openFrameworks


}


}


}


}



}



//




}

}


}

LIST 2-11_B


123/307


124/307

– openFrameworks


125/307

|

Interview 02

Daito Manabe

Artist, Coder, Hacker, Sound designer, DJ, VJ

20091Ars

Electronica Center OpeningZachary

LiebermanYesYesNo

DJing

YouTube

100200834nchor5

la6Rhizomatiks

URL http://www.daito.ws/

2009.11.19@4nchor5 la6


126/307

Interview : Daito Manabe

M

Java

PC88MSX

BASIC

SE

50

―

M IAMAS

Max/MSP

Rhizomatiks

― oFopenFrameworks

M Mixi

oFZachZachary Lieberman

― oF

M Processing

OpenCV

Processing

― 200811YCAM

5ZachDIY

Do It Yoursel DIWODo It With Others,

oF

oF

M Nike

oF

HDoF

Max/MSPoF

― Lights

on oFMax/MSP

―

3

Zach

oF

oFOSC


127/307

|

OSC

oF

― 3

M Zach

2

Max

oF

― YCAM

ZachSkype

M

― oF

M MemoOpenCLKyle

McDonald3DPython

― ARiPhone

M 2NikeAR

ARiPhone

iPod touch

R&DiPod

GPS

iPhone

― oF

M

Bodyhack

TEI

tweet

oFp5

Max

pa++ern

RubyC++Max/MSP


128/307


3D

― oF

M C++

Flash

C++

oF

― CBCNEThttp://www.cbc-net.com/dots/daito_

manabe/manabe_01/

Proce55ingopenFrameworksMax/

MSP

M oFMemo

p5Flight404FFT

Alvaro Cassinelli


129/307

|

500

30ps

pa++ern

Wanna be

― openFrameworks

M

―

M 1

8090

―

M

ATARIMSX

PC88X68000

―

M

6DJ

Hiphop

JazzCD

IAMAS

― 1

M

1

―

M Processing

Processing

―

M

― Twitter

M


130/307


M

―

M

―

M

Flying Tokyo

―

M

Web

1

Twitter

Twitter

―

M

BNN


131/307

|


132/307

3

openFrameworks

openFrameworks

openFramewroks

openFrameworks


133/307

|

– 3


2


–– openFrameworksC++

openFrameworksC++

C++openFrameworks

openFrameworksC++

C++1990

C++

C++C

CC++

C++

C++

openFrameworksC++

C++openFrameworks

––


134/307

– openFrameworks

––

211

1234

1

2

3

4


135/307


136/307

– openFrameworks

–– C++

C++

Dog

name

bark

XcodeC++Xcode

Mac OS XApplicationCommand Line Tool

TypeC++ stdc++Xcode 3.1

Mac OS XCommand Line UtilityC++ ToolC++

1234

1 2

3

4

1234

1

2

3

4

1234

1 2

3

4

1234

1

2

3

4

1

3

Xcode 3.2

2


137/307

|

dogdogdog.1main.

cpp3main.cpp

main.cpp #include

int main (int argc, char * const argv[]) {

// insert code here...

std::cout


138/307

– openFrameworks

privatepublic

privatepublic2

private

public

publicprivate

Dog

public

C++

Dog（name）（bark）

#include

using namespace std;

class Dog { // Dog

public:

string name; // ()

void bark(); // ()

}; //Dog (";")

int main (int argc, char * const argv[]) { //}


139/307

|

bark ( )

::(){

//

}

Dogbark ( )

void Dog::bark() { //Dog bark()

}

bark ( )bark ( )

（name）（!）


//

cout


140/307

– openFrameworks

3–1–4

main ( )Doghachi」

public

.

Doghachiname

hachi.name

hachi

#include


class Dog { // Dog

public:

string name; // ()

void bark(); // ()

}; //Dog (";")

void Dog::bark() { //Dog bark() //

cout


141/307

|

bark ( )

( )

.()

bark ( )

–_ #include


class Dog { // Dog

public:

string name; // ()

void bark(); // ()

}; //Dog (";")


//

cout


142/307

– openFrameworks

run

[Switching to process xxxx]

!

...

Debugger stopped.

Program exited with status value:0.

!

––

Dog1

main.cpp

openFrameworks

C++C++

Dog

main.cpp

Xcode

dogSourcecontrol


143/307

|

C and C++C++

FileDog.cpp"Dog.h"

SourceDog.hDog.cpp2

Sourcemain.cpp

Dog.hDog.cpp3

main.cppmain.cpp

Dog.hDog.cpp

–_ #include "Dog.h"

main.cpp

int main (int argc, char * const argv[]) { //

Dog hachi; //Doghachi

hachi.name = ""; //hachiname""

hachi.bark(); //hachibark()

}

Xcode 3.2

Xcode 3.1


144/307

– openFrameworks

Dog.h #include


class Dog { // Dog

public:

string name; // ()

void bark(); // ()

}; //Dog (";")

Dog.cpp #include "Dog.h"


//

cout


145/307

|

:

publicprivate

+public

-private

DogUML

Dog

+ name:string

+ bark():void

–– testApp

C++C++

openFrameworks

Dog3main.cppDog.hDog.cpp

openFrameworksmain.cpptestApp.h

testApp.cpp

main.cpp #include "ofMain.h"

#include "testApp.h"

#include "ofAppGlutWindow.h"

int main(){

ofAppGlutWindow window;

ofSetupOpenGL(&window, 1024,768, OF_WINDOW);

ofRunApp(new testApp());

}

testApp.h #ifndef _TEST_APP

#define _TEST_APP


146/307

– openFrameworks

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

};

#endif

testApp.cpp #include "testApp.h"


}


}


}


}


}


}


}



147/307

|

}


}


}

C++testApp.htestApp.cpp

openFrameworkstestApp

setup( )update ( )draw( )

testApp

testAppDogUML

testApp

+ 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::windowResized(int w, int h):void

2testApptestApp.cpp

testApp.cpppublic

testApp

testApp.h

–– testAppofBaseApp

testAppC++testApp

C++testAppsetup( )

update ( )

C++openFrameworks


148/307

– openFrameworks

testApptestApp.h6

class testApp : public ofBaseApp {

testApp: public oBaseApp

testAppoBaseApp

testAppoBaseApp

1

testAppoBaseAppoBaseApp

openFrameworks

oBaseAppopenFrameworks


main.cpptestApp.hoMain.h

oMain.hopenFrameworks

oMaih.hopenFrameworks

oMain.h

ofMain.h #ifndef OF_MAIN#define OF_MAIN

//--------------------------

// utils

#include "ofConstants.h"

#include "ofMath.h"

#include "ofUtils.h"

#include "ofTypes.h"

//--------------------------


149/307

|

// communication

#ifndef TARGET_OF_IPHONE

#include "ofSerial.h"

#include "ofStandardFirmata.h"

#include "ofArduino.h"

#endif

//--------------------------

// graphics

#include "ofTexture.h"

#include "ofTrueTypeFont.h"

#include "ofGraphics.h"

#include "ofImage.h"

//--------------------------

// app

#include "ofBaseApp.h"

#include "ofAppRunner.h"

//--------------------------

// audio

#include "ofSoundStre

bnn_beyondinteraction.pdf

Documents