カテゴリー: Max

jit.movie @output_texture 1 で取得したGPU上の動画テクスチャを指定した解像度でアスペクト比を保ったまま描画：#max7 #maxmsp #gen

GPU上の動画テクスチャのアスペクト比と解像度を固定したい

スクリーンショット 2015-02-15 18.44.32
あのタグで待ってるをMax7に対応させようと改良しています。Max7化のポイントは、jit.movieから直接GPUに動画テクスチャを送る機能を使ったパフォーマンスアップです。

ただし、問題がありました。jit.gl.pixの解像度が、第一インレットに入力される解像度に固定されてしまうという点です。これの何が問題かと言うと、VJソフトは１６：９や４：３等の異なるアスペクト比や、HDやSD画質など異なる解像度を持つ動画を次々に切り替えて再生するので、そのままでは最終出力の解像度やアスペクト比も次々に変わってしまいます。横長の間延びした動画になってしまったり、SD解像度にHD画質の動画がひっぱられて解像度が落ちてしまったり。

そこで今回は、上記の画像のように１６：９の画面に４：３の動画を、指定した解像度で出すのが目的となります。

パッチ

スクリーンショット 2015-02-15 18.40.16

ポイントは、jit.gl.pixの第一インレットに解像度を指定するMatrixを入力する所です。これを使ってjit.gl.pixの出力を常に同じ解像度に固定します。また第二インレットに jit.movie @output_texture 1 で取得した動画テクスチャを入れます。この動画テクスチャのアスペクト比を保持するために、解像度を別途jit.gl.pixに入力してあげる必要があります。なぜならjit.gl.pixでは、in2に入力したテクスチャから直接dimを取得できないためです。param dim2 としてパラメーターを与えています。

ちなみに動画テクスチャの解像度をjit.movieから取り出す際に、dimメッセージで取得すると正しい値が取れないので、getmoviedimを使いました。

jit.gl.pixの内部

スクリーンショット 2015-02-25 23.59.09

in1に入れたマトリクスは、全く利用しません。あくまで解像度を固定するために入力しています。テクスチャのアスペクト比の調整は、右側のコードで行って、最終的にin2の動画テクスチャをsampleオブジェクトで取り出します。

結果

スクリーンショット 2015-02-15 18.40.21

指定した解像度とアスペクト比にする事は出来ましたが、まだ問題があります。上記画像を見ると、左右領域にゴミが残ってしまっています。本来ここの領域は真っ黒にしたいのです。この原因はjit.gl.pixの内部でsampleのオプションを@boundmode clampにしているためです。@boundmodeはいくつか指定があるのですが、他のwrapやmirrorでももちろん駄目でした。指定した領域にテクスチャが無い場合に単純に黒くするオプションが欲しい所・・・。自分で黒く塗るプログラムを追加するのが解決策になりそうですが。

スクリーンショット 2015-02-15 18.45.05

動画の縁まで色が付いていると、こんな感じになってしまいます。

続きを読む jit.movie @output_texture 1 で取得したGPU上の動画テクスチャを指定した解像度でアスペクト比を保ったまま描画：#max7 #maxmsp #gen

Cycling’74 Max7 勉強会 β #max7 #maxmsp #jitter

image06

先日 Cycling’74 Max7 勉強会（のβテスト開催）をDMM.make AKIBAの一角を間借りして開催しました。ちなみに急遽開催だったため、お呼び出来なかった方すみません。参加者は左から→@CO_CO_ / @ishicca / TY0004 / @raykunimoto / @nanagagatata + @mirrorboy

勉強会の内容

image04

半日かけてMax7の新機能を中心に、各々が気になる機能を好き勝手触るという無謀なやり方でしたが、結果的には皆で新機能に関する知見が共有できました。

image03

参加者の中ではBEAPとVIZZIEの扱いやすさが特に人気でした。サウンド・アートなどをされている神谷氏（@ishicca）。最近はデジタルを使わない作品が多いため、Maxを弄るのは久しぶりだったとのこと。

image00

チュートリアルをやるMaxレッスンの生徒さん。右側で実演される動画に合わせて、左側で実際にパッチを組んでいけるので、分かりやすい！

image01

チームラボでMaxを使ったサウンドデザインを担当されている國本氏(@raykunimoto) BEAP & Gen & Jiter を組み合わせようとしている強者。最近はGPU処理に興味があるようです。

image07

BeapやGroove~のTime Stretchをチェックするコバルト爆弾αΩのΣ氏（@nanagagatata）。写真には写ってないですが、monomeコントローラーがBEAPのモジュールで動くことも確認していました。

image02

自作コントローラー等を発表しているTanzvolk(@tanzvolk)の塩沢氏(@CO_CO_)。本日Max初挑戦との事でしたが、やはりBEAPの簡単さに驚いていた様子。Javaを使えるそうで、mxjにも興味があったようです。

