Processing PureData 記事一覧

帰れま10のパネルもどきを作ってみた

更新日:

こんなものを作ってみた。使うかどうかは知らない。
使った言語はPureDataとProcessing。

挙動としては、

  • Excelの内容を読み込む
  • 数字キーで順位を入力
  • 「o」キーを押すとパネルオープン、順位表示
  • 「r」キーを押すとリセット(オープンしたパネルはそのまま)

ってところ。前に授業でOSCって通信プロトコルを使っていい感じだったので、今回もそれを使ってみた。oscP5っていうライブラリをProcessingにインポートするだけ。PureData側は特に必要なし。
OSCを用いた連携についてはここらへんのサイトをみればわかると思う。↓↓
oscいろいろ(processing,openFrameworks,Puredata)


全部書くのはだるいからちょいちょいポイントだけ書いてく。というか自分のための備忘録。

まずProcessingから。Processingは主に表示部分を作ってます。
ライブラリは、oscP5の他に、Excelを読み込むため、XlsReaderのライブラリを使ってます。

まずsetupの部分。こんなかんじ。
[java]
void setup(){
wid = 640;//displayWidth;
hei = 480;//displayHeight;
size(wid,hei,P3D);
//size(displayWidth, displayHeight);
background(255,254,228);

oscP5 = new OscP5(this,2014);
oscP5.plug(this,"getData","/flag");
oscP5.plug(this,"reset","/reset");
oscP5.plug(this,"detail","/detail");

reader = new XlsReader(this, "otameshi1.xls");
nameX = 100;
nameY = hei/13*1;

myFont = createFont("uzura_font",100);
textFont(myFont);

reader.firstRow();
reader.nextCell();
theme = reader.getString();
reader.nextRow();
for(int a=0; a<10; a++){
score[a] = reader.getInt();
reader.nextCell();
ans[a] = reader.getString();
reader.nextRow();
rankHide[a] = TRUE;
}

(中略)

}
[/java]

[2-3行目]
今回ディスプレイの大きさは640×480。でも、displayWidth,displayHeightを使用することで全画面表示にできます。二画面操作するときとかはそうした方がよさげ。

[4行目]
パネルの回転は3次元なのでP3Dにします。

[8-11行目]
例えば9行目であれば、"/flag"というタグがつけられている値を
[java]
public void getData(int x,int y){
openFlag = x;
rank = y;
}
[/java]
という関数を記述することで取得可能となります。

[20-30行目]
xlsを読み込みます。今回はこんな感じのデータを用意しました。
スクリーンショット(2014-02-08 0.38.20)

細かい説明は省きますが、
[java]
reader.firstRow();…左上のセル
reader.nextRow(); …次の行
reader.nextCell();…次の列
xxx = reader.getString();…読み込み
[/java]
で、xxxには2Bのセルのデータが挿入されます。

あとなんか書いとくことあるかな。
あ、文字の位置や四角の描画指定は、画面サイズを変えても対応できるように相対位置で指定してあります。
textAlign(RIGHT,TOP);
rectMode(CORNER);
説明めんどくさくなった← ぐぐれ←


スクリーンショット(2014-02-08 0.44.54)

一方PureDataの方はこんなかんじ。汚いとか言わないで…ちゃんとあとで整えるから…。

sendOSCというところでProcessing側にデータを渡してます。その送信のポートを指定するのが"connect loaclhost 2014"。loacalhostの部分をつなげている無線のipにすれば遠隔操作も可能。勿論同じ帯域内での話だけど。
"2014"というのはポート番号。よくわからないけど、数字が大きければ別にどこでもいいっぽい。
"loadbang"はこのプログラムを開いた時点で一度Bangを送る、という意味。
で、真ん中の上の方のkeyはキーボードのASCII文字コード値を出力してくれるやーつ。それをセレクトオブジェクトでそれぞれ変更しています。


今後の展望としては、"d"キーを押したら詳細データが表示されるようにしたい(昨日実装したはずなんだけど、なんか消えてた…orz)。

いい感じに動いたからわりと満足である。

