js object を使って jit.gl を構築する検討 #jitter #maxmsp

jit.gl はgl-core導入などもあり、pbrマテリアルやGPUインスタンシングなどの新規オブジェクトの採用もあり以前よりは今時な絵作りなどもしやすい環境になりつつあるようです。

しかし、そもそも論として3D向けのオブジェクトならアトリビュート・パラメーターの設定を大量にしなければならない割にデータ保存がめんどくさかったり、目に見えないCONTEXTを用いてオブジェクトを繋ぐ(パッチをほとんど繋がない)というMaxの常識から大幅はかけ離れたパッチング体験になっています。

それならjsオブジェクトGithub CopilotやCodeGPTなどを利用しつつ、jit.gl部分は全部自動生成すれば良いんじゃないかと試してみました。

結果上記のようなパッチが生成され、以下のような画像をつくることができました。

コードには

  • オブジェクトの生成・削除
  • オブジェクトのアトリビュート設定
  • オブジェクトの関数コール
  • オブジェクト同士の接続

が含まれており、Maxの基本的な操作は叶っているかなと思います。あまり整理してないのでご参考程度です。

JS code for js object

// Desc: Create a jit.gl.gridshape object and connect it to a jit.gl.handle object

“use_strict”

autowatch = 1;

inlets = 1;

outlets = 1;

// Create a new object

function erase() {

// Get a reference to this patcher

if(this==null) return;

var p = this.patcher;

if(p==null) return;

// Get the first object in the patcher

var obj = p.firstobject;

if(obj == null) return;

// Loop through all objects

while (obj) {

// Get a reference to the next object before we delete this one

var next_obj = obj.nextobject;

// Check if this object is the js object

if (obj.maxclass !== “js”) {

// Remove this object

p.remove(obj);

}

// Move to the next object

obj = next_obj;

}

init();

var create_msg = this.patcher.newdefault(getNewPosition(), “message”);

create_msg.set(“create”);

this.patcher.connect(create_msg, 0, this.box, 0);

var erase_msg = this.patcher.newdefault(getNewPosition(), “message”);

erase_msg.set(“erase”);

this.patcher.connect(erase_msg, 0, this.box, 0);

}

var index = 0;

function init(){

index = 0;

}

function getNewPosition(){

const numReturn = 30;

const xs = 150;

const ys = 30;

var x = Math.floor(index / numReturn) * xs;

var y = (index % numReturn) * ys;

index++;

return [x,y];

}

function create() {

var mytoggle = this.patcher.newdefault(getNewPosition(), “toggle”);

var myprint = this.patcher.newdefault(getNewPosition(), “print”);

var myworld = this.patcher.newdefault(getNewPosition(), “jit.world”, “TEST”);

myworld.setattr(“enable”, 1);

var myfps = this.patcher.newdefault(getNewPosition(),”jit.fpsgui”);

this.patcher.connect(myworld, 1, myfps, 0);

var myhandle = this.patcher.newdefault(getNewPosition(), “jit.gl.handle”, “TEST”);

myhandle.setattr(“auto_rotate”,1); // Same as the existing object

var mycamera = this.patcher.newdefault(getNewPosition(), “jit.gl.camera”, “TEST”);

var myNoise = this.patcher.newdefault(getNewPosition(),”jit.noise”,4,”float32″,512,512);

var myPwindow = this.patcher.newdefault(getNewPosition(),”jit.pwindow”, “TEST”);

this.patcher.connect(myNoise, 0, myPwindow, 0);

var myMaterial = this.patcher.newdefault(getNewPosition(),”jit.gl.material”, “TEST”);

myMaterial.setattr(“name”,”myMaterial”); // Same as the existing object

this.patcher.connect(myNoise, 0, myMaterial, 0);

myNoise.bang();

var myNode = this.patcher.newdefault(getNewPosition(),”jit.gl.node”, “TEST”);

myNode.setattr(“name”,”subnode”); // Same as the existing object

this.patcher.connect(myhandle, 0, myNode, 0);

for(var i =0 ; i< 1000 ; i++){

var myGridshape = this.patcher.newdefault(getNewPosition(),”jit.gl.plato”, “subnode”);

//myGridshape.setattr(“name”,”myGridshape”); // Same as the existing object

myGridshape.setattr(“color”,[Math.random(), Math.random(), Math.random()]);

myGridshape.setattr(“smooth_shading”,1);

myGridshape.setattr(“position”,[Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]);

myGridshape.setattr(“rotatexyz”,[Math.random() * 360, Math.random()* 360, Math.random()* 360]);

myGridshape.setattr(“scale”,Math.random()*0.01);

myGridshape.setattr(“material”, “myMaterial”);

}

mytoggle.bang();

this.patcher.connect(mytoggle, 0, myprint, 0);

//this.patcher.disconnect(obj1, 0, obj2, 0);

}

post(“initialized”);

入力したテキストを先頭から1文字・2文字・・・と増やしながら出力するJSオブジェクト #max7

[code]
"use_strict";
var tsk = new Task(repeater_function, this);
var s = "";

function text(val){

s = val;
var length = s.length;

tsk.cancel();
tsk.interval = 200;
tsk.repeat(length);
}

function repeater_function()
{
var index = tsk.iterations;
outlet(0,s.slice(0,index));
}

[/code]

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

JSオブジェクト用コード

[code]
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 &amp;gt; 0.5 ? d / (2 – max – min) : d / (max + min);
switch(max){
case r: h = (g – b) / d + (g &amp;lt; 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 &amp;lt; 0) t += 1; if(t &amp;gt; 1) t -= 1;
if(t &amp;lt; 1/6) return p + (q – p) * 6 * t;
if(t &amp;lt; 1/2) return q;
if(t &amp;lt; 2/3) return p + (q – p) * (2/3 – t) * 6;
return p;
}

var q = l &amp;lt; 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);
}
[/code]

引用元

RGB to HSL conversion

Max for Liveのデバイス内でトラック番号を取得 : #maxforlive

スクリーンショット 2014-05-11 2.35.33

目的

Max for Live のデバイス .amxd 内で自信 が挿入されているトラック番号を、jsオブジェクトで取得してみます。

jsオブジェクトコード

[javascript]
//init
"use strict";
inlets = 1;
outlets = 1;
autowatch = 1;

function bang(){
var api = new LiveAPI(this.patcher);
api.path = "this_device";
var pathStr = api.path;
var paths = pathStr.split(" ");
outlet(0,parseInt(paths[2]));
}
[/javascript]

解説

LiveAPIのインスタンスへ”this_device”を指定する事で、api.pathはLive Object Modelにおける自信が挿入されている箇所の絶対パスを返します (例えば “live_set tracks 2 devices 1” になり、.amxdのパスが2番めのトラックの1番目のデバイスと分かる)。pathをスプリットしてトラック番号をゲットできました!