Home > 多摩美 メディア芸術WS
多摩美 メディア芸術WS Archive
１日目のprocessing
- 2009-04-17 (金)
- 多摩美 メディア芸術WS
1. コードを書く→RUNしてみる
簡単な１行を入力してRUNボタン（▶）をクリックしてみようpoint (50, 50) ;
小さいウィンドウが現れて真ん中に（とても小さいけど）点が打ってあります。
point()は画面上に点を打つ命令です。processingが、そう決めてます。
エラーが出た人は、行の最後に ; をタイプしてるかチェックしてください。
終了するときは小さいウィンドウを閉じます。
( )の中の数字をいじってRUNしてみよう。何が変化するか分かりますね？
一つ目の数字と二つ目の数字は何を表すかも確かめてください。
2. ペンの太さを変える
点が見にくいので少し大きくしますstrokeWeight(5) ; point (50, 50) ;strokeWeightは線の太さを指定します。 ちなみに、命令は上の行から順に実行されます だから
point (50, 50) ; strokeWeight(5) ;だと点の大きさは変わりません。
3.色を変えてみる
色をつけてみましょうstroke(color(255,255,0)) ; strokeWeight(5) ; point (50, 50) ;strokeはペンの色、colorは色を表します。 ３つの数字はred成分, green成分, blue成分です。 0 ~ 255の範囲で指定します。 好きな色をどうぞ。
4.ウィンドウを大きくしてみる
size(256, 256) ; stroke(color(255,255,0)) ; strokeWeight(5) ; point (50, 50) ;ところで、点が真ん中に来てないのをなんとかしたいです。しかも少し高度なや り方で。 もうお分かりと思いますが、pointの( )の中の2つの数字は順にx座標、y座標 を表しています。 この値をウィンドウのサイズの半分の数値に変えてやればいいのですが、 正直に数値を書かずともこんな便利な書き方ができます。
size(256, 256) ; stroke(color(255,255,0)) ; strokeWeight(5) ; point (width/2, height/2) ;width, heightはprocessingが決めた特殊な変数で、ウィンドウの幅と高さが自 動的に格納されています。 だからサイズを200 x 600とかにしても、上記のpoint命令はそのままでちゃん と真ん中に点が打てます。 リストの中で、オレンジで表示されているのはprocessingが決めた命令、ブルー で表示されているのはprocessingが決めた特殊な変数です。 processingが決めている命令や変数はここを見れば知る事ができます。 http://processing.org/reference/index.html 日本語が好きならこちら： http://pripro.org/p5ref/
5. アニメーションを作る
いままでは上の行から下の行へ命令を実行して停止してました。 アニメーションやゲームを作るにはどうすれば良いのだろう？ 答え：draw() の中に書く
void draw() {
// size(256, 256) ;
stroke(color(255,255,0)) ;
strokeWeight(5) ;
point (mouseX, mouseY) ;
}
ウィンドウ上でマウスを動かしてみよう。マウスの位置に軌跡が残りますね？
mouseX, mouseYがミソです。これらはprocessingが決めた特殊な変数で、現
在のマウスの座標が入っています。
「現在の」なので、マウスを動かしていればどんどん変化していきます。
drawの中は繰り返し実行されます。したがって、その都度マウス位置に点が打た
れるという訳です。
{ }の中の行の字下げは見やすくするためで、コンピュータには影響ありません。
processingはctrl + tを押すと自動的に字下げして見やすくしてくださいます。
size()は訳あって実行したくないので //を先頭に打ってあります。//以降のその
行の文字はprocessingが無視してくれます。
これをコメントアウトなどといいます。//はコメントを書くときにも使います。
6. 初期設定とフレームごとに処理に分ける
ところで、draw()のなかの4行のうち、ペンの色とペンの太さを指定していると ころは繰り返し実行する必要がありません。またsizeは繰り返し実行してはいけ ない命令です。（コメントアウトしたのはそういう訳でした） そこでこうします。
void setup() {
size(256, 256) ;
stroke(color(255,255,0)) ;
strokeWeight(5) ;
}
void draw() {
point (mouseX, mouseY) ;
}
setup()内に書いた命令はこのプログラムがRUNされると最初に実行され、その
後draw()の中が繰り返し実行されます。
そういう風に作ってあります。
ｓｅｔｕｐ │ │←──┐ │ │ ｄｒａｗ │ │ │ └───┘こういう風に。 プログラムの準備段階はsetupに、通常運転はdrawに書くといいでしょう。
7. 自動的に点が進むプログラムを作ってみます
int x ;
void setup() {
size(256, 256) ;
stroke(color(255,255,0)) ;
strokeWeight(5) ;
x = 0 ;
}
void draw() {
background(100) ;
point (x, height/2) ;
x = x + 1 ;
x = x % width ;
}
drawの最初のbackgroundは背景を塗りつぶす命令です。これがないと軌跡が残ります。
今回はボールのように動いてほしかったので、軌跡を残さず、コマ毎に背景を塗りつぶし、点を描いています。
一行目のint x ;でxという変数を使う事に決めた旨宣言します。
widthやheightやmouseXやmouseYなどはprocessingが決めた特別な変数ですが、このように自分で好きな名前の変数を作る事ができます。
setup内のx = 0 ;でxに0を代入してます。
draw内のpoint(x, height/2)でxの横位置に点を打っています。
次の行でxに1を足しています。
さらに次の行で右端についたら左端に戻す、ということをやっています。（幅で割った余りを求めています）
- Comment (Close): 0
- TrackBack: 0
processingで4chオーディオ
- 2008-07-06 (日)
- 多摩美 メディア芸術WS
processingで4chのサウンド再生をしたいという質問があったので調べてみましたが、processingのライブラリとしてはできる物はないようです。
そこで今回もMaxMSPにOSC経由でメッセージを送るやりかたで制御することにします。
processing側
動作チェックプログラムです。
// control dac and sfplay~ on MaxMSP via OSC
void setup() {
size(220,220) ;
initUI() ;
initOsc() ;
}
void draw() {
background(240) ;
}
//-------- OSC --------
import oscP5.*;
import netP5.*;
OscP5 oscP5;
NetAddress addr;
void initOsc() {
oscP5 = new OscP5(this,12000);
addr = new NetAddress("127.0.0.1",12000);
}
void tellPlayer(int ch, String str) {
OscMessage msg ;
msg = new OscMessage("/sfplay/ch" + ch) ;
msg.add(str) ;
oscP5.send(msg, addr);
}
void tellDac(String str) {
OscMessage msg ;
msg = new OscMessage("/dac") ;
msg.add(str) ;
oscP5.send(msg, addr);
}
//-------- UI --------
import controlP5.*;
ControlP5 ui ;
Toggle tg ;
Textfield tf1, tf2, tf3, tf4 ;
void initUI() {
frameRate(25);
ui = new ControlP5(this);
ui.setColorActive(color(100,200,200)) ;
ui.setColorForeground(color(200,255,255)) ;
ui.setColorBackground(color(200,200,200)) ;
ui.setColorLabel(color(100,100,100)) ;
tg = ui.addToggle("dac", 20, 20, 10, 10) ;
tg.setColorLabel(color(100,100,100)) ;
tf1 = ui.addTextfield("message_to_ch1",20,50,180,20);
tf2 = ui.addTextfield("message_to_ch2",20,90,180,20);
tf3 = ui.addTextfield("message_to_ch3",20,130,180,20);
tf4 = ui.addTextfield("message_to_ch4",20,170,180,20);
tf1.setFocus(true);
}
public void message_to_ch1(String str) {
tellPlayer(1, str) ;
}
public void message_to_ch2(String str) {
tellPlayer(2, str) ;
}
public void message_to_ch3(String str) {
tellPlayer(3, str) ;
}
public void message_to_ch4(String str) {
tellPlayer(4, str) ;
}
public void dac(boolean f) {
if (f) tellDac("start") ;
else tellDac("stop") ;
}
ソースをダウンロード
例によってoscP5とcontrolP5を使ってます。ソースから実行する場合はprocessingにそれぞれのライブラリをインストールして開いてください。
SoundPlayerControllerアプリケーションこっちにはライブラリ含まれてるので即実行できるはずです。
起動するとこんな画面が出てきます。
ここのところ蒸し暑いので涼しげな色にしました（うちのエアコン代替フロンが抜けて故障中…）
MaxMSP側
こちらがMaxMSPのパッチ
movieplayerパッチ
アプリケーション化したもの（そのまま実行できる）
サンプルサウンドファイル（解凍してsndフォルダの中身=snd1.wavなどをsoundplayerと同じ階層に置いてください）
動作チェック
サンプルサウンドファイルをsoundplayerと同じ階層におきます。 まずDACボタンをクリックしてDSPをONにします。 それから音を出したいチャネルのテキストフィールドにメッセージを打ち込みます。
- open snd1.wav（snd1.wavを読み込む）
- 1（サウンド再生）
- 0（サウンド停止）
- loop 1（ループ）
- loop 0（ループ解除）
自分のプログラムで使う
自分のプログラムで使う時はsetup() 内のinitUI() ;と//--------UI--------以降全てはいりません。これらは動作チェックのためのGUIを記述しています。 tellDacでDACのON/OFF、tellPlayerでチャネルを指定してsfpley~にメッセージを送ることができます。
DACをON
tellDac("start") ;
チャネル1にサウンド読み込み
tellPlayer(1, "open snd1.wav") ;
チャネル1のサウンド再生開始
tellPlayer(1, "1") ;
こういった感じで音を制御できます。音量を制御したいときはMaxMSPのパッチを改造してください。
今回ライブラリについてhysyskくんに質問してアドバイスいただきました。どうもありがとう！
彼のblogはいつもprocessingなどの面白い試みが書かれているのでおすすめです！
- Comment (Close): 0
- TrackBack: 0
Duper/Looperを作る
- 2007-10-02 (火)
- 多摩美 メディア芸術WS
今週から製作する作品の回路図です。
PDFをダウンロード
回路図をもとに各部品のデータシートを入手して、ピン配置などを確認して基板上にレイアウトしてください。
授業ではPICのプログラミングはやらないので、以下は興味がある人だけダウンロードするなりしてください。
PICに書き込むプログラム
- Comment (Close): 0
- TrackBack: 0
ストロボスコープの改造
- 2007-06-20 (水)
- 多摩美 メディア芸術WS
先週の水曜の授業後、IS君のプロジェクトでストロボスコープの改造をやってみた、の報告。
100VACで動作する、ストロボがフラッシュするやつで、背面に付いたボリュームで点滅速度が変わる。これをPri/Proから制御したいということで、ボリューム部分をどうにかして改造することに。100Vがらみの基板ってどこが危ないか分からないので怖い。ストロボ部分は数千ボルトかかってるそうなので触ると結構つらいと思います。（！高電圧の機材を改造するときは本当に注意してください！）
作業は完全に行き当たりばったりで、内部の基板に1MΩの半固定抵抗があったのでそれを外して、CdSに取り替え、外部からLEDで光を当てて制御というのを試してみた。そうするとストロボの回路と制御回路は電気的には繋がってないのでなにかと安心。こういう、アナログ動作のフォトカプラというのは既成の部品としても存在するみたいです。
結局耐圧も最大電流もよく確認せずにやってしまったです。まあ付いてた半固定抵抗を見る限り大丈夫っぽいなぁ。とか、でもVRを0側にまわしきると壊れるかもしれんなぁなどと思いつつ一瞬試してみたりして、だましだましやってみた。
CdSは残業中のY2君から借りた秋月で売ってるもの。暗いときで150kΩ程度だったので、直列で6個ならべてそこにPWM制御の白色LEDを照射。CdSの抵抗値はLEDの明るさに応じて1MΩ+から数十Ωまで変化した。ストロボの点滅速度もちゃんと変化してとりあえず改造は成功っぽい。
CdSを何個も直列にして見かけの感度を上げる、というのは意外にやった事が無かった。うまく組み合わせると期待する抵抗値の変化に近いものを作れそう。機会があったらやってみると良いかも。この方法を使うと、（電気的条件が許す限り）いろいろな機材のボリュームを外部制御できる。でもこんなのベンドやってる人からすれば当たり前か。
あと、もっと神経質に行きたい場合はデジタル制御できるボリュームIC「デジタル・ポテンショメータ」というのがあります。
余談だけど、部品としての「ボリューム」、「コンデンサ」は英語じゃ通じません。
ボリューム → ポテンショメータ（略してポットというらしい）
コンデンサ → キャパシタ（こっちは略してキャップ）
海外展示のときなど知っとくと便利かと。
ついでに「アンテナ」はイギリスでは「エイリアル」と言うのでたまげた。
- Comment (Close): 0
- TrackBack: 0
processingのリファレンス日本語版
- 2007-06-19 (火)
- 多摩美 メディア芸術WS
processingのリファレンス日本語版です。
今のところ基本命令だけ。本当は拡張命令扱いの方においしいものが揃ってるのだ。
いろいろ不備やら間違いがあるので指摘してください。
- Comment (Close): 0
- TrackBack: 0
Pri/Pro+processingで絵を描くおもちゃ
- 2007-06-13 (水)
- 多摩美 メディア芸術WS
1. ボリュームにリード線をつける
NASAによるハンダ付けチュートリアル
2. Pri/ProのIOモジュールを２つ連結し、それぞれにボリュームをつなぐ
3. processingで以下のようなプログラムを実行
import pripro.*;
PriPro pp ;
void setup() {
size(256, 256) ;
pp = new PriPro(this) ;
}
void draw() {
point (pp.in[0], pp.in[1]) ;
}
- Comment (Close): 0
- TrackBack: 0
Pri/Pro動作テスト
- 2007-05-30 (水)
- 多摩美 メディア芸術WS
Pri/Priの組み立てが終わったところで、processingでのテストプログラムで動作を確認しよう。
WStest00.zip
これをダウンロードして解凍後、processingで開いてください。
Pri/Proのハード構成はA/Dユニットを1チャネル。入力に光センサ、出力にLEDを繋いでおきます。
プログラムをrunするとこういう画面になります。光センサからの入力で画面の明度が変化し、マウスのX位置でLEDの輝度が変化します。
＊矩形の中をクリックしてください。
＊これはweb用のデモなのでデバイスはつながりません。マウスのX位置がそのまま画面の明度になります。
final int chMax = 1 ;
void setup() {
size(256,256) ;
initPort() ;
frameRate(30) ;
}
void draw() {
background(rx[0]) ;
stroke(color(128,0,0)) ;
line(mouseX, 0, mouseX, height) ;
tx[0] = mouseX ;
update() ;
}
rx[0]がチャネル０の入力値、tx[0]が出力値になります。コードを適当に変えて描画やLEDの明るさを変化させてみよう。
以下はシリアルのやり取りをする部分です。この部分は今はあんまり考えなくてもいいです。後日ライブラリ化したものを公開しますが、こういうやり方でやってるという参考まで。
import processing.serial.*;
Serial port ;
int[] rx = new int[128] ;
int[] tx = new int[128] ;
int ch = 0 ;
String s ;
void initPort() {
// println(Serial.list()) ;
String[] ports = Serial.list() ;
boolean portFound = false ;
for (int i=0; i<ports.length; i++) {
if (ports[i].indexOf("usbserial") >= 0) {
port = new Serial(this, ports[i]) ;
port.buffer(chMax*2) ;
portFound = true ;
return ;
}
}
println("device not found") ;
exit() ;
}
void serialEvent(Serial p) {
String str = p.readString() ;
for(int i=0; i<str.length(); i++) {
char c=str.charAt(i) ;
if (c=='+') {
ch = 0 ;
s = "" ;
}
else {
s += c ;
if (s.length() == 2) {
try {
rx[ch++] = unhex(s.toLowerCase()) ;
s = "" ;
}
catch (Exception e) {
println(s) ;
}
}
}
}
}
void update() {
String str = "+" ;
for(int i=0; i<chMax; i++) {
str += hex(tx[i], 2).toLowerCase() ;
}
port.write(str) ;
}
- Comment (Close): 0
- TrackBack: 0
Home > 多摩美 メディア芸術WS