Cycling74 MaxでSVGのアニメーション #maxmsp #jitter #svg

MaxでSVGを変更・描画する方法です。jit.mgraphicsを使えば、SVGをスタンプとして描画できます。MaxのデフォルトGUIは、svgファイルが準備されており、jsuiの中でmgraphicsを使って描画しているようです。ただし、これだとスタンプ的に絵を描くだけで、直接パスの情報を編集してアニメーションさせる事ができません。

そこでSVGが内部的にXMLで記述されている事を利用して、XMLを読み込んで変更してアニメーションを実現しようというのが主旨です。結果上記vineのような事ができました。

※こちらの映像は@azumahitomi のVJのために @ohashitakashi とテストしてるデータで、illustratorで貰ったパスをSVGに変更して利用しています。

スクリーンショット 2014-08-02 17.41.09

SVGの読み込み変更・保存・描画

  1. sadam.rapidXML を用いてSVG(XML)読み込み。@dictアトリビュートを指定する。2.でdictオブジェクトとデータ共有が可能。
  2. dict も第1アトリビュートに1.で指定した名前を設定。
  3. dict のパスデータに対してアニメーション処理。JSON形式なので容易に変更できます。
  4. jit.mgraphics に メッセージ svg_create svg名 svg生データ の順に送り描画準備
  5. jit.mgraphicsにメッセージ svg_render svg名 でjit.matrixに描画

最初、変更したsvgをread/writeするプログラムを紹介していましたが、jit.mgraphicsが直接svgの生データを受け付けてくれたので書き直しました。

追記

openclipart にアップされているSVGを何個か試して見たところ、読めない物がいくつかありました。そういうファイルは、illustratorで一度読み込んでsvgで書き出し直すと読めたりしました。

続きを読む Cycling74 MaxでSVGのアニメーション #maxmsp #jitter #svg

Vizzieを使って、Max for Liveから映像出力を最速で行う:#maxforlive #vizzie

スクリーンショット 2014-07-19 0.36.13

Max for Liveで映像連動したLiveがしたい!

東京からAbleton Liveの魅力を伝えていこうというAbleton User Group Tokyoの運営メンバーに加えさせて頂きました。主にMax for Live関係を担当させてもらう事になりました@mirrorboyです。これから何度かに分けてMax for Live映像を出力するネタを書いて行こうと思います。 まずは、「Max for Liveから最速で映像を出す」です。Ableton Liveユーザーの方の中には、音と映像を連動したライブをしてみたい!という方も多いのでは無いでしょうか? 単純なパッチなら1分でつくれます。

Vizzieだけ覚えて帰って下さい!

スクリーンショット 2014-07-19 0.37.14 これだけでAbletonから映像再生ができます。(でも詳しい方はご存知かもしれませんが、Ableton単体でも映像の再生・打込みができたりしますね。カットアップを激しくしたりすると落ちてしまうので誰も使って無いのでは・・・!!!)まず何はともあれ赤いパネルの2つのVizzieオブジェクトです。これは、Cycling74が容易してくれている簡単VJオブジェクト郡で、右クリックで出てくるコンテキストメニューからPaste Fromから貼り付ける事ができます。エフェクターや数値を出力するオブジェクトもあります。MaxやJitterは良くわからなくても、アイデア次第で結構遊べます。

パッチの説明ですが、PLAYERに.movなどの映像をドラッグアンドドロップすると映像が緑線で出力されるので、VIEWERで受けて映像を別ウィンドウに表示します。フルスクリーンにしたり解像度も選べるのでイベントでも普通に使えますね。

音に合わせて映像が動く

ただ、映像流すだければ面白く無いので、右上の方にあるplugin~から入ってきたAbleton Liveで再生しているMSP形式の波形データをpeakamp~でMax形式の音量データに変換し、PLAYERの再生停止インレットに突っ込んでいます。こうすることで、音が鳴っている時は映像が動いて、音が止まると映像が停止するという音に連動したインタラクティブな映像出力が実現できます。簡単!

jit.gen vs jit.gl.pix Vetex Array 生成対決:#max6 #maxmsp #jitter #cycling74