思ったよりまとめるのって大変なのな。もうやりたくない←

続きを読むで、processingのコードが全部見れるようにしておきました。汚いけどかんべんしてね!

[java]
import oscP5.*;
import netP5.*;
import de.bezier.data.*;

XlsReader reader;
PFont myFont;
int[] score = new int[10];
String[] ans = new String[10];
int[] rankHide = new int[10];
String theme, detail;

int rank;

int wid,hei;

OscP5 oscP5;

int nameX,nameY;
int openFlag;
int panelStrFlag;
int detailFlag;
int TRUE=1,FALSE=0;
int angle;
int angleChange;

void setup(){
wid = 640;//displayWidth;
hei = 480;//displayHeight;
size(wid,hei,P3D);
//size(displayWidth, displayHeight);
background(255,254,228);

oscP5 = new OscP5(this,2014);
oscP5.plug(this,"getData","/flag");
oscP5.plug(this,"reset","/reset");
oscP5.plug(this,"detail","/detail");

reader = new XlsReader(this, "otameshi1.xls");
nameX = 100;
nameY = hei/13*1;

myFont = createFont("uzura_font",100);
textFont(myFont);

reader.firstRow();
reader.nextCell();
theme = reader.getString();
reader.nextRow();
for(int a=0; a<10; a++){
score[a] = reader.getInt();
reader.nextCell();
ans[a] = reader.getString();
reader.nextRow();
rankHide[a] = TRUE;
}

openFlag = FALSE;
panelStrFlag = FALSE;
detailFlag = FALSE;
angle = 180;
angleChange = 7;

rank = 0;
}

void draw(){
background(255,255,204);

textSize(24);
fill(0);
textAlign(CENTER,CENTER);
text(theme,wid/2,nameY);
nameY += hei/13;

textSize(24);
for(int b=0; b<10; b++){
fill(0);
textAlign(RIGHT,TOP);
text(score[b],nameX/5*3,nameY);
textAlign(LEFT,TOP);
text(ans[b],nameX,nameY);
if(rankHide[b] == TRUE){
fill(255);
rectMode(CORNER);
rect(nameX,nameY-8,240,hei/13);
fill(255,0,0);
textAlign(CENTER,CENTER);
text("?",nameX+120,nameY-8+(hei/26));
}
nameY += hei/13;
}
nameY = 50;

if(detailFlag == TRUE){
detailBox();
}

rotateBox();
panelStr();

}

public void getData(int x,int y){
openFlag = x;
rank = y;
}

public void reset(int x){
panelStrFlag = x;
detailFlag = x;
}

public void detail(int x){
detailFlag = x;
}

void rotateBox(){
noStroke();
rectMode(CENTER);
fill(208,236,234);
translate(wid/4 * 3,hei/4 * 3);
if(openFlag == TRUE){
angle += angleChange;
rotateY(radians(angle));
if(angle >= 270){
panelStrFlag = TRUE;
}
if(angle >= 360){
angle = 180;
openFlag = FALSE;
if(rank>= 1 && rank <= 10){
rankHide[rank - 1] = FALSE;
}
}
}

rect(0,0,wid/10*3,hei/10*3);
}

void panelStr(){
if(panelStrFlag == TRUE){
fill(0);
textAlign(CENTER,CENTER);
textSize(100);
text(rank +"位",0,0);
}
}

void detailBox(){
noStroke();
rectMode(CENTER);
fill(208,236,234);
rect(wid/4 * 3,hei/26*9,wid/14*5,hei/13*4);
fill(0);
reader.firstRow();
for(int a=0; a < rank ; a++){
reader.nextRow();
}
reader.nextCell();
reader.nextCell();
detail = reader.getString();
textAlign(CENTER,CENTER);
text(ans[rank-1],wid/4 * 3,hei/26*7);
textSize(46);
text(detail,wid/4 * 3,hei/26*10);
}

[/java]

「面白いじゃん」と思ったらぜひシェアをお願いします!

-Processing, PureData, 記事一覧

Copyright© ちゃいら随筆 , 2019 All Rights Reserved Powered by STINGER.