UniOSCとMaxを使ったOSCの送受信 #Max7 #Unity #OSC

UniOSC購入&起動

UniOSCをUnity Asset Storeで購入し、UniOSC.Mobile Sceneを起動します。

iOSアプリをインストール

Build SettingをiOSにし、Xcodeでビルドインストールします。iPhone6sで実行すると画面レイアウトが崩れますが、とりあえず気にしなければテストはできます。また私の環境だとなぜかIPアドレスがおかしい値になっています。が気にしなくても動きました。OSC OUT側のIPアドレスはMaxが動作しているMacやPCのIPを入力しておきます。

MaxでOSCのRecieve Sendパッチ作成

Max側は、OSCを送受信ですがUDPのオブジェクト使って準備しました。udpsendのIPアドレスにはiPhoneの設定画面で確認したIPアドレスを入力しておきます。また送信側のメッセージにはOSCのフォーマットに合うようにスラッシュをprependしておきます。(そうじゃないと確認できない。)

通信確認

MaxのSender側のスライダーを動かすと、UniOSC appのTraceに受け取れた事が表示されます。逆にUniOSC app側のSendボタンを押せば、Max側で受信を確認できました。


正確なメトロノーム #max7

揺れの少ない正確なメトロノームをつくりたい〜

スクリーンショット 2016-08-22 1.24.24

Maxの標準のmetroは精度が悪いと言われております。計測したわけでは無いですが16部音符で再生すると結構気になるくらいグルーヴ感があるようです。より正確なメトロノームを生成するにはMSPを使うのが良いとの事で以前某楽器メーカーの方に教わった方法を実装してみました。

サンプル


----------begin_max5_patcher----------
746.3ocyWkjaaCCEcs7oPfqcBDE0XAZuHEEAzRzNL0hxkjx0NAw.EdSW0yPG
1UfbAJxsQ.sWiJRY033JWKKGolMhfeyg26y2ev2Lv.LJcAQ.Leg4qMMLtYfg
g1jxfwl4FfD7hnoXgdY.F48oitBLr7mjjERsYbrPhkYBSI9sjz4Dd0JXYIoY
xoDod61arNCKitjxlbAmDIKudD7bqglNt5AnkqZv19bKy2rYOkGib4LR4F.f
gl.JqX6UqfFqwRA9Nyaq6mx185ExkS0mB.nLb6fApOCOMWvzTbbBQHLg0yc3
g3NJHTM3a2.pWGmgN0RZ3SBokoSlTr81wLGXflSNUe+C7mg43DhjvufvviJw
m09X89drgnNj3GRvqD6wb5bxQq3gtVORxGdZRd+NTxGkljPJt2c8B+7tu8qu
9i7O7870eIe8GyWeW95Oku9970etd2g09cG1taoQJCEPnsbFiSYxw3Hx1OsJ
aB50Za5c9WdE2NTZPtNFGs5nIJzBo4XXP4ye02Zk1+Oyi4wN53cHzWQm.cNr
.2VlIyo+imO4r2kTt0Iu8r6eN+pWtxz57VxWaWzCx2+MgEzIL7zZoMJr+E3m
oXsaaossNosG5zncP+SaR7DxpV1V1l7wNNGl0ivrIpxT5wZ4t+y01Tf1gcYa
JHu9ODe1kXQJeUqxkuwo3qE79gmlf2oCE7ixjxz1xOjMZOO50KsqsJcXG9xh
kRdFs5BTyzlGyIuKivhVdz7N.ssX2psUrZSS25yALkx18Ocpgox9icDhzLdT
EJpZ027AjFSDRJCKoEO+OrHuGslKowwD11QrwTgJHVSEqZeQdRgie+AGmF.m
cvbWhGTSvipVXegml.Gm9CNdOyvieSjOg8GdBZh+oGwSXSvS+Et2nnqdCMp+
AyggSayMWV4.Oa1bBWr4L0PonX4Uo5Rh9C0Sorxo5dK.bxbZ05czVv7hBhxh
pgY7xBTK7JaNAjjFS3rhZsp5XCT27sC9MfZHW6C
-----------end_max5_patcher-----------

HSL to RGB 変換 JS オブジェクト #max7

JSオブジェクト用コード

function rgbToHsl(r, g, b){

	r /= 255, g /= 255, b /= 255;

	var max = Math.max(r, g, b), min = Math.min(r, g, b);

	var h, s, l = (max + min) / 2;

if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
outlet(0, h, s, l);
}

function hslToRgb(h, s, l){
var r, g, b;

if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1; if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
r = Math.round(r*255);
g = Math.round(g*255);
b = Math.round(b*255);
outlet(0,r, g, b);
}

引用元

RGB to HSL conversion


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ソフトは16:9や4:3等の異なるアスペクト比や、HDやSD画質など異なる解像度を持つ動画を次々に切り替えて再生するので、そのままでは最終出力の解像度やアスペクト比も次々に変わってしまいます。横長の間延びした動画になってしまったり、SD解像度にHD画質の動画がひっぱられて解像度が落ちてしまったり。

そこで今回は、上記の画像のように16:9の画面に4:3の動画を、指定した解像度で出すのが目的となります。

パッチ

スクリーンショット 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

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

Continue reading


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

    • 動画をその場で見ながら1ステップごとにつくれるので初心者も安心
    • BEAPとVIZZIEに偏っており、3時間くらいやると終わってしまうので、今後拡充されるのを期待
  • 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 は 2次元画像処理
  • 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のヘルプパッチを見るのがオススメです。タブになっていて、いくつものサンプルがいじれます。上記画像はヘルプパッチの良いねボタンサンプル。良いねボタンを押すとサーバー上のいいねカウントが1つあがる。

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

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

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

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

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

MaxURL Weather Report

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

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

天候取得クエリ

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

元々のサンプルはロンドンの天気を取得していたのですが、東京の天気は、”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”というのを発見。将来的に”あのタグで待ってる。“に組み込んだら面白いかなと思って試してみました。

{
	"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"
}

こんなクエリーを投げると

スクリーンショット 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との連携、コンパイルしないで変更を加え続けられるリアルタイム性など、他には無い独自なメリットが色々とあると思います。

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

そこで今回はMaxの3D描画を強化するべく、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サンプルコード

<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>

上記画像は、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アトリビュートを指定する。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