スクリーンショット 2014-07-16 0.43.34

フォーラムに似たようなスレッドがありますがMaxにおけるGPUとCPUの対決です!球体のVertex Arrayをjit.gen / jit.gl.pix の両方で生成できるパッチをつくりました。それをjit.gl.meshへ入力し上記のような画像を生成します。

実装

スクリーンショット 2014-07-16 1.02.34
jit.gl.pixはGPU上の処理でVertexの配置を保持したテクスチャを生成しますが、そのままjit.gl.meshへの入力へは使えません。まずはjit.gl.pixの出力をjit.matrixに入力する事で、CPU側のメモリにGPU側のテクスチャを呼び戻します。jit.gl.pixはplane数が4に固定されています、ARGBですね。なので次にjit.genを使ってplane数を3に削減してjit.gl.meshに入力できるplane数に変更しています。ちなみにこのplane削減処理は、jit.unpackでも出来ますが、jit.genのswizを利用した方が多少早かったです。こうして、GPU計算したVertexをjit.gl.meshの描画に利用できます。

それではMaxにおけるCPU vs GPUの対決やいかに・・・!

結果

fps(@sync 0) : jit.gen 100fps / jit.gl.pix 70fps
CPU使用率 : jit.gen 140% / jit.gl.pix 60%
※アクティビティモニタで目測

jit.gl.pix(GPU)はfpsが伸びなかったです。代わりに、CPU使用率が下がっていますね。これはMSPと共存させるような方には良いかもしれません。ただ描画速度やパーティクル数を稼ぎたい場合は、jit.gen(CPU)を使う方が良いみたいです。というかjit.genは、シェーダーのように並列演算しやすい形で記述するので、裏でCPUの並列計算をするようになっているそうです。

TIPS

スクリーンショット 2014-07-16 0.45.17

  • jit.gl.pix dimの最大値 16384 か?それ以上の値になると表示がバグる
  • jit.gen / jit.gl.pix 内部で使えるプリミティブ(circle,sphere,torus等)楽しい

Sample Patch


