Coma studyroom

1,427 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,427
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Coma studyroom

  1. 1. coma Study Room 1
  2. 2. TimeTabel 18:00-19:30 19:30-20:30 20:30-21:30 ByBreadBand 21:30-22:00 Aruduino WorkShop Openframeworks+Node.js mobileBB shield for Mozz コミュニケーションタイム 2
  3. 3. communication+art + Activity comaはTechnologyを媒体にして新しいコミュニケーションの場や機会 をつくることを目標にしたプロジェクトです。 3
  4. 4. coma Discotheque • プレイヤーとオブザーバーというのが従来の 音楽イベント • comaは参加者全員がイベントの演出 Communicationが生まれるようなインタラク ティブな仕組みをいれた音楽パーテ 4
  5. 5. Coma Discotheque Ver.0.02 http://vimeo.com/77287875 5
  6. 6. coma Study Room OpenFrameWorks+Node.js 6
  7. 7. about me ‣ cohei aoki a.k.a coa ‣ coma/ROKUROのディレクター兼エンジニア ‣ 本業はフリーのプログロマー兼ディレクター ‣ CutterというFaderでMax/Mspを使った演奏を行うFader演奏家 7
  8. 8. coma Discotheque Ver.0.02 http://169.254.234.82:3000/ 8
  9. 9. coma Discotheque Ver.0.02 企画のシーズ スマートフォンを使ってリアルタイムに参加者が映 像を動かせるなり、メッセージを送るとかそういっ たことをやってみたい。 9
  10. 10. coma Discotheque Ver.0.02 実現の検討 • イベントのためだけにアプリをつくってApple審 査通して、インストールまでするのはユーザにも comaにもきつい。 • 上記制約のためブラウザにアクセセスするだけで 参加できるようにしたい。 10
  11. 11. coma Discotheque Ver.0.02 ユーザと技術の制約から企画から仕様 までを考えて作品をつくる 11
  12. 12. coma Disco System Design Arduino Device Openframeworks osc OSC Sever node.js Gravity app osc client OpenGL osc 12
  13. 13. node.js node.jsを採用した背景 世界中の優秀なエンジニアのおかけでトラブルが多 いリアルタイム通信処理が安定した性能で実現でき る。 10万コネクションまでさばけるぐらいの安定性。 13
  14. 14. node.js node.jsだけで5ページのwebページをつく るのも実は大変。 14
  15. 15. node.jsはミニマルなやつ Webページだすだけでこんなコード var pages = [ {route: '', output: 'Woohoo!'}, {route: 'about', output: ' シンフルなサンフルコートてす。'}, {route: 'another page', output: function() {return ' これが '+this.route;}} ]; http.createServer(function (request, response) { var lookup = path.basename(decodeURI(request.url)); pages.forEach(function(page) { if (page.route === lookup) { response.writeHead(200, {'Content-Type': 'text/html'}); response.end(typeof page.output === 'function' ? page.output() : page.output); } }); if (!response.finished) { response.writeHead(404); response.end(' ヘーシが見つかりません! '); } }).listen(8080); 15
  16. 16. node.jsのコミュニティ ストイックなnode.jsを使いやすくするために node moduleが準備されていています! 16
  17. 17. nodejs-module comakumaで使ったモジュール ✴ express ✴ アプリケーショのひな形をつくってくれる。ページのRouting処理 やページ生成などPHPやrailsと同じぐらい簡単にページ生成を行 ってくれる。 ✴ express3-handlebars ✴ expressではテンプレートエンジンを設定することが可能。標準 のものが使いずらいので導入 ✴ node-osc ✴ oscのサーバ、クライアントをnode.jsに組み込むことができる。 17
  18. 18. node.jsでサーバアプリケーションを 作ってみる expressをインストール npm install -g express アプリケーションのひな形を生成 express comakuma ディレクトリーに移動 cd comakuma 起動 node app.js 18
  19. 19. SmartPhoneBrower ・ソケット通信でリアルタイムにサーバにブラウザ 上の操作した結果を送ることができる。 ・加速度センサー、ジャイロセンサーの値をとるこ とができる。 19
  20. 20. SmartPhone Browerで加速度を取得 function iosHandleOrientation(event) { var orientData = event.accelerationIncludingGravity; var accel_scale = 30.0; var filter_val = 0.1; pos_x = (orientData.x*accel_scale * filter_val) + (pos_x * (1.0 - filter_val)); pos_y = ((orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val))); pos_z = (orientData.z*accel_scale * filter_val) + (pos_z * (1.0 - filter_val)); pos_z = pos_z * -1; socket.send(evt); } //リスナーに登録 window.addEventListener("devicemotion", iosHandleOrientation, true); 20
  21. 21. Openframeworks • Qt,OpenGL,Sound,Kinectなどを簡単に 扱えるようにしたオール・インパッパ ケージ • http://www.openframeworks.cc/ 21
  22. 22. 接続が増えるたびに増える描画オブジ ェクトをどうするか? • 増減を管理するマネージャさんが増え たノードや消えたノードを管理する仕 組みをつくることにした。 22
  23. 23. coma DiscoSystem class OSC Receiver nodeManag er -add oscReceiverで受信 してnodeManagerで nodeModelを生成 nodeModel -draw -update nodeModel -draw -update セッションごとに modelを生成する。 nodeはそれぞれに drawとupdateをもっ ている。 nodeModel -draw -update 23
  24. 24. OpenframeWorks coding oscListener oscイベントの受信を受信し、nodeModelを追加、更新、削除していく。 void update(){ // すべてのノードのステータスをクリア nm->allNodeStatusClear(); while( receiver.hasWaitingMessages() ) { // get the next message ofxOscMessage m; receiver.getNextMessage( &m ); string address = m.getAddress(); // /accsxy/id/x/y/zで値が送られてくる。 if( address == "/accxyz" ){ nm->updateModels(m.getArgAsString(0), m.getArgAsFloat(1), m.getArgAsFloat(2), m.getArgAsFloat(3), 0); } if( address == "/accxyz/" ){ float scale = 0.3; nm->updateModels( m.getArgAsString(0), m.getArgAsFloat(1)*scale, m.getArgAsFloat(2)*scale, m.getArgAsFloat(3)*scale, 0); } } //値が更新されていないノードがいないかチェックして存在していれば生存フラグを落とす nm->ckIdleNode(); //生存フラグが落ちたノードを削除 nm->eraseNode(); } 24
  25. 25. OpenframeWorks coding nodeManger nodeの追加、更新、削除を行うためのClass int nodeManager::addModel(string id,float x,float y,float z,int size) { ofColor color; color.setHsb(ofRandom(0,255), 128, 220); NodeModel* nodeModel = new NodeModel(id,x,y,z,size,color); nodes.push_back(nodeModel); } void nodeManager::updateModels(string id,float x,float y,float z, int size){ //nodeがすでに存在しているかチェック int myI =ckModelId(id); //nodeが存在すればノードを更新、存在しなければ新たなノードとして追加 if (myI > -1) { nodes[myI]->setModel(id, x, y, z, nodes.size()); }else{ addModel(id,x,y,z,nodes.size()); } } 25
  26. 26. OpenframeWorks coding nodeModel nodeManegerから受け取った値をもとに描画 NodeModel::NodeModel(string inId,float inX,float inY,float inZ,int inSize, ofColor inColor){ id = inId; x = inX; y = inY; z = inZ; lifeTime = 0; idelTime = 0; status = 1; kuma = new Kuma( 5, inColor ); rira.loadImage("rira.png"); eye.loadImage("x.png"); circle.loadImage("circle.png"); size = inSize; } int NodeModel::setModel(string inId,float inX,float inY,float inZ,int inSize){ id = inId; x = inX; y = inY; z = inZ; lifeTime++; status = 1; size = inSize; } void NodeModel::draw(int num){ string::size_type iFindCheck = id.find("kuma"); if(iFindCheck == string::npos){ float scale = 15.0; kuma->update(ofVec3f(x*scale, y*scale, z*scale), size, num); kuma->drawCircle(circle); }else{ kuma->drawImage(rira,eye); kuma->update(ofVec3f(x, y, z), size, num); } } 26
  27. 27. OpenframeWorks coding nodeModel nodeManegerから受け取った値をもとに描画 NodeModel::NodeModel(string inId,float inX,float inY,float inZ,int inSize, ofColor inColor){ id = inId; x = inX; y = inY; z = inZ; lifeTime = 0; idelTime = 0; status = 1; kuma = new Kuma( 5, inColor ); rira.loadImage("rira.png"); eye.loadImage("x.png"); circle.loadImage("circle.png"); size = inSize; } int NodeModel::setModel(string inId,float inX,float inY,float inZ,int inSize){ id = inId; x = inX; y = inY; z = inZ; lifeTime++; status = 1; size = inSize; } void NodeModel::draw(int num){ string::size_type iFindCheck = id.find("kuma"); if(iFindCheck == string::npos){ float scale = 15.0; kuma->update(ofVec3f(x*scale, y*scale, z*scale), size, num); kuma->drawCircle(circle); }else{ kuma->drawImage(rira,eye); kuma->update(ofVec3f(x, y, z), size, num); } } 27
  28. 28. OpenframeWorks coding testApp フレーム毎によびだされるdraw関数の中でnodeManegerで管理されたnodeに描画命令を送る。 void testApp::draw(){ ofBackground(0); float size = 50.0; ofSetColor(0); ofSetLineWidth(5); ofSetRectMode(OF_RECTMODE_CENTER); //存在するノードに描画をさせる。値の更新はnodeManagerが行うため、updateでは行わない。 for(int i=0;i<nm->nodes.size();i++){ nm->nodes[i]->draw(i); } ofSetRectMode(OF_RECTMODE_CORNER); ofSetColor(255,iSyphoneAlpha); cSyphonClient.draw(0,0);//,ofGetWidth(),ofGetHeight()); //設定GUIの表示 if(!bHide){ gui.draw(); } } 28
  29. 29. more info • 11/24にableton LiveとJitterを組み合わせ たAudio+Visualのレクチャーとライブし ます。 • Openframeworks、node.js、Arduinoに 興味をもったかた、すでにやられている 方、一緒に何かつくりましょう! 29

×