Thijs Pothoven

Is there any way to make jsui more responsive to the mouse while dragging?

It's slower than other max ui objects like multislider.

also it's not the drawing speed, because when you input mouse data from mousestate it updates just as fast as a multislider. So i think the mouse input somehow, somewhere gets throttled.

slow-event-speed-with-ondrag-in-jsui

slow event speed with ondrag() in jsui

Sean Wilson

Anyone know how to get the number of inlets/outlets of some object by reference through an API? I can't seem to find anything digging through the docs. Seems like an obvious API to expose, so hoping I missed something.

The only way I've found to do this is an insane waste of compute (similar method works for inlets)

get-inletsoutlets-of-object-from-js

Get Inlets/Outlets of Object from js

hal bay

 function on a clip with notes in it. I want to make use of filtering functionality through dict argument as explained in the docs.

var filtered_notes = clip.call("get_all_notes_extended", { return: ["note_id", "pitch", "velocity"] });

post("filtered_notes", filtered_notes, "\n");

var notes_raw = clip.call("get_all_notes_extended");

Screenshot 2023-09-16 at 14.18.04.png

As seen in the screenshot, "notes_raw" has expected values, however "filtered_notes" is 0.00 for the same clip object. So filtering with dict object with return key, as explained in the docs, is not working for me.

Edit: I also tried code below after learning about Dict objects of Max. However, it is still returning all of the keys like 

var note_filter = new Dict("note_filter").set("return", ["note_id", "pitch", "velocity"]);

var filtered_notes = clip.call("get_all_notes_extended", note_filter);

From documentation for get_all_notes_extended: 

"It is possible to optionally provide a single [dict] argument to this function, containing a single key-value pair: the key is "return" and the associated value is a list of the note properties as listed above in the discussion of the returned note dictionaries, e.g. ["note_id", "pitch", "velocity"]. The effect of this will be that the returned note dictionaries will only contain the key-value pairs for the specified properties, which can be useful to improve patch performance when processing large notes dictionaries."

I am trying to make use of new "get_all_notes_extended" function on a clip with notes in it. I want to make use of  filtering functionality through dict argument as explained in the docs.

I tried code below:

As seen in the screenshot, "notes_raw" has expected values, however "filtered_notes" is 0.00 for the same clip object. So filtering with dict object with return key, as explained in the docs, is not working for me.

What am I missing here?
Thanks!


Edit: I also tried code below after learning about Dict objects of Max. However, it is still returning all of the keys like notes_raw above, and not filtering anything:

var note_filter = new Dict("note_filter").set("return", ["note_id", "pitch", "velocity"]);
var filtered_notes = clip.call("get_all_notes_extended", note_filter);

From documentation for get_all_notes_extended: 

"It is possible to optionally provide a single [dict] argument to this function, ... 

filtering-properties-for-getallnotesextended-return-values-is-not-working

Solution found: Apparently, I should have use "set" method on a seperate function call, like below:

var note_filter = new Dict("note_filter");
note_filter.set("return", ["note_id", "pitch", "velocity"]);
clip.call("get_all_notes_extended", note_filter);

Filtering properties for get_all_notes_extended return values is not working

Trevor being Trevor

This is fun one. I wrote some code for a device that uses the Task Object. Everything works as expected when I use my device in Ableton 10. However, in Ableton 11 on both Windows and Mac it appears to stop functioning.

For context, here's the quick breakdown of how the code works...

Now after debugging for a while, this what I found. The Task function runs successfully "once". More specifically, it's called to repeat x number of times and on the last repetition it triggers the process function again as expected. However, the second time it's called to repeat, it stops just before the last repetition. It fails to call the process function again and everything grinds to a halt. As far as I can tell, this is not an error on my part because the works just fine on Ableton 10 (Windows and Mac). I've been looking through the release notes and documentation looking for a clue, but I have not had any luck. Hence, once again I am asking for your help. Maybe I should change my name to Trevor being Bernie. Anyway, this forum is full of heroes without capes as far as I can tell, thanks for any insight in advance!

This is fun one. I wrote some code for a device that uses the Task Object. Everything works as expected when I use my device in Ableton 10. However, in Ableton 11 on both Windows and Mac it appears to stop functioning. 

The user triggers an initialization function that sets all the global variables to a starting value and then kicks off the desired process function. 

The desired processing function searches for a desired condition to be true within a data set using a loop to process each piece of data. Each iteration increments the necessary global variables.

When the desired condition is found, the task function is called for a given number of repetitions. 

A flag is set that allows the process function to pause using break or return commands nested in if statements checking for that flag

The Task function runs. When it reaches it's final repetition, it calls the process function again.

This repeats until certain global variable conditions are met.

This is fun one. I wrote some code for a device that uses the Task Object. Everything works as expected when I use my device in Ableton 10. 

ableton-11-appears-to-break-the-functionality-of-the-task-object

i use task often in Live 11.   Impossible to diagnose without code sample which reproduces the problem.

