SVGの背景を透過するサンプル jit.mgraphics × jit.gl.pix #maxmsp #jitter #gen

スクリーンショット 2014-10-17 11.57.59jit.mgraphicsで描画したSVGに透過色を持たせたい場合には、jit.gl.pixで特定の色を透過させる処理を書くと良さそうです。上の画像は、カメラのキャプチャにSVGの描画を載せたサンプル。棚がとっ散らかってますが、お気にせず・・・

jit.mgraphicsで背景黒にして描画

スクリーンショット 2014-10-17 11.56.39svgでピンクの丸を描画してます。ちなみにillustratorでSVGをつくりました。(左側に、ちょっと、余分なコードも入ってますがお気にせず。)

jit.gl.pix 黒を透過

スクリーンショット 2014-10-17 12.06.54厳密に言うと、黒に近いほど透過されるコードに成ってますが、とりあえず目的に適うのでオッケーです。

Code(シェーダ部分)


----------begin_max5_patcher----------
757.3oc0WssahCCD84juBK+LKxNAnj8s86.UgLItgoqwNxwbYaU+2WamKjvF
pnkVDqPJANy3wGe73gwuFFfWoNvKwnehVfBBdMLHvC4.Bp+c.dC6PpfU5cCK
46UqdFOpxjgev3geFLiyEiKfCn8fLSsuwimTRSI7B24EMZLoFVs0H3FyeJ3U
StK.KyEKcAbqliGgvXzi0NK2tAjV28LfdDrJHdznZzBlIcMHyWp4olpPGSlZ
mVTzL+qjI9ePFSZCuihR1FOSv+RCLQC4gLOlcA+C5Lb2ofqq0nZQxFEPv2w0
kfR1glAXVQQG3fNCworOq7AZ1nVHPVAQagz7cPy3SZQYZ6B0XWkN4xwxCymg
qL9VXyjeTEhnIN0GQmG6E.5CtWwSiNJD1s97TknZ5WfHiSF04AsuiBU5u4d4
gz.pJ3RPVn4kbogYpYbq4L9SrsByxgyH5a+IVJ+rCdv8p.btFxTRGI5MRGby
zs.Q8IAtmGWLdOjrhAFboccrsbES61AVI3cR0rI+Jknuo1Mc6YHlD1vLbCTQ
1HRaPgMEZPZ5MQbIyFi0koZkPzKTUV1MfkLadQJeOjYV6iUWoz5NTzrEfa0n
LHmWZ5iYX4k8Q5UTnaBa2hC8veuhD8KTTtGdAoyW003YxHFrNQaUgyVYXfpC
csLPEBJweXHwexX5zSKP79EINsPQTDtA+svvluL5qWI2.G9FDw3OqHNm30sI
d4axrqTDo2HQTvk41iO2eIizod8bR7UJjjajPtimhHUe9FTyIeV0Lt5zL0Kl
O7v0IlzjajXBRD8aPEIeVUzVYbpsYApukAxUJh2HMzt5tXQ7BO4RtjJfwj49
WWYt1jgjoi8rH.449KZOyb1GV+JUa0oMIK0+gksEudrz1+fAjssvsnsVxoNt
Fxx52xTUWFktdVp5N7h1s+nbldoTN5+OJ6bjdWP4nKkySteT4jOhLeev4ANW
8NbN5KfynGCOh3eVWa4zaq5n8I2R8jan9u2N8b2L0NOuE9W.Vv2VrA
-----------end_max5_patcher-----------

こういう微妙なコードをBlogに書いとくと、後で再利用しやすいのが良いですね。Max7だと、コードスニペット機能が充実するそうなので、楽しみですな〜。


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で書き出し直すと読めたりしました。

Continue reading