----------begin_max5_patcher----------
2043.3oc6bssjahCD8Y6uBJp8wYmEIw08or09YLaJWXirsR3hWPdtjT40848
ab+RVcAvfMfkIXMdRlIULwR.p6S2p0oUqIec9LykYOiKLM9ciGLlM6qymMSz
DugYkeelYR3yqhCKD2l4prjDbJ07NYeT7yTQ6ehPueCN03wBCw+L99cjmM9q
zkuX7gDRddV9xrWpdpXRJdU19TwiBKajDIdQYK+zuhPU245rT55vUXdWnx1R
2mPRiwTg.AZbiEjuHtQn88VUMmuYIuIq5V1ERWskjtYQNdEUp4PeVuFPG9mH
fG+hK6AL93gALaOsZDsZLhogIhQz7OxIgwl7N91747OtSQ7jlsYSL1rCL.T0
nbrourCKEWSBG393PnQGJIJ.cuSkVBfA0W5QMO7pxYJIEmu.mFtLVHCViPQ6
yw4+9m+8O2FltAaT4B8aM7f5.Xf1lp5H.fWli.xCJvHaj.cbrD9E5xUX4dJM
KsKMF1qqvRFxc49BPeg4GU53eN0DLoJi0TqLHv0VYRwOwD89h40gRBb5UIYO
zhjPZN221v7LpaONyc45xPAlqKxVfBRG3APAX+dtMGCbdIpTBKrGfDieDmWP
XF2CB5Lyvc6Zz7rFOBGK+Tl3E4dWcSjTYSf5lxwORpddu5VCyYZJkol6ykB4
y9tlxNY1u4UOZsyfvw1U9okvWv1oALvrzaVkEKG6GXQCBtqwGf12Xb1pOiiZ
LQmYN2gSIo6xwErXYgzRwst6H75v8wzEca2Z2e0xZc1Ym1jYlaxIQYobgn0S
xatZ3dfE2RF8poxHtizvcc7vEL8XewxvbN7WFfGV0IMKKtcW0Vb1TlvTByUF
SIRgEZU+RII6xIx02qaSt9w1hU4YwwsdUxddridhXNEqvOQhnaaE8l2C61I6
pLAl0XTDYCtf1tMZ3lh1szh3SSu0lwBZ09PwDZGWn3IxWL3q2znyFAGbZ19I
wGpiHzaTgAhLzWzAGQHRG4zBmiiMz+p+Cs51rp3nkyEmdbjjZ.5ACAiECsFO
FJhl.rEK1X8VACYxSufns4UvSShRVRxzdJ.SVWLLcHrFOQhdlEKjMd+cieEY
6yWU4uTNqznsXxhvPIo0A4enFzN591RhhZGSUFFpfGTKplu7Ys0WpDCTThcl
HI13iyOzxzwfphLzojnPuVjnjjHcbFOIpIkwbvjS+Wleis80iw79jkLxicXT
cGLs16TRmt.KpU.2hVFO5rIzAGJo2I0Z2yDhcgelMW0pq8CnWbqGvBNZvR5W
bVvBLo.xFFqIlDA6ZBP+aER6o+kLNACAGco2.wzdnb4JTYtwiyIYhytruMAA
.GL13l3E72COmoqP7QXfUiMQ5mvrLAPWnH0R+2Sz78DMeESzbGatCdboHc2U
JUSnHHpmbanTg+O7FOUSG8mpoDCQtBLz98TMGBk.xB17iXplf2boZZeCjpYB
tnHbC9D9Tq2GGyhjiwoF+BnKVlNSBCaz4qznsmy8PGTfk6cF9Rm3.Mwxt2xM
Bcm1xMVponCZJT07Itx7p2YvVPuKDvaLoYacw9.LVhNsQFaAYRHXL9.usqVi
Sip0XKIQ6a8N2324FqHaD4bjd3b3qDmiNicI4bAsObtPfNJyrn5jNHTU8P8p
.GaTG+5j.aCRfUDaa3jAfimhlDIAR1YmVU5a0zA9L9kQkUU4VXd5kqRVBkfK
vpr3dNmEbsuMH.CUjNo+aNBvvol.b456EgOhiVvFAl0eQHklSVtmJMGMWu+6
cosyuz4EDuuSgXfAuuAkQAXYXbICm5msikUtJkm5IRZT1SFkW9v5BVr88rUi
Yl4OvkVNwEVp5rusLKOBma.32TXHu+127Koq5bm8A9CS7bJ2AWIsbGKuZxmN
.jVKyE24cOoCXv18Ry+5xUe.nLArC5OP45bvkbYk5DFZyIEV3tZq2UroSnAp
X8OlDmCjkvgvW.KHGM4VLbQPX4zusdJX3dZFiwKYEepFMOLsXcVdxBd5.TdS
EIYYzsKJ1FFwzO9TO9SrPra7E06PU6CgLpiok1eekeN3xweawwOE4KYb5Aq1
C0WaKPZFo.afLVGmERQPlKhE+ucEKCn8Z1aUR7Q37Bbc0ZzrK9jgFna7ozop
rlc9veRKYW.BJKtqy6Ur68ck31rhcAuNUrq7H6I8M9gnjcduVmNTuxvJuWxt
Ac0bQu0JYWvatSGpmhRbvs8oCkQ9OGmxyqth9eu4Qq8zngtxh24ZeKv4jZrT
7GbdXQWU3y6rvywWkuoIFyjaptm2YfLac.Y+cBllmYzU0fsGSw.giDT.xcx0
0Qqm3xdqEry0nTv.anZm1X8TEXVlrQR+748sE+i53VewldKmpeei0nou2MgS
C6AmmeiM4XD69VTd3SKRxhvl5ARf9WeLo5jWKO1bvytkrmBJjD0fCwKrMyHI
5bL+hRLZXlP8UEDqV2zIDJNkLwIFqoTb.1ZSb7UAczlz3ofz3qUoA8cJMIjn
cYrUgJcdCbj+eZP0usYUe4vnLoRO7bV1fKS78buG3x9wlK1vJl.H1O1c2D.I
oZFH1SOw2tBpp6s0bJGEDG8IM1JgN5aVksBhim1jFDPk.f.8IOpHN5yXAUZ4
J8AOP+aL4QkUrft5SdTYxNzQexiysUvGnJS2Czq3.NG7nO9W.UbeP2dhC31Q
bf5y6AnxjKH71RdzHOLfJKlBzWvvilH2i7nwoWJy8QSyuTPbFq0RtMBGUaet
fbTM8Opd9mVK+9piOab917+GE2s8X
-----------end_max5_patcher-----------