Well let me ask more generally then, how did Ableton 11 affect the JavaScript implementation in Max compared to Ableton 10? Based on what I described, how may that be relevant to my situation? This is the kind of insight I am looking for so I can diagnose the problem. I will work on an isolated code sample. In the meantime, these release note links may be helpful now or for someone in the future...

On my machine
Ableton 10 Max Version: 8.1.11
Ableton 11 Max Version: 8.3.3

Max Release Notes After 8.1.11 up to 8.3.3
http://cycling74.s3.amazonaws.com/support/version_8_2_0.html
http://cycling74.s3.amazonaws.com/support/version_8_2_1.html
http://cycling74.s3.amazonaws.com/support/version_8_2_2.html
http://cycling74.s3.amazonaws.com/support/version_8_3_0.html
http://cycling74.s3.amazonaws.com/support/version_8_3_1.html
http://cycling74.s3.amazonaws.com/support/version_8_3_2.html
https://cycling74.s3.amazonaws.com/support/version_8_3_3.html

Possibly Related Excerpts from Links Above
8.2.0
jsliveapi: eliminate crash when there's no 'this' for operations (the task object uses 'this')

8.2.2
JS Task: fixed issue with creating JS object with task

Kudos for digging up the history.  If you are trying to prove a regression caused by a Max update among those builds the next step would be a binary regression through the builds.

So maybe you'd start with Live 10 but linking Max install of 8.2.1 and see if it happens.  Then move newer to newer or older builds based on those results to isolate where the behavior change was introduced.  This is truly tedious and potentially very unrewarding,  but it can also be super helpful to the devs to have that kind of information.

Truly tedious and potentially very unrewarding,  but it can also be super helpful.

I feel like this captures some of the struggles of troubleshooting haha. I may have to do that to get the bottom of it. However, I just got it working by creating a fresh Task object right before I call the repeat function. Not sure why this works, but this is the only change I made...

In Live 10
//global declaration
var myTask = new Task(taskFunction, this);

//Then when the process function needs to call it for x number of repeats
myTask.repeat(x);

In Live 11
//global declaration
var myTask = newTask(taskFunction, this);

//Then when the process function needs to call it for x number of repeats
myTask = new Task(taskFunction, this);
myTask.repeat(x);

nice you found a workaround. If you’re going to do it that way you probably want to call Task.freepeer() before you re-assign myTask to the new Task.  I think that will allow the previous task to be garbage collected.

Thanks, I went back to Live 10 and had new issues. However, adding  arguments.callee.task.freepeer(); at the end of the last iteration of the task fixed those issues so good call!

Now I am noticing that the Live theme is overriding some of my colors in Live 11 causing my UI to look off. It looks like there is precedent for this in the release notes...

