ピクセルシェーダ jit.gl.pix による光るリングの描画 : #jitter #maxmsp

スクリーンショット 2014-05-20 19.25.52 jit.gl.pix を使ったシェーダーによる画像描画や処理を少しづつ学んで行こうと思います。今回は以下の参考サイトにあったコードを参考に光る輪っかを描画してみました。

コード

スクリーンショット 2014-05-20 19.26.28

  • snormで -1 ~ 1 に正規化した座標を取得
  • length によって原点からの距離に変換
  • !- 0.5 とabs により半径0.5の円周上の最も近い点から座標との距離に変換
  • !/ 0.02 により、座標における光の量を決定(半径0.5の円に近い点ほど、数値が高くなるため光が強くなる)
  • out 1 に光の強さを送る。自動的に vec 4 (R G B A)に変換されている

参考サイト

wgld.org – 時間経過とマウスカーソル座標

jit.gl.lua 内でjit.qt.mov + jit.gl.videoplane を使ってテクスチャを描画 : #maxmsp #jitter #max6

スクリーンショット 2014-05-12 17.55.48

 

Lua内でJitterのオブジェクトを使ってテクスチャ描画しよう!Lua以外は、jit.gl.* 系 で使ういつものパターンです。

結果

スクリーンショット 2014-05-12 17.54.52

解説


local mov = jit.new("jit.qt.movie");
local plane = jit.new("jit.gl.videoplane",this.drawto)

jitterのオブジェクトをインスタンス化します。jit.qt.movieは、pngを読み込みテクスチャに変換できます。jit.gl.videoplaneは、テクスチャを使って描画をしてくれます。


mov.adapt = 1
mov:read("cobalt_logo_sun.png")

ここではファイル名を指定して画像を読み込んでいます。luaにおけるオブジェクトのメソッド呼び出しは、 :(コロン)でプロパティは.(ドット)のようです。

 


local frame = jit.matrix(4,"char");
mov:matrixcalc(frame.name, frame.name)

plane:jit_matrix(frame.name);