jit.gl.pix を使ったテクスチャパーティクルの描画:#jitter #max6 #cycling74

jit.gl.multiple が重いのでは?という仮定の元、jit.gl.pixを使ったパーティクルの描画を前回試してみました。今回は、その続きでテクスチャ付きの画像をjit.gl.pixで描画してみました。jit.genで生成したパーティクルの位置をテクスチャとしてjit.gl.pixに入力。ピクセルシェーダーが位置テクスチャを全捜査して、自分が描画対象だったら画像テクスチャからその色を取得し出力。位置テクスチャを全捜査しないで描画する方法があれば良いけど思いつかなかったです。 スクリーンショット 2014-07-15 1.35.50 パフォーマンス的には、解像度720×360 / パーティクル数500 / 20fps 程度という事で大した事無い気もします。アクティビティモニタでMaxを見るとCPU使用率が20%だったのですが、jit.gl.multipleとの比較はしてないので、そのうちやってみたいです。

続きを読む jit.gl.pix を使ったテクスチャパーティクルの描画:#jitter #max6 #cycling74

jit.gl.pix を使ったParticle生成と描画:#max6 #jitter #cycling74

スクリーンショット 2014-07-13 9.09.25

スクリーンショット 2014-07-13 9.23.19

スクリーンショット 2014-07-13 9.42.57

jit.gl.pixでパーティクルの座標値を生成し、jit.gl.pixで描画してみました。GPUで処理されるシェーダーだけで完結したら速いかな?という思惑でしたが・・・。当然、出力解像度とパーティクル数がトレードオフになってました。パーティクル生成と描画のjit.gl.pixを完全に分割しているJitter風の描画方法なので、両方まとめちゃえば、もう少しパフォーマンスでるかもしれないです。

jit.gl.pix TIPS

  • dimの値は、in1のmatrixサイズ
  • in2 のdimの値は、別途paramで与える
  • in1へ一度matrixを突っ込んだあとは、bangを送るだけでテクスチャ生成される