8.3.0
Dynamic Colors: new default 'Text / Icon' color follows Live themes 
(I wonder if this means the newobject method will ignore Live themes, but this seems to be outdated and doesn't respond for objects like "textbutton")

8.3.2
Color Selector: theme-aware
Dynamic Colors: preserved for object box borders
Dynamic Colors: restored when loaded in a different Live theme


Currently my only solution is to comment out any custom color choices I made such as...

//dynamicallyCreatedMaxObject.setattr("textcolor", [1,1,1,1]);
//dynamicallyCreatedMaxObject.setattr("bgcolor", [0.259, 0.259, 0.259, 0.722]);

I need one of my objects to ignore Live colors, but I don't see an obvious way to set this via JavaScript. I feel like we need a useLiveColors attribute added. Posting mainly to point out more differences between Live 11 and 10. Also, I may have a workaround I will follow up on.

Related Thread
https://cycling74.com/forums/themes-messes-up-colours 

Okay here was my strategy to deal with Live changing my dynamically created object's colors.

Set up a live.colors object to bang a message that calls a function within your Javascript object. It didn't seem to matter, but I put a small 10ms delay on mine.

Use the setattr method to re-establish the color attributes of the dynamically created objects. You can essentially copy and paste the color settings you set before.  However, through testing, you may need to add some more. For example, for a textbutton object, "textcolor", "textovercolor" and "textoncolor" seem to be the combination that kept things consistent across ableton 10 and 11.

Once things are working as expected, build some kind of protection to ignore the function call when the dynamic objects have not been generated. I used a gate on live.colors that doesn't open until the device is fully loaded. I also have an if statement within the function to check if certain variables exist.

It would be nice to simply have an attribute we could set to ignore color updates, but this got the job done for now.


Ableton 11 appears to break the functionality of the Task Object

John J.A. Jannone

I'm successfully downloading base64 PNG files using an http request, but I can only save them up to about 120x120 pixels. I'm guessing I'm hitting a size limit somewhere in node.js...

const path = require('path');
const Max = require('max-api');
const fs = require('fs');
    
Max.addHandler("png", (data) => {
    var buf = new Buffer(data, 'base64');
    fs.writeFile('image_temp.png', buf,  function(err, result) {
         if(err) post('error', err); });
});

test.maxpat

Hey all,
I'm successfully downloading base64 PNG files using an http request, but I can only save them up to about 120x120 pixels. I'm guessing I'm hitting a size limit somewhere in node.js...

const path = require('path');
const Max = require('max-api');
const fs = require('fs');
	
Max.addHandler("png", (data) => {
	var buf = new Buffer(data, 'base64');
	fs.writeFile('image_temp.png', buf,  function(err, result) {
     	if(err) post('error', err); });
});

Hey all,
I'm successfully downloading base64 PNG files using an http request, but I can only save them up to about 120x120 pixels. 

saving-large-base64-images-with-node-js

Tried this - did not work - maybe I'm importing node:buffer incorrectly? I get "Buffer.alloc is not a function."

const Buffer = require('node:buffer');
const path = require('path');
const Max = require('max-api');
const fs = require('fs');
	
Max.addHandler("png", (data) => {
	var buf = Buffer.alloc(262144, 'base64');
	data.copy(buf, data);
	fs.writeFile('image_temp.png', buf,  function(err, result) {
     	if(err) post('error', err); });

Max.outlet("done");

});


hey John, this n4m code last ran in 2021, but it did write base64 images (coming in from Runway-ML) to disk as png images at 1024x1024. I couldn't tell you everything this code is doing (especially that string replace on the first line), but here it is in case it's useful:

//////////////////// Save base64 image into local disk //////////////////////////////////
function writeBinaryImagesToDisk() {
    // m.post(base64String) //base64 image
    let base64Data = base64String.replace(/^data:image\/\w+;base64,/, '')
        // m.post(base64Data) // remove first part of the string
    let binaryImage = Buffer.from(base64Data, 'base64')
        // m.post(binaryImage) 

    // lodash library enumerate the generated file names
    let imgNumber = _.padStart(count, 4, '0')

    // combine folder and image number
    let imgTitle = `${imgFolder}/image_${imgNumber}.png`

    // write a file with the image name in the folder, where the script is located
    // throws a warning:ERR_INVALID_CALLBACK. Ignore it...
    fs.writeFile(`${imgTitle}`, binaryImage, err => {
        if (err) m.post(err)
        //m.post(`The file ${imgTitle} has been saved!`)
        m.outlet("write", `${imgTitle}`)
    })
    count++
    //if (count <= framePerSecond * videoLength) {
        //setTimeout(generateImage(), 100) // delay time
    //}
}

... 
The above function called here
...

    const data = {
            z: a, //assign the generated latent space vector a to the Z space
            truncation: truncation, //variation in image generations - higher is more random, lower is more similar
        }
        // POST = send data (latent vector)
        // GET = request data (resulting image)
    axios
        .post(postURL, data)
        .then(() => {
            axios
                .get(getURL)
                .then((response) => {
                    //assign the base64 encoded image as string to the base64String variable
                    base64String = response.data.image

                    // call the function to save the base64 image in the png format
                    writeBinaryImagesToDisk()
                })
                .catch((error) => {
                    m.post(error)
                })
        })
        // .catch((error) => {
        //     m.post(error)
        // })

Yes thanks so much Rob! Had to mess with it a bit, but getting all image sizes now!

Saving large base64 images with node.js

How can I get JSON like this into a dict?

"[{\"title\":\"512-depth-ema.safetensors\",\"model_name\":\"512-depth-ema\",\"hash\":null,\"sha256\":null,\"filename\":\"/Users/johnjannone/stable-diffusion-webui/models/Stable-diffusion/512-depth-ema.safetensors\",\"config\":null},{\"title\":\"v2-1_768-ema-pruned.safetensors [dcd690123c]\",\"model_name\":\"v2-1_768-ema-pruned\",\"hash\":\"dcd690123c\",\"sha256\":\"dcd690123cfc64383981a31d955694f6acf2072a80537fdb612c8e58ec87a8ac\",\"filename\":\"/Users/johnjannone/stable-diffusion-webui/models/Stable-diffusion/v2-1_768-ema-pruned.safetensors\",\"config\":null}]"

I tried several approaches, and eventually made this Max monstrosity to get something that worked (attached), but it seems there's got to be an easier way...

dict-test.maxpat

hierarchical-json-dict

Input of arrays of stuff is a pain.  But life can be much easier if you can do JSON handling in javascript...

That's great - thank you Tyler! I hope the max dict suite will eventually handle hierarchical JSON better, but this will do the trick for now, and I'll study it as well :)

hierarchical JSON -> dict

Phileas Dazeley-Gaist

Hi everybody! This is my first post here so please bear with me if I'm not yet super familiar with posting conventions on this forum.

I'm trying to make a Max abstraction using JavaScript to generate sequences of evenly spaced numbers from A to B in N steps (see the seq() function in R for an example) and running into a really silly problem where floating point numbers I send through my JS code in a list are interpreted as integers.

I've narrowed the problem down to this code excerpt:

inlets=2;

// if the program receives a list and it is from the left inlet, 
// use its first two terms to update A and B

function list(v) {
//assign inlets with if statements
    if (inlet==0) A = arguments[0]
    if (inlet==0) B = arguments[1]
    by = (B-A)/(N-1)
    seq() // update generated sequence
}