jit.gl.videoplane へ jit.qt.movieのテクスチャの流し込み方になります。直接テクスチャを渡せれば良かったのですが出来なくて、一旦、jit.matrixへテクスチャを描画 (mov:matrixcalc(frame.name,frame.name)し、それをplaneへマッピングしています。jitter系のオブジェクトの受け渡しは、名前でやってるのが理解できます。(内部的にはポインタ渡してるのかな?)

コード

autogarbage = 1
autowatch = 1
gc = 1

local mov = jit.new("jit.qt.movie");
local plane = jit.new("jit.gl.videoplane",this.drawto)

function scriptload()

 mov.adapt = 1
 mov:read("cobalt_logo_sun.png"); 

 local frame = jit.matrix(4,"char");
 mov:matrixcalc(frame.name, frame.name)

 plane:jit_matrix(frame.name);
 plane.blend_enable = 1;
 plane.blend = "alphablend";

end

local rotate = 0;

function draw()

 plane.rotate = {rotate,0,0,1};
 rotate = rotate + 2;

end

jit.gl.lua の勉強は参考文献が少なくて中々はかどりませんが、jitterオブジェクトをガンガン使えるようになると、また世界が広がりそうです。(テキストのコーディングが増えたら、oFとかUnity使ったら良いんじゃないかという話にもなりそうw)

jit.gl.lua の出力に jit.gl.pix をかける : #maxmsp #max6 #jitter

スクリーンショット 2014-05-08 23.44.12

jit.gl オブジェクトのTIPSです。表題の通り、jit.gl.luaの出力にjit.gl.pixのエフェクトをかけたかったので、やってみました。jit.gl.luaのテクスチャ出力をゲットするのが少し難しかったです。

やり方

  1. 一旦 jit.gl.node へ jit.gl.luaを描画。※ jit.gl.luaの出力から青線( gpu上のtexture? ) を直接取得できなかったためです。他にやり方はありそうですが・・・
  2. jit.gl.node のアトリビュート @capture 1 にしておくと、第1outletからtexture出力(青い線)
  3. jit.gl.pix でテクスチャに画像処理
  4. jit.gl.videoplane にテクスチャを貼り付け
  5. jit.gl.render で jit.gl.window へ描画

補足 – Syphonを使う場合

jit.gl.*の描画をSyphonへ送る場合も、テクスチャかマトリクスをjit.gl.syphonserver送る必要があるため、上記の方法でluaで描画したtexture取得すると良さそうでした。jit.gl.renderから直接@matrixout 1 / @capture 1などしてマトリクスかテクスチャ取得出来た気がするけど、何故か上手くいかなかったです。

jit.gl.videoplane 透過PNGを扱ってみる

スクリーンショット 2014-03-19 12.35.26

Jitter の  jit.gl.videoplaneで透過PNGを使うときのポイントです。上図では、2つのjit.gl.videoplaneを利用し同一平面上に透過PNGを重ねて表示しています。

ポイント

  • blend_enableをチェック。チェックをしないと透過されない。またblend は alpha blend に設定。
  • 透過PNG同士を重ねたりしたい場合は、depth_clear をチェック。

blend_enabled 例

スクリーンショット 2014-03-19 12.35.36

左側は blend_enabled をチェック。右側はblend_enableをOFFにしています。右側は透過処理が出来ていない事が確認できます。

depth_clear 例

スクリーンショット 2014-03-19 12.43.32

depth_clear をオフにした状態です。上手く重なり部分の表示が出来ていない事が確認できます。重なり合う2つのjit.gl.videoplaneに対して depth_clearを指定して置いた方が良さそう。

サンプルパッチ

スクリーンショット 2014-03-19 12.35.41

このような設定はOpenGLが分かって人にとっては基本的な事のようですが、いきなりJitterのglから入ると謎すぎる!jit.gl系扱う時はOpenGL1.0~2.0のテキストで一旦 OpenGLのお作法を学習した方が理解が早そうです。

jit.qt.movie で動画を1度最後まで再生し、その後 指定区間をループ

スクリーンショット 2014-03-16 21.20.49

@loopreport 1 にしておくと、再生終了時に jit.qt.movie の第2インレットから loopnotify bang が出力されるので、そのbangを使ってlooppointsを指定すれば、実現できました。looppointsは、動画をread する都度[ 0 最大値 ]が再設定されます。設定する値は QuickTime time valuesとヘルプパッチには書いてあるのですが、単位がわからず・・・

Cycling74 Max ENTTEC DMX USB PRO を使って1ch LEDライト制御サンプル

スクリーンショット 2014-03-10 23.36.06

ENTTEC DMX USB PROを使ってLEDライトを制御する期会があり、dmxusbproオブジェクトを用いて、まずは簡単な波のように光るサンプルから試してみました。dmxusbproはサンプル版だと2chまでしか制御できないので注意です!サンプル版で3ch以降にデータ送っても、特にエラーコードなども出ないので、気が付かないと時間が無駄になります。結局わたくしは、2ch以上制御したかったので、10ユーロ(今だと1500円くらい)で購入しました〜

光った!

参考Web

Max6 jsuiオブジェクト mgraphicsクラスを用いた描画メモ

スクリーンショット 2014-02-28 18.24.06

Max6のjsuiオブジェクトで背景透過のUIをつくるときに使えるmgraphicsの使い方をメモしておきます。

クラスリファレンス

http://max-javascript-reference.tim-schenk.de/symbols/#gsc.tab=0

初期化

//mgraphics initialize
mgraphics.init();
mgraphics.relative_coords = 1;
mgraphics.autofill = 0;

描画

function paint(){
mgraphics.set_source_rgba(1,0.5,0.5,1);
mgraphics.ellipse(0, 0, 10, 10); // y座標は、上向きが正の方向なので注意
mgraphics.fill();
}

paint関数の中じゃないと、mgraphics: no jgraphics context というエラーが出て描画できないようです。

描画命令

refresh();

枠線を消したい

cmd + i で出てくるインスペクタのborder を 0 に設定

Cycling’74 Max マンツーマン・個人レッスン受付中!

Max6 logo

初級〜中級くらいまでの方向けにCycling’74 Max / Max for Live / MaxMSP / Jitter 等のマンツーマンレッスン・授業・先生・講師を行います!困っている方いらっしゃいましたら、是非!

対象

  • Maxを購入し1〜数回触った後に、HDDの肥やしになっている方
  • シンセサイザーやパッチのアイデアがあるが、実際にパッチングの手順が全くわからない方
  • 一人でパッチングするよりも、誰かに聞ける環境で作業をしたい方
  • 学校や大学の課題・研究でMaxを使う必要があり、困っている方
  • Max for Liveで音と映像を連動させたライブをしてみたい方
  • 授業形式や自習形式よりも、マンツーマンでMaxを勉強したい方
  • openFrameworks / Processing / ActionScriptとの連携をしてみたい方

受付・詳細

レッスン詳細

問い合わせ

info@mirror.boy.jp

Cycling74 Maxのjsオブジェクトでツマミを回した時に、保持している値をオーバーライドした時だけ値が変化するアレ

Override

表題の通り、Abletonとかで出来るアレです。アーギュメントの1番目で初期値、2番めでどれだけ近づいたら変化するかを設定可能です。

値を変化させる条件は、現在の値とノブで入って来た値の距離が小さい場合と、値が変化し始めてから、ノブを回している間です。Taskオブジェクトを用いて、タイミングによる制御を実現しています。

GIFアニ作ってみたけど、開始地点と終了地点がわからないから、分かりづらいな・・・


"use strict"

this.autowatch = 1;
this.inlets = 1;
this.outlets = 1;

//init with argument
var currentValue = jsarguments[1] || 0;
var maxDistance = jsarguments[2] || 3;
outlet(0,currentValue);

var task = new Task(onTimerHandler,this);
var taskCount = 0;
task.interval = 500; //ms

function onTimerHandler(e){

    switch(taskCount){

    case 0 :
        taskCount++;
        break;
    case 1 :
        taskCount = 0;
        task.cancel();
        break;
   }
}
onTimerHandler.local = 1;

function msg_float(value){

    var delta = Math.abs(currentValue - value);

    if( task.running || delta < maxDistance) {

    currentValue = value;
    taskCount = 0;
    task.cancel();
    task.repeat(2);

    }

    outlet(0,currentValue);
}