----------begin_max5_patcher----------
2924.3oc6ckrjaiaF9r5mBTpxgt8HKS.v033pbdCl61S0EEIZ0zlhTgjpaow
kOXeXpjbwSkZtOGlK4TdAljJuKomZli4UHXgjs1HIjHEaJEYWVxD.D3Ge3G+
aXQe3hd8GENmD2G76AuAzq2GtnWOdRrD5k9bu9Srm63aGyKV+.x8gidW+Ahr
RHyS3I6GZ6NgDGCLyx5lvfj.6IDd1+wHOa+rblZm3bqWv3qiHNIh1VWSanx.
.RQm8kAR7vPEv2j9Ndt75g1zOGZkUQgyR7IIIKlRD0R+94km05wdeKOCHq5D
IGLahW.8c38E3iIJpIQprD+3EWv9XP8.koQjoj.Wfq2DTcfELjCKPEkRwkiF
Xw980hIwDyAEzPshACDtgPCTygFylLhDUqdN1f8kVorAHkGqnHZCjPhtlDXO
xm2TJEgJdAI8G.5OxNXbSvtfZN1k24kLbhcRj2b.DbCUPSBFAfVHE5DBSk8B
OgZVbVHUS97Jc8RmWgJjUhRZWKHMF18TgaNgSlPXCeqAb+mu66AtQ12CnLBI
dNTFf8AqPVXASGGxPPsRwJ071HZ7HNCWdue+AEklkYZr+vorQr8mwIELfXbo
fAtTFmw9WyHqYQjcm4Y6RkPKS3TQMBzIEdnUrmO4NRTrWXvRXcu91SmtTx8V
5UXX56B4Uj9f7j7BDIAySJhbmW16ajmpcDE9RnXGqKx.k4l58EYRGGuH6UyY
zL4yF0UE1.nwMBPkIxKCZni4icB8Es9anrVVCV5C3pEzOz48D2kj4QGFnZi8
BnZkioSWrSRI37rcI2XOyO45sO.rZ92X6PJ7k2J6Tu9ii7bCCXDwJuIK4rli
wgw4rzVtyvKQf8zs7xwz9wr3Q1QrAfTY7nrLSBC8WMq7wb5jG6.OprKRhmfX
QJ4Up2joQL8AK2PBUH2F6DE56uRUIx4tsjiKksvgbumaxsqHJfkCs3dSyFB5
miQtdiIwIqlVh833USYEqVWlecYoBqjdYRGV25DpVStIa.Uf5xEo3g1hDcJL
jExEVXottrh0kWfWt5J1rkRDRrofh0xXcSX5kIXMcRYyCmdA.Xs.QUwDBN5g
0qBCQGsXnSnKgUx5fUBKCEepqxMVDSsStPzR6.fVvhQqkxg0a4jwWmOc6kuM
5sAr+4BdE.9hKYocEOQWTdJOGdUd4lFFSS+NhykwTMRSFNG7LVEMb9KXetXf
H0EK8BTSHeEPI+4aBitjmB3kf4f+.07R12e0q.tCmeEq.efWxDV4VjVtEoka
gnbKtRTjzR91jLasnEO1dxTexkdAvALhb9fEWc0v4KdYdQ4jC6yuBbI7E9jf
wI2dIsW87rJ4pqdwzv6uLMGNfL.MLEUdaxGo0B8+7wr9CEqghZ7k8asY2nZw
wZYszrakplcCOEkPRawZJhTLgGKvRgOhkghanTqdSqU1BL8nsK9dAEopl2SX
4uc7KNbVjS1XapzJvpcJpYDIdA4Vx8l792Zk6VOW2UMbRXqQLyxE2h5DCpME
Ckjh0ZHJF7MW7XJMpCS244RBm5aGP.26E3FdO30IQ1AwTQiStlYPcB.UKOpT
ElGoZTlGU5Gudh+0ohz+se3G+0+72CtjgqSGFeq2c1O7o+wu7y+zCe9KO74+
5+8e9W1KXTEgDS9wR3ktpRWwKcFJbyz3wy71udMTzo4NNZJjBpUfy3ZEGPvm
PNFVLysGS1fiYR7dAHXcw3eJ2.ODoPyBPDktWHR2tLHlKpTGcmLsVXhJWPS4
w5C24hgdQhTdLPVfG97e6W9W+6G9zO8vm9wUEy7vm96+5W9xu8C+bMlcoJhC
i.DYA7ZqAcFVtDkrvkf2BFhTeBiEXZfkw4AV901t1Sezfr8hUCm5ypP0VgAp
uiqLqHQS2Ly2O1IhPB.+NXMXrzonDRCaonSkcajEnjshTZ65zR7gVRUR33wO
FP8h6iJO1GQkurM568x1jWcs7x3AHwN62xYgY5kVFaDBYPvBvFiBG+KY8pJf
GPY63xwcny4xazEJ3T47YplJmiG943gKY3IDyDpJb1lBezPhuzx9rn3LX1eO
BlvJwHTX5Cuq1NwhIl3Cxk1rmA8WfRPQbXTw0Kh0b4aC12XagJDmQsCd9dxh
FALgh.aas9V9X2BPX5dbXyuZ3.Gp1VQDCIY7kLO5hHFpoiHVp98X66HtWSaA
JK101ITarGMKQLbrr995pZqZUm6f79sRDkz3E0nTS.FY6mZgS96tE0JGjfHl
F1vrnGdSLU19Lp1X5v7qYTKyvEpCTzmFEF4Rh.PVgrsEeubgWD3.pkiGFF4F
dpAKeKbXVtkmOgtmwXd2yvlAwvrUHLCGfkuoxT0OrAFIMUVeh2lBVf9cl88S
li8hvqpAKCqrNX65G3I3t9wPLAzLUAO2nRs08c47l94rSN02ImUCk5pxGBB8
hI0yTUT1X3VkltwVuXEui1HpoGv0lcPmD9vJZOFddYvOiiM7qr8bF0hHp3rl
..U03HnVk9cp0xa9mVxAdGaeB0JQH34JCQrOZDTM0adHRqRX8PrGUPcGXkgp
0ETEhJMrjERUNEgzm0.PnpAZ6GElMVWySRtR196qQlcqnJDcV4NzU4TbCncS
jsSRin6QrDW3J2oyH0SQcOOicZEzLGpopaZn0D.JxjqL2pRFSzooxbufFAEE
67CT0adb8SQT7NhCi.sLsLAFlCQXrhR81ztXSd.Pfh8cEThckuwIoQQ268sf
4KZDMPBnTq5I5lmhrntgMh9GDDKm4PHqSQ9Qmv35cRaD6B+zCpjUkrhvy5bJ
xv7LPrZIiJmlVBkbe3Tul.H0DllW4gZ.Zcpp6Vg5uMPoI7VTbbkMp9X1bHNI
h3ie2bfhXqYoKmWNPzI4b6lHJ4hi5U0Jpgmjws3ErKzCrdSvKJhWtFpRdwSR
8Lhyp8j3l.Iwh0eP8+KOCh0NRZoZXD5rMqBCsNGFsRL4AAkS+h44fnIAbJcL
zLN6NSgXnrQP6b.zj6TuatawOS6b3yJ0bRYidF9bvyJbJtzwN6TjWr92ACBT
TCCOsuCFrj8FMPoyrkyMkjjgVcFR13nae8qKIEazYnXMYuNQX6cB.raPyRe7
I5NbFaQRPAy+fcGZdGNkJcCNCL7n6xwAKKigV2gw.2xGeo5SwHY0Xiz6Nzrr
prQcGU1Hicgl6FBMPxp0Fo0cvYokM2cjzsERo.IccHbVVEJrEKrqvOqrKzbG
Amkjj6NRmgRqQAdDRycG+Vg3cwAkNBMi1Ei86FRMfxJoq6Hz.JsfNzQ2I+Gp
z4uLLiHArCnd1QYmefzU.ulDYGStleVUYaZG1wkIqFX3jS3LwwqTsFW0ghKB
Cn32e.8BNAxc2CsdQWvefQ7+xQvZbx9gV7uLJ8RD0nRzY8uEjUC.YpMGj8ml
PRhB2yetkRQKw4XWu76Jz84p2B0Qt90RmmT9MulVm8hWqFWwCYW5ko6T+xuc
Gfv181cXRb+mDz.mds3V9kLLtkuqKb8lzxvQ1O+Qvzkgt7eRedZgCdSr5JXI
Pm0s+HEiJeEqjxG1Ms2XSaM1XvRVxwTFxYkv.bPIGCIHGyVkZv0jZl34NMjJ
cNkcApXxWQagBApbvrGdrYZTxGVA4i1MxW2ZnIl9Gc1FBK8NnguD87mdh5Cq
5Y5N0IzT3i.Pc9nB+oCTmnxIY63Hgf0Q0.tD8ye5.Q+npnekci9MsFB0o+Qk
cCNx6KobR7mN.cBMIFDTaMQKp5xvSzdh5TkfbLZMpAKC5fZOxQlwJXqQNHYj
mr5hobXoGoFsZOiHPZcq4VHY3ev56nRLcUtPSEqkjcxe5.H6TpdPKNAPQFFN
bGjdZGi5QRPNVsF5.kwkGjR6QO5Mg4XMH8Hyjq1SZNDIqGpsD8.6VbyxLWuE
QmlXvZ6pVTS+wvK02BKKIbvSDdj0tKOYz9Z2gmqc+ct4c2YQ2amz14iW7+fx
bUXF
-----------end_max5_patcher-----------