If I try to get a sequence from 0 to 10 in 20 steps, my code works, but if I ask for a sequence from 0 to 2.5 in 5 steps, my program returns a sequence from 0 to 2 in 5 steps, essentially interpreting my floats as the nearest floored (I think) integer.

Does anybody have any idea what's going on?

Any help would be super appreciated! I'm also interested in alternative approaches to this list generation tool! Let me know your thoughts! 

Here is a diluted version of the patcher I'm working on:

seq.js

list from a to b in n steps.maxpat

Hi everybody! This is my first post here so please bear with me if I'm not yet super familiar with posting conventions on this forum. 

I'm trying to make a Max abstraction using JavaScript to generate sequences of evenly spaced numbers from A to B in N steps (see the seq() function in R for an example) and running into a really silly problem where floating point numbers I send through my JS code in a list are interpreted as integers. 

I've narrowed the problem down to this code excerpt: 

inlets=2;

// if the program receives a list and it is from the left inlet, 
// use its first two terms to update A and B

function list(v) {
//assign inlets with if statements
	if (inlet==0) A = arguments[0]
	if (inlet==0) B = arguments[1]
	by = (B-A)/(N-1)
	seq() // update generated sequence
}

Does anybody have any idea what's going on? 

Any help would be super appreciated! I'm also interested in alternative approaches to this list generation tool! Let me know your thoughts! 

Here is a diluted version of the patcher I'm working on:

Hi everybody! This is my first post here so please bear with me if I'm not yet super familiar with posting conventions on this forum. 
I'm t

floats-mysteriously-cast-to-integers-in-list-input-using-js-in-max

Here is an even simpler reproducible example: 

If I use a pack object to pack two float values into a list and send it through the first outlet of the js object, it collects the values and posts them to the Max console, however, somewhere along this process they are cast to integers. 

var A = 0.0;
var B = 0.0;

function list(v) {
//assign inlets with if statements
    if (inlet==0) A = arguments[0]
    if (inlet==0) B = arguments[1]
    post(A, B)
}

Hi, you need to set the type of elements of a [pack]. 
[pack f f] for 2 floats. 

Thank you so much! I knew I was missing something obvious! Works like a charm now!

Floats mysteriously cast to integers in list input using js in Max

Rica

I have a problem getting the freesound-search patch (part of the Node for Max package) running.

I installed the requested fork of the NPM package and did everything written in the readme (creating a .env with API key ) , though getting the 

following error message, when trying to install npm and then start it:

Process could not be startet due to following error: 

Cannot find module 'freesound' at Function.Module_resolveFilename (module.js:547:15) 

(-> any way to print/copy the node.script debug monitor stuff ??)

So does freesound module refer to the requested freesound.js file from https://github.com/Girlfriends/freesound.js ? 

I put it into the freesound example folder ; maybe I need to put it somewhere else ?

node.script: NPM exited with non-zero code "1" at C:/Program Files/Cycling '74/Max 8/resources/packages/Node For Max/examples/freesound

node.script: Could not load the dotenv module. Please be sure to send the message 'script npm install' to the node.script object to download node modules

node.script: No value for key FREESOUND_CLIENT_KEY in .env file. Please make sure to create a file called .env with a Freesound API Client key.

node.script: No value for key FREESOUND_CLIENT_SECRET in .env file. Please make sure to create a file called .env with a Freesound API Client Secret.

Hi everybody!
I have a problem getting the freesound-search patch (part of the Node for Max package) running.
I installed the requested fork of the NPM package and did everything written in the readme (creating a .env with API key ) , though getting the 
following error message, when trying to install npm and then start it:

In the node.script monitor:
"Process could not be startet due to following error: 
Cannot find module 'freesound' at Function.Module_resolveFilename (module.js:547:15) 
at Object.Mode._Load (module.js:474:25) ... "
(-> any way to print/copy the node.script debug monitor stuff ??)

So does freesound module refer to the requested freesound.js file from https://github.com/Girlfriends/freesound.js ? 
I put it into the freesound example folder ; maybe I need to put it somewhere else ?

And in the max console appears this: 
print: NPM install started
node.script: NPM exited with  non-zero code "1" at C:/Program Files/Cycling '74/Max 8/resources/packages/Node For Max/examples/freesound
print: NPM install error
node.script: {
	"code" : "MODULE_NOT_FOUND"
}
node.script: Could not load the dotenv module. Please be sure to send the message 'script npm install' to the node.script object to download node modules
node.script: No value for key FREESOUND_CLIENT_KEY in .env file. Please make sure to create a file called .env with a Freesound API Client key.
node.script: No value for key FREESOUND_CLIENT_SECRET in .env file. Please make sure to create a file called .env with a Freesound API Client Secret.
node.script: Unable to launch process
}

 Thanks for any help !




Hi everybody!
I have a problem getting the freesound-search patch (part of the Node for Max package) running.
I installed the requested fork

node-for-max-freesound

I'm surprised to see that the examples have found its way to this location (C:/Program Files/Cycling '74/Max 8/resources/packages/Node For Max/examples/freesound)

