Openframworks x Mobile

29
Openframeworks x Mobile 2011.08.20 黃怡靜 Janet Huang @janetyc

description

I gave a talk in coscup 2011. My topic is about using openframeworks in mobile application. :) You can download the demo code from github. https://github.com/janetyc/CosBird

Transcript of Openframworks x Mobile

Page 1: Openframworks x Mobile

Openframeworks x Mobile

2011.08.20黃怡靜

Janet Huang

@janetyc

Page 2: Openframworks x Mobile

why I am here...

Page 3: Openframworks x Mobile

why openframeworks...

Page 4: Openframworks x Mobile

openFrameworks is an open source C++ toolkitfor creative coding.

Page 5: Openframworks x Mobile

Computer Technology “is not a tool;

it is a new material for expression”

Maeda, J. (2004). Creative Code. New York: Thames & Hudson Inc.

Page 6: Openframworks x Mobile

Openframeworks

MediaHardware

Communication

Page 7: Openframworks x Mobile

cross platform

mac iphone windows linux android

Page 8: Openframworks x Mobile

Pros

experimentaleasy to use

interactivity

not completeopen source &

Cons

Page 9: Openframworks x Mobile

rtAudio

openGL

freeType

freeImage

quicktime

graphic

audio input/output

fonts

image input/output

video playing

basic libraries

sequence grabbing

Page 10: Openframworks x Mobile

OF structure

Page 11: Openframworks x Mobile

apps libsaddons

openframeworks

addons examples

OF component

Page 12: Openframworks x Mobile

main.cpp

testApp.cpp

testApp.h

main.mm

testApp.mm

testApp.h

osx app iphone appandroid app

Page 13: Openframworks x Mobile

#pragma once

#include "ofMain.h"#include "ofxiPhone.h"#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {!public:! void setup();! void update();! void draw();! void exit();!! void touchDown(ofTouchEventArgs &touch);! void touchMoved(ofTouchEventArgs &touch);! void touchUp(ofTouchEventArgs &touch);! void touchDoubleTap(ofTouchEventArgs &touch);! void touchCancelled(ofTouchEventArgs &touch);

! void lostFocus();! void gotFocus();! void gotMemoryWarning();! void deviceOrientationChanged(int newOrientation);

};

testApp.h

Page 14: Openframworks x Mobile

#include "testApp.h"

//--------------------------------------------------------------void testApp::setup(){!! // register touch events! ofRegisterTouchEvents(this);!! // initialize the accelerometer! ofxAccelerometer.setup();!! //iPhoneAlerts will be sent to this.! ofxiPhoneAlerts.addListener(this);!! //If you want a landscape oreintation ! //iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);!! ofBackground(127,127,127);}

//--------------------------------------------------------------void testApp::update(){

}

//--------------------------------------------------------------void testApp::draw(){!}

//--------------------------------------------------------------void testApp::exit(){

} testApp.mm

Page 15: Openframworks x Mobile

//--------------------------------------------------------------void testApp::touchDown(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchMoved(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchUp(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchDoubleTap(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::lostFocus(){

}

//--------------------------------------------------------------void testApp::gotFocus(){

}

//--------------------------------------------------------------void testApp::gotMemoryWarning(){

}

//--------------------------------------------------------------void testApp::deviceOrientationChanged(int newOrientation){

}

//--------------------------------------------------------------void testApp::touchCancelled(ofTouchEventArgs& args){

} testApp.mm

touch event

alert engine

Page 16: Openframworks x Mobile

How to start ? 1. create a copy of emptyExample in apps folder 2. rename the folder and .xcodeproj file 3. open the project 4. rename target 5. make sure it builds and runs

Page 17: Openframworks x Mobile

Let’s do it now.

Page 18: Openframworks x Mobile

audio

graphicaccelerometer

touchimage

input output

audio

Page 19: Openframworks x Mobile

audio input

initialBufferSize ! = 512;sampleRate ! ! ! = 44100;drawCounter! ! ! = 0;bufferCounter!! = 0;!buffer!! ! ! = new float[initialBufferSize];memset(buffer, 0, initialBufferSize * sizeof(float));!ofSoundStreamSetup(0, 1, this, sampleRate, initialBufferSize, 4);ofSetFrameRate(60);

testApp.mm

void testApp::audioIn(float * input, int bufferSize, int nChannels){! if( initialBufferSize != bufferSize ){! ! ofLog(OF_LOG_ERROR, "your buffer size was set to %i -

but the stream needs a buffer size of %i", initialBufferSize, bufferSize);! ! return;! }!!! // samples are "interleaved"! for (int i = 0; i < bufferSize; i++){! ! buffer[i] = input[i];! }}

setup()

// 0 output channels,// 1 input channels// 44100 samples per second// 512 samples per buffer// 4 num buffers (latency)

Page 20: Openframworks x Mobile

accelerometer

ofxAccelerometer.getForce().xofxAccelerometer.getForce().yofxAccelerometer.getForce().z

touch event//--------------------------------------------------------------void testApp::touchDown(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchMoved(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchUp(ofTouchEventArgs &touch){

}

//--------------------------------------------------------------void testApp::touchDoubleTap(ofTouchEventArgs &touch){

}

touch.xtouch.y

(0,0)

Page 21: Openframworks x Mobile

audio output

ofSoundPlayer bird_sound;

bird_sound.loadSound("weeee.wav");bird_sound.setVolume(1.0f);bird_sound.setMultiPlay(false);

bird_sound.play();

declaration

setup

play

draw image

ofImage head_img; declaration

setup

playhead_img.draw(x_pos, y_pos, width, height);

head_img.loadImage("bird_cos.png");

Page 22: Openframworks x Mobile

graphics- OpenGL (desktop)- OpenGLES (iphone)

polygonExample

void testApp::draw(){

ofFill();ofSetHexColor(0x3ABEE3);ofCircle(100, 100, 50);

}

50

Page 24: Openframworks x Mobile

fun

sound

interactive

game

Page 25: Openframworks x Mobile

Cos Bird: an interactive sound game

Page 26: Openframworks x Mobile

CosBird

quiet little noisy more noisy angry!

Page 27: Openframworks x Mobile

weeeeeeee

Page 28: Openframworks x Mobile

Live demo