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


<pre><code> ———-begin_max5_patcher———- 2131.3oc0as0bahCE9YmeEL7rWWciKtO0ceYeY2m1Y1YmocGOxFEGkhAOfbR 51o+2WcAvfMXtDfjV2Dhj.z47oycI+86VXuM9EVps0Gs9r0hEe+tEKzco5XQ V6E1GnurKjlpuM6H1ywaezdoYHA6Egt6izce0BrR9+7gtONRjx+OlZXHZEHq 6iTwtG3Q62jv1ILSrKdsbXKGO2UNKksTMPfU.q+M6YhOIBYBw2NxLOfscwP7 .8zKIoewAjO0QmNvijOglhQm6z7dz8BKQkQzC5Wr8ulvog1pA9wc2o90xNBJ 2GFKe84S+wDVJKRPE73nRrouquhyfNtpKfreUvIcGu7gdpGF64ngMP63kj9n B6kV1aoQ6qE7HdETOMQhGBVxFVDcan9U.pCXg0Brn2.fEBFGf0yY83Cr9+7B rdNPCv57ZAV.X7AV2eB.1dXDjfFeHx4cID0fKjSQZmHYWz9RFrGkLvDar3Rb 5fKkkkPzl9iZAYjc2ARm4.HSjSHyJ8o8e7ie5IN64eS9RFJDhVqMIBQ3tAg0 CQ8wy73JqcfklR2ytBi1yDuVDBhHp3UP.hFgflK98NtEr2aVbKMI.YIgmWND N.Lw0YERBJ9ZoFWz.CkC6TKj.d6fjzACIHGMJ3BLPB4JHoLeS5gsDvbv2Bqs xOCQR.Zhc.pYaha6RBZ2XKOesdICbOPH7bfPxXmNxhBTVS1rKgQMld6OfgQq KIm.M4DM.cGnaOPH3rXrMkodiJTXvFTxjiLQhN.irPxalQ1cwGNHCt9JT4u9 6e2RJuDX8AKZD+fN3a4eGjPe1RDa8HWrQ1YBuhqo6o6XWJZmijHxMQRSPP5H hHqgl3iJGMex9sZyJEujRvGx6MyvTSvmF5FjllAILtnf0Do8sQBm2cHwW1d5 XfxtyGr9RTgnT9sExiX6hOEItL3p9.V4A4XPqdH2Pd2gVJ8qAHyn0abbAlJU 0SYF7aFJr8jPbVVnY+zNnhbj5je55rwh.8wyyXGih7yfiRIeccsIf99DkRkq 054wuGnBYVTA1ExkYXK8wrKjQSpE0v2B0b.NJfJqfsPfFCUBPcSc.R7GG8gr Q1dZaVIMfSgFBwGX310uZMDB9sQCQyUrDKUY9D8e8Vg.mCM033DA6cLXD33D YZYBkkjgFYvg7A3grmXIoJWfmeOKroGOVp6EkdDEF9Xr9E4trnKdjoKXQWIr m34OuWQuzDIbIjX0oDCQ9huqsYP451c4OZQ5fl.Y8MtP77MRSkzcjKw6Ci28 UVPIoeIDKSxfGUtPsUFNfcO8TnXS8l9pNddLj0NXsX8B68I7f3HEQT4IUcmO c4wJ.qvL56HhdrlGNUxGmR2RSTvZlFLJePQbbX0gJVIkp.lnbXBtgXQfhWJ+ vwDtIXmh9L077gzcIwggUdUlQdplQBjK16XOyCDOTwPlZD4syOluDXWfQA78 rTQ09Dz8oU6oxNtUVJrrtck9ukNdU87vXZfwgz4AaPhnIGh.8ZH1TyB3k155 f8tqz5KSL0o32rx+sbEtH23Xlh1.ASM0XeaLIq7wlfCbtzW2.fDbiPBnSPRt ecsb0HBFUye+xb3EaRiOkrisQ5amZAMeVZcjJU2VZc43.8G437.IoxEeKKY1 kVGhehsQF7Q4Z6eclJ3AKBaVtVa1SPyEU4mt85UyqUfFWrPuCjeMSZmDfUkR AznDbckquOprfdHed16fZIuAigZ9PMd8nfQVKa0KyNiUUVRZnVviJ7U94yKn WbiOvCBp5axXNOU4bv3FtSKY8kjqgTpmlIuin44Fls926JGKkcJ8IVvF4THE u2PERaJxH3MBQkCC70FvS6AT0in.pkHtwj2zjJCLbKMLKv2hmslfMt6LHNQE LHuN09sWP1lSM1ahSG5QtX0wm4QAwO2xQc.TbBGfXWyNdVlmpEGz2tm4v3T6 S08cHE1mDCQiWhgJ.5v9D5wG36RkA+gHVdt9CoNJlLDcLhC3NrwekqucSnRe Jnz3tuwA7chUpsF9VZBXSHg9lZp6ZRoSUbvZqNVeNm.fwaIVwIp5jqtN7M4F q2+eHfz9BqZhjJWzjuoWXWdqCFPO1TFRqEDnidFXG1dQt00d5XFtIzl1FL0N VLrRTVri53gt+W32amwfTZ.8vJokGdv+7m+g0mdkho4aSnYy1gdcX+lUUInr .Z1OYcmOZs1k5glr+7rCqOoPin.Vx.2RLiZdtS8r8te.aypyalblRg+Devm9 XWnQjYv66NY8nVcSE6jY+9vrBGly7YtmbemgdZrgSCbn4hR3gdtqlGoAdtLw lLP5pDZbpjnRCYyn3lR2zUYxXefGbLVZyHM+zy4q0mPtq7TWcAmaddptLymq Vh6LO.6.O.w8jGxHZesoA0AvHu0DvApS7U6b.oENX7nG0t1YgZgdvj9gnPhm dmjVahhxEVzZJPT0xMrMNvqmb.1bN.b0LR4VSgTcWzLUlcmIYB01V1tkBP+P TY5VZo.GhwRAoTyI.SIdckGfcmG7QtFhFZ3g0nyMmBdXcWrU.FlEahaYqcpV SktYaVWfylfMtC3IFOejSWnGDX9z6kYtagayNj27ROsI8bgwpImdZySi5qqy bROs52vY9nmN4GC0S6UN5nGvlCzY4VSgE2tr.2SCtPWzJr7eHe04fPefhx3B cqovpaW78MigXJmIu17ALeZMWLUiiWU02.KseTmJdUml0WBbB3.heFMiqvA3 IgCfdiAGLhziyDfnYYMj8ELq.QQShkKHXLxLdDoGRWnm4y0TWB0hLizSWh7C MajCpSRO9yaUIZMRT77ROshOdyK8zVfJPmAYuJqpMka0p8JSwIu3jmpH9KNw oWbZSu9jl1zoLUNO+3t+GFAcTEC ———–end_max5_patcher———– </code></pre>

 

Leave a Comment