You are in fact right, the freesound and other modules cannot not be found/loaded and therefore the script won't start or run as desired. A script npm install would fix this but due to the location on disk it fails as this required administrative privileges. 

I'm curious, how did you download these examples? The Node For Max package contains a patcher to help you with this. Search for "n4m.launcher" in the new Sidebar search and open that patcher. There should be a button labeled "More Examples" that opens another patcher, which allows you to download the examples automatically. They should be placed in your Max 8 Library folder (instead of placing them in the package itself) and the npm instructions etc should "just work" as now you won't encounter Permission Issues due to the location on disk.

I hope this makes sense? Let me know if u have further questions.

Ahoi Florian !
Thanks a lot for your help!

I downloaded the files directly from github and initially put them in my  Max 8 Package folder. 
I shifted the freesound folder to  C:/Program Files/Cycling '74/Max 8/resources/packages/Node For Max/examples/  to see, wether it would work then. It did not. 

Update: 
I deleted and reinstalled everything and now it works ! 
I had to install git ! 

"but due to the location on disk it fails as this required administrative privileges."
--> Actually it now works from every path, wether the freesound file is in documents/Max 8/Library or  documents/Max 8/Packes or C:/Program Files/Cycling '74/Max 8/resources/packages/Node For Max/examples/  

Yeah ! Cool ! Thanks !

Rica


I don't have anything constructive to add except that I'm excited it worked.

hello! i am 4 years late to the party but i am trying to download sounds using node.js and the freesound api. 
but the example patch  "freesound-search" doesnt seem to work. 
nothing happen if i enter a keyword.
I followed all the steps and entered my keys.
thanks.

Node for Max - freesound 

Ernest

Husserl3 contains >1500 lines of JavaScript, ~800 for the UI, and about ~700 for pattrstorage management. However much of it is data, and the actual functions are quite simple. The second on JavaScript, this one builds on the last with practical examples, and prepares for the next. All the tutorials in this series:

If you read the prior tutorial, you already know that JavaScript in Max is particularly suited to user-interface management, because it runs on a lower-priority thread than the audio or video. User interface functions can use a great deal of CPU. For example, Husserl needs over half of one core of a 4GHz i7-6700K to maintain its several dozen panel indicators. Also, JavaScript is needed in Max to zoom the window properly for presentation mode and standalone applications.

There's a number of ways to do this, but I found it easiest to do in JavaScript. The below functions were added to the above script to switch display modes for the dynamics and LFO dial/bpm frequency controls in Husserl3: 

Screenshot 2021-11-15 235358.jpg

These functions simply toggle the 'hide on lock' attribute of the display objects when they are to be shown or hidden in the presentation. Putting it in JavaScript had the added benefit that MIDI input can call the same functions when MIDI changes their CC values:

So the panel changes its display depending on the state of lfoSel() . When the displayed channel changes, or MIDI changes values, the JavaScript simply calls the same functions.

I've tried a number of ways to resize patches over the years, and this actually requires JavaScript, because not all the functionality is otherwise available in Max. The problem is that the window zooms in and out from the center of the display, so after changing the zoom, one has to reposition the presentation so its top-left corner is at the top left of the resized window. Also, one wishes to shrink or enlarge the presentation window for the user.