新機能を触ってみて

 

  • BEAP / VIZZIE

    • BEAPはMSPの煩わしさが無しに簡単にシンセ組める
    • VIZZIEはBEAPとGUIが共通化されててお洒落度アップ
    • BEAP/VIZZIEの組み合わせで容易にオーディオビジュアルが可能
    • BEAPにMonome等のコントローラー連携パッチがビルトイン
    • 参加者には、とにかくBEAP大人気

  • Patch 復帰機能 / Clash Recovery

    • Max7がまだ不安定だったので、大活躍（笑）

  • Reference

    • サンプルがコピーできるように
    • 新機能は、Max7からと書いてあり親切

  • Tutorial

    • 動画をその場で見ながら１ステップごとにつくれるので初心者も安心
    • BEAPとVIZZIEに偏っており、３時間くらいやると終わってしまうので、今後拡充されるのを期待

  • Snipet

    • 便利貼り付け機能

  • grove~

    • 待望のTimeStretch / Pitch によりAbleton Live的な事がしやすく

  • jit.world

    • jit.gl は事前準備(jit.gl.render / jit.window / qmetro 等々)が結構面倒臭かったが、スグにGL環境を用意出来るようになった。

  • playlist

    • 動画や音声ファイルをパッチにドラッグドロップするだけで再生・ループ・ジャンプ・繰り返しなどが簡単にできてよい。

  • GUI

    • 音や映像の長さでデータを探せるのが便利。
    • フラットデザイン・プルプルコードになって、今までより気持よく操作できるとのご意見も。

Gen

image05

GenはMax6から入った機能なので、Max7の新機能という訳ではないのですが、参加者のリクエストに答えて少し解説しました。

  • jit.gen / jit.pix / jit.gl.pix の役割の違い

    • jit.gen と jit.pix は CPU処理 / jit.gl.pix はGPU処理
    • jit.gen は N次元 / jit.pix と jit.gl.pix は ２次元画像処理

  • jit.gl.pix は裏でGLSL(OpenGL Shader Language)として動作

    • jit.gl.pix は GLSL でいうpixcel shader / fragment shaderに相当
    • jit.genを使えば、vertex shaderっぽい事も可能
    • jit.gl.shaderを使えば、生GLSLも使える
    • jit.gl.pixで書いたシェーダは、exportcodeするとopenFrameworksやWebGLで使える

  • MSP処理をGPU上で行いたい（参加者の要望）

    • gen~ はCPUのコードとしてコンパイルされるので☓
    • オーディオ信号をjit.matrixへ書き込みjit.gl.pixでGPU処理してから、再びjit.matrixへ戻してMSP化する方法は出来るかも。今後試したい。
    • jit.gl.shaderのサンプルの中に音処理系もあったような・・・

勉強会をやってみて

Max7は、GUIの大幅な変化に目を奪われますが、特に初心者/久しぶりな方々でも取っ付き易く学んだり遊んだりできる機能が増えているという印象でした。とにかくBEAPがヤバイ楽しい。あとは、みんなで好きに弄るスタイルの勉強会であれば、余力で開催できそうなので、今後も機会があれば続けたいです。

text by @mirrorboy

 

maxurlのサンプルを試す #cycling74 #maxmsp #curl

スクリーンショット 2014-09-11 02.43.36
最近のアップデートで登場したcURLのMaxラッパーであるmaxurl。ついにMaxがインターネットと繋がる！と期待が高まり、勉強がてらサンプルコードを弄ってみました。

まずmaxurlのヘルプパッチを見るのがオススメです。タブになっていて、いくつものサンプルがいじれます。上記画像はヘルプパッチの良いねボタンサンプル。良いねボタンを押すとサーバー上のいいねカウントが１つあがる。

更に詳しい説明が書いてあったのは→Use MaxURL to Create a Realtime Instagram Collage

MaxでWeb APIを扱う２つの方法

どうやら、Maxがインターネッツとのリクエスト・レスポンスを扱う方法は二種類あるようです。

  1. maxurlとdictを使うパターン。JSONでクエリを生成し、それ以外はMaxらしいパッチングで行う方法
  2. jsオブジェクト(javascript)を使うパターン。XMLHttpRequestで行う方法

それぞれの方法についてCycling74のフォーラムにいくつかサンプルパッチがあったので試してみました。

MaxURL Weather Report

スクリーンショット 2014-09-11 02.12.47

Maxから天候を取得してみようというサンプル。このサンプルは、maxurlとdictでAPIを使う方法。

天候取得クエリ

[javascript]
{
"http_method" : "get",
"url" : "api.openweathermap.org/data/2.5/weather?q=Tokyo,jp",
"response_dict" : "data1",
"parse_type" : "json"
}
[/javascript]

元々のサンプルはロンドンの天気を取得していたのですが、東京の天気は、”London,uk” → “Tokyo,jp”と変更したら取得できました。

MaxURL SoundCloud

スクリーンショット 2014-09-11 02.19.12

MaxからSoundCloudのAPIを使うサンプル。SoundCloud Developerの登録が必要です。例えば “livetune”と検索すると、ヒットしたURLがumenuに登録されます。このサンプルは、jsオブジェクトでAPIを使う方法。

ニコニコ横断検索API

サンプルにも慣れて、そろそろ自分で一から試してみようとAPIを探してみると、検索キーワードに関連したタグを返してくる”タグ検索API”というのを発見。将来的に”あのタグで待ってる。“に組み込んだら面白いかなと思って試してみました。

[javascript]
{
"http_method" : "POST",
"url" : "http://api.search.nicovideo.jp/api/tag/",
"post_data" : {
"query" : "Free!",
"service" : [ "tag_video" ],
"from" : 0,
"size" : 5,
"issuer" : "apiguide",
"reason" : "ma10"
}
,
"response_dict" : "data4"
}
[/javascript]
こんなクエリーを投げると

スクリーンショット 2014-09-11 02.34.46
レスポンスが帰ってきた！しかし、応答のBodyに対して文字列がエスケープ？のバックスラッシュが付きまくっている！！！Maxで消す方法がわからなくて、データを利用できなかった。

取得できたタグを見ると”Free!のためなら死ねる！”とか面白いですが、タグとして抽象度が低いのは使いづらいかも？！maxurlの使い方は未知数なので、今後も情報収集していきたいです！！！！！

Cycling74 Max で GLSL1.2 を使ったシェーディングをはじめよう #maxmsp #jitter #glsl

スクリーンショット 2014-08-04 16.08.30

シェーダがあるでは無いか！

Maxを使ったインタラクティブアプリケーションの開発は、音や音楽とのインタラクションや、Ableton Liveとの連携、コンパイルしないで変更を加え続けられるリアルタイム性など、他には無い独自なメリットが色々とあると思います。

しかし３Dの描画に関しては、OpenGLの対応バージョンが2.0止まりな事もあり、openFrameworksやUnity等の開発環境と比べると少し見劣りします。とはいえ、プログラマブルシェーダを利用する事ができるので、可能性としては例えばSIGGRAPHの論文を実装して最新のレンダリングもできるのではないかな・・・！？

そこで今回はMaxの３D描画を強化するべく、jitterに関するGLSL周辺の調査とサンプルプログラム試してみました。

Maxにおけるシェーダについて

  • JXSファイル：XML形式でMaxとやりとりを行うパラメーター等を記述するファイル。またGLSL等のシェーダをこのファイルに読込むか直接書く事でシェーダを利用する。.jxsファイルで保存したらjit.gl.shaderとjit.gl.slabでreadして使う。
  • シェーダの種類：Vertex Shader / Geometry Shader / Fragment Shader が利用可能
  • シェーダ言語：GLSL1.2 / CG / ARB
  • 豊富なサンプル：Mac版のフォルダパス→ /Applications/Max 6.1/Cycling ’74/jitter-shaders Geometry ShaderやGPGPU、Audio処理用のシェーダも。ジオメトリシェーダを使う際は、プリミティブの種類がシェーダと合ってないと利用できないので注意。
  • Cycling74 Forumでは、GLSL1.5（OpenGL3)そうとうのシェーダーが使えるという記述がありましたが、私の環境（Macbook Pro Retina / Mavericks)では利用できませんでした。
  • jit.gl.pix：フラグメントシェーダのみに特化したオブジェクト。jit.gl.slabと互換。

jit.gl.pixでは使えないバーテックスとジオメトリが鍵になりそうな気がしますね。今後の記事でサンプルファイルなどを紹介できればと思います。

JXS / GLSLサンプルコード

[html]
<jittershader name="mrr-test-simple">
<description>
test
</description>

<language name="glsl" version="1.2">
<program name="vp" type="vertex">
<![CDATA[

#version 120

void main(void)
{
vec4 clipCoord = gl_ModelViewProjectionMatrix *gl_Vertex;
gl_Position = clipCoord;
gl_FrontColor = gl_Color;

vec3 ndc =clipCoord.xyz / clipCoord.w;

gl_FrontSecondaryColor = vec4((ndc *0.5) +0.5,1);

//gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}
]]>
</program>
<program name="fp" type="fragment">
<![CDATA[

#version 120

void main()
{
//gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
gl_FragColor =mix(gl_Color,vec4(vec3(gl_SecondaryColor),1.),1);
}
]]>
</program>
</language>
</jittershader>
[/html]

上記画像は、jit.gl.shaderに上記JXSファイルを読み込ませて、jit.gl.gridshapeとjit.gl.multiple で作ったモデルに対してアタッチして生成した画像です。glsl部分は、外部ファイルを読込む事も可能です。

参考サイト

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アトリビュートを指定する。２．でdictオブジェクトとデータ共有が可能。
  2. dict も第１アトリビュートに１．で指定した名前を設定。
  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