For this Husserl3 sends a 'scroll' message to JavaScript, which now performs all the resizing and rescrolling (previously the window was resized with commands to a thispatcher object, but as the scrolling needed to be done in JavaScript anyway, it's all now in JavaScript).

To ascertain the size of the window, I found it overwhelmingly best to make an invisible comment in the presentation, whose top-left corner sets the width and height of the presentation window.

Screenshot 2021-11-16 000747.jpg

This is vastly better than remeasuring the size of the window every time it changes size, because one only needs to move the comment. I named the comment 'corner,' and as this function is only called rarely, it just fetches the object reference to the 'corner' comment when it is called rather than caching it in an array:

function scroll(size) { 
    var loc = new Array(4);
    var locb = new Array(4);
    var p = this.patcher;
    p.message('zoomfactor', sized);
    p.wind.scrollto(0,0);
    loc  = p.wind.location; //left, top, right, bottom
    locb = p.getnamed('corner').getattr("presentation_rect");
    p.wind.location = [ loc[0], loc[1], 
        loc[0] +locb[0] *sized, loc[1] +locb[1] *sized ]; 
} 

Max has two built-in functions for interactive help, both available as fields in each object's inspector window. However, there are issues with both if not designing an M4L device. The 'hints' window cannot be displayed in a standalone application, and is purely under the control of Ableton Live. And the 'info' displayed when hovering over a device is not very controllable; its font and background color are not settable, and the info overlays other controls when one is trying to use them. Fortunately, it's actually much easier to provide context sensitive help via JavaScript and the hover object, at the right of the below picture. the first outlet of the hover object passes straight into the JavaScript, as an argument to hover(), and the other three outlets reset the hover text when the user is no longer hovering over a UI element by setting the hover() argument to zero instead.

Screenshot 2021-11-14 072334.jpg

This sends a hover message to the js object, which contains descriptions for all the objects in strings. As described in the last tutorial, the names of all the UI objects are already in this javascript object, in order to create object references to them in an array of scripting IDs. So the additional javascript to create the hover text is very simple:

First the hover function checks if the script IDs have been initialized, and if not calls iDinit(). The object reference to the text window where the help tips are displayed is at index 153 in the ID list, so again as described in the last tutorial, this script uses that index directly to write to the text box for the tips. (I should note that the help text adds one name to the global namespace, even though it contains 200 long text lines, because it's all in one array. ) To find the text to display upon hovering over a UI element, the JavaScript invokes JavaScript's Array.indexOf() method on the scriptNames array to find the locate the control index. The text from that index of the helptext[] array is then set in the textedit window. It's much easier to create the help all in one document than in separate inspector windows, although in the future, the script could copy the text into the info attribute of the display objects for an M4L hint window, if Ableton ever supports multicore instruments.

The encoding of matrixctrl values is a little bizarre. Thankfully the values issued when the object is banged are all stored in pattrstorage, so with outputmode set to 1, one can routepass them into javascript and put them in a buffer. If all the buttons are off, pattrstorage reports "0 0 0"; if the first three are on in the first column, pattrstorage reports "0 0 1 0 1 1 0 2 1." Thre's a triplet for each button that's on, and off buttons are skipped. A loop in JavaScript can easily make the latter example an array "[1, 1, 1]" for putting in a buffer via indirect indexing, shown in the example below.

There's two matrixctrl objects in Husserl3, one for muting voices 1~8, and one for muting voices 8~16. The following JavaScript function combines them both in one buffer, which is read by the gen 'audio3channels' object to determine which channels to mute:

function matrix1(){
    var m = arrayfromargs(arguments); 
    var a = [0,0,0,0, 0,0,0,0];
    if(m[2] !=0 ) // if not all off
        for (i = 1; i < m.length; i +=3) a [m[i] ] =1; 
    layer.poke(2, 0, a);
}
function matrix2(){
    var m = arrayfromargs(arguments); 
    var a = [0,0,0,0, 0,0,0,0];
    if(m[2] !=0 ) // if not all off
        for (i = 1; i < m.length; i +=3) a [m[i] ] =1; 
    layer.poke(2, 8, a);
}

The functions are in the script for the multi pattrstorage object.

Husserl2 used the function object for displaying velocities, but it was extremely inefficient. Husserl changes all the playing voice volumes when the velocity shaper breakpoint is changed, so it required two function objects, one for the display and control, and one to process all the playing voices upon a change. Husserl3 instead performs velocity shaping inside the gen object for voice allocation, in a simple two lines of code:

calcBreakpoint(vel, x, y){
    if (vel <= x) return vel * (y /x) *.007874;
    else return (y + (vel -y) /(127-x)) *.007874;
}

When the value changes, an uzi iterates through all active voices in the voice allocator and sends their new velocities to the appropriate voices in gen~. The uzi input seemed best, because gen cannot create more than one value per input received, so otherwise the gen object would have needed an extra 32 outputs/ the uzi is in the voice allocator subpatch, in the upper middle right area. The draw() message to jsui is generated whenever the pictctrl object over it changes, from the control logic on this subpatch's right side.

Screenshot 2021-11-16 030544.jpg

With Max function objects, I also was not happy with the tiny point necessary to click upon, and preferred the larger circle available in the pctctrl object. So a pictctrl object overlays a jsui object which draws the velocity shaping function with two lines. After initialization by a loadbang, the script is very simple:

inlets = 1;
outlets = 1;
function bang(){
    sketch.default2d();
    sketch.gldisable('blend');//turns off alpha processing
    clear();
    refresh();
}
function clear(){
    with (sketch) {
        // set the clear color
        glclearcolor(0.1, 0.1, 0.1, 1.000); 
        glclear(); // erase the background
        refresh();
        glend();
    }
}
function draw(x, y){
    with (sketch) {
        // set how the polygons are rendered
        clear();
        glcolor(0.7, 0.6, 0.2, 1.000);
        gllinewidth(1.5);
        if(x !=0){
            // move the drawing point
            moveto(-.915, -.915, 0.); 
            /// draw the first line segment
            lineto(fit(x), fit(y), 0.);
        } else{
            // move the drawing point                        
            moveto(-.915, fit(y), 0.); 
        }
        if (x <127) 
            // draw the second line segment
            lineto(.915, .915, 0.);
        refresh();
        glend();        
    }
}
function fit(x){
    return (x >64) ? x *.015 -.99 : x *.015 -.9; 
}

I had to adjust the margins to display the line properly on boundary conditions, but otherwise it was exactly as anticipated. One quirkmm I found with the jsui object (and also for the chooser object) is that I could not send it messages directly from javascript using this.patcher.getnamed("scriptingName").message(); so I connected some pattr objects directly to their inputs and send messages to the pattr objects instead. 

Screenshot 2021-11-15 235642.jpg

However, the JSUI object is very expensive on CPU, using 2% for almost half a second on every draw() operation. So for the waveform graphs, which can update dynamically in this design, I stuck with the plot() object; but the velocity shapers only redraw on channel load and when the breakpoint is changed by program recall or by panel editing, and when the JSUI object is not drawing, it uses no CPU. So it was absolutely the best choice for the velocity shapers.

To display the current waveforms, envelope levels, LFO levels, etc, gen~ pokes the values from the most recently played voice for the currently displayed channel into a shared buffer~ on the falling edge of a 30Hz ramp. A metro sends bangs into the JavaScript at the same frequency for it to pick up and display the values via a bang() function. The nice thing about playing with buffers in javascript is that it supports reading an array of buffer values all in at once. The 'dat' buffer shares the data with gen~, from which the bang() function fetches 18 values:

var dat = new Buffer("dat");
function bang(){
    var a = new Array();
    a = dat.peek(1, 1, 18);
    outlet(0, a[0] ); // current x
    outlet(1, a[1] ); // current y
    outlet(2, a[2] ); // current l1 level 
    outlet(3, a[3] ); // current l2 level
    outlet(4, a[4] ); // current l3 level
    outlet(5, a[5] ); // current e2 level
    outlet(6, a[6] ); // current e3 level
    outlet(7, a[7] ); // current sah 
    //...
    o1w = a[10];    //(see below)
    o2w = a[11];
    //....

Javascript reads all 18 of the singleton values simultaneously and sends each one to the appropriate display object via outlets or via thispatcher/getnamed().message() calls.

Screenshot 2021-11-16 001449.jpg

Additionally, the poly~ object for the 16 channels sums the voice outputs for the 32 poly~ voice instances and sends the result to JavaScript for the current displayed channel. The same bang() function reads the values for all 16 channels from one array simultaneously again, and sends their values to a multislider:

function atodb(x){ 
    return 20 * Math.log(x) * Math.LOG10E; 
}

//... in bang() function: 
    var meter = dat.peek(1, 32, 16);
    // put into live.gain~ for channel level display
    outlet(15, meter[channel -1]); 
    // build array for multislider
    for (i = 0; i <16; i++){
        meter[i] = atodb(meter[i])+60;
    }
    // send to multislider
    outlet(12, meter);    

The multislider is not an audio object, and only updated at 30Hz, so the multichannel volume display does not consume much CPU. Eventually I'll update the atodb() function to precalculate the atodb values and store them in a lookup array, to offload some CPU from the rather overladen drawing functions.

It takes a little message preparation to set up the plot() object. If I were doing this afresh, I would have sent the messages from javascript, but I had already created a subpatch to prepare the plot() objects.

Screenshot 2021-11-14 075721.jpg

To fill the plot~ objects with oscillator and LFO waveforms, I ran into an old bug where the plot~ objects can only display from the first channel of a buffer~. So I split all the waves in my wavesets into 47 separate 128K single-channel files and load them into a polybuffer~, via the lower-left network below:

Screenshot 2021-11-14 075959.jpg

By setting the embed attribute on the polybuffer~ the waveform list is stored with the patch, so I only needed to run the uzi once. Then I access the waveforms from JavaScript depending on the chosen waveset by the chooser lists named o1set and o2set, which send w1set and w2set messages to the javascript of their current values:

//initialize in global namespace:
o1s, o1sx, o1wx, o2s, o2sx, o2wx = 0;

function w1set(x){
    o1s = x +1; 
    o1sx = 1; 
}
function w2set(x){
    o2s  = x +1; 
    o2sx = 1;
}

The bang() function described above then sends a message to the plot() objects:

if(o1sx!=0 || o1wx!=o1w){
    outlet(8, "refer", 
        "wavs." + o1s, 
        Math.max(o1w, 1.), 
        0, 
        wavelength
    );
    o1sx = 0;
    o1wx = o1w;
 }
if(o2sx!=0 || o2wx!=o2w){
    outlet(9, "refer", 
        "wavs." + o2s, 
        Math.max(o2w, 1.), 
        0, 
        wavelength
    );
    o2sx = 0;
    o2wx = o2w;
}

The 'o1w' and 'o2w' values are from the shared gen~ buffer described above for the indicators, so the waveform selection updates dynamically with any modulation. The values are checked against prior values, and the spinlocks zeroed in the global namespace, before sending a message to the plot~ object. Because the plot~ objects do not receive messages setting them to display a different part of the buffer unless the oscillator waveform is being modulated, their CPU load is usually low; and CPU usage is still lower than for JSUI or scope~ objects even if the waveform is actively being modulated. The most significant impact on performance is the number of pixels in the display. Doubling the window size from 75% to 150% increases Husserl's CPU load on my 4GHz i7-6700K by 4%, which is, 24% of one core...perhaps the reason why Ableton likes to make things so small...

Drawing the filter curve was probably the most complex task to perform in all of Husserl3's design. When I started on this design in 2010, I predrew an array of filter curves for different LP/BP/HP mixes and different resonance settings. I drew 100 points for each curve using a function to calculate the output level of a filter at different frequencies (still in my SynthCore library) for 101 filter-type mixes and 100 resonance points. I put the results in 100 channels, each containing 101 curves. That made quite a large file, so when I built the 5D filter, which adds another two 100-point dimensions, it seemed best to modify the original filter curves rather than draw all of them.

Screenshot 2021-11-16 025949.jpg

In JavaScript, a routine in bang() fetches the current five points after filter modulations from gen~ as described above, reads the 100 points of the appropriate filter curve from the data buffer, adjusts its slope for filter type and saturation, then writes the results to another 100-point buffer for a plot~ object to display.

When the current channel is changed, the JavaScript updates all the panel controls from a buffer. This could be a simple task, but as I had already tried moved as many of the control parameter scaling factors out of gen into the main patch, I also had to reverse-scale everything from the shared buffer~ data for each channel back to the value ranges for the panel controls; and that involved bit-unpacking of some control values. So it turned into some very long Javascript, with additional quirks to update panel controls with multiple modes or combined graphical/textual display. The patch uses the 'outputmode 1' of the pattrstorage objects to 'dirty' the preset if it has been changed, so it turns the outputmode off and on again, before and after the display update.

function displayChan(chan){
  if (sinit == 0) iDinit();
  if(channel == chan) return;
  channel = chan;
  scriptIds[151].message("outputmode", 0); 
  scriptIds[152].message("outputmode", 0); 
  chanParams = programs.peek(chan, Multi, 160);
 // fetch and alter values from buffer for display
   chanParams[1]    *= 100;              //whl
   chanParams[2]    = chanParams[135];    //e1a
   chanParams[3]    = chanParams[136];    //e1d
   chanParams[4]    = chanParams[4] *100; //e1s

//....

   chanParams[118]      *= 100; //l1w
   chanParams[119]      *= 100;    //l2w
   // chanParams 120~135 don't need scaling...
   // set all the panel objects at once:
    for (i = 1; i < 135; i++){
    scriptIds[i].message("set", chanParams[i] );
    }
   // wiggle cases:
   scriptIds[80].message(chanParams[144]); //l1f
   scriptIds[81].message(chanParams[145]); //l2f
   scriptIds[82].message(chanParams[146]); //l2f
   scriptIds[151].message("outputmode", 1); 
   scriptIds[152].message("outputmode", 1); 
}


An additional wrinkle of making a multiphonic display is that MIDI does not always update the display: it could be changing other channels not currently displayed. As explained in tutorial 5, I use set of panel controls and update them for the current channel, instead of making 16 panels with >200 display objects each, which also keeps the overall file size to <1.5MB instead of 30MB and makes loading the data much faster.

Screenshot 2021-11-16 000339.jpg

Tutorial 5 mentioned that 128-entry selector functions in gen scale the control parameters into the 128-value range of CC values. What I neglected to anticipate was that MIDI could ALSO update the display, requiring yet another long routine in javaScript, because the scaling of parameters for gen~, for MIDI, and for the display are all different. Fortunately JavaScript supports switch statements, and the ranges don't need to be clipped because the display objects clip out-of-range values automatically. So this last twiddle was much easier, and being mostly copy/paste, only took a day to write. It was one hell of a lot easier than trying to do the same thing with Max objects. Eventually before I add the 16 sequencer channels, I will update this function to use numeric indices, as that is more efficient than string parsing, but as I've met the performance goals for Husserl3, this is what it will look like, which is at least more human readable:

The most difficult part was storing the 'layers' buffer, because it caused terrible race conditions, until I cached the object reference to a pattr object called [multins]. , then sent the pattr object messages before preset store and after preset recall. I have to say caching the object reference (performed by minit(), in the variable [multinsIsd]) was actually crucial to getting the design working, because I got long and otherwise inexplicable hangs after clicking the "recall" or "restore" buttons more than once within a few seconds. I didn't even think it was so important myself, lol, but thankfully Id been taught what to do. See tutorial 8 for a detailed explanation.

And that concludes the UI portion of the JavaScript tutorial. Next week I hope to share on managing pattrstorage with JavaScript.

Cycling '74 Forums

Solved it with interpolation: // Assume lastIndex, currentIndex, lastValue, currentValue are defined var steps = Math.abs(lastIndex -...

That worked, thanks!!!

Solution found: Apparently, I should have use "set" method on a seperate function call, like below: var note_filter = new...

Okay here was my strategy to deal with Live changing my dynamically created object's colors. Set up a live.colors object to bang a message...

Yes thanks so much Rob! Had to mess with it a bit, but getting all image sizes now! const path = require('path'); const Max =...

That's great - thank you Tyler! I hope the max dict suite will eventually handle hierarchical JSON better, but this will do the trick for...

Thank you so much! I knew I was missing something obvious! Works like a charm now!

hello! i am 4 years late to the party but i am trying to download sounds using node.js and the freesound api. but the example patch...

Husserl3 contains >1500 lines of JavaScript, ~800 for the UI, and about ~700 for pattrstorage management. However much of it is data, and th

i was told task is used in js.