Get organized with Max and JavaScript

Lasse MunkNyhederLeave a Comment

Max + JS: project inspector

Hi all !

Here’s some quick tips get organized with Max and JavaScript, using projects, Google Drive and more.

I have picked up some good ideas for workflow optimisations in Max, while collaborating with some clever people (especially Wetterberg from Københavns Laptop Orkester and Felipe from kling klang klong). These ideas has saved me a lot of time, so I thought it could be interesting for fellow-patchers as well.

I will try to keep the info as condensed as possible – happy patching!

CONSIDER USING PROJECTS

And there is a trick – even if you already know of projects !

Projects are a way of organizing all the data (patches, audio, video, javascript code, .json from pattrstorage / dict, etc.) in one folder-structure. It’s really easy and quick to implement in your workflow.

You create a new project by Max > File > New Project

Max + JS: new project

Max + JS: new project

Projects in Max look like

Max + JS: project structure

Max + JS: project structure

(Here’s the trick)
Max + JS: project inspector

Max + JS: project inspector

The interesting thing about projects, is that it can be a good idea disabling the project functionality of ‘organizing itself’. I prefer to create the folder structure manually. 

Max + JS: disable keep organized

Max + JS: disable keep organized

Max allow you to create your own project structure if you deselect this feature, which can help you organize yourself. This is especially helpful when you work with other people on the same Max patch, and you wish to include other assets (such as VST installers, images, videos, other code etc.) into your project folder, so it is easy to migrate the project to a different computer.

Max + JS: folder structure

Max + JS: folder structure

If you let Max organize him-self, then all your files will automatically be moved into folders named; ‘patchers’, ‘media’, ‘code’ etc. which is my taste way less precise than the following proposition for a folder structure:

FOLDER STRUCTURE

1_patchers – used for patchers, abstractions etc.

I tend to use prefixes for my abstractions depending on the project and context. If I develop for my self; I name abstractions lm (Lasse Munk) and the project name e.g. go (getting organized) – and keep a project local version of this abstraction, so I know that this specific piece of code is intact, even if I change the same code for at different project.

I have a bank of abstractions which I copy from, if I e.g. need a stereo sfplay~ with some features, then I copy it from my standard lm.sfplay~ abstraction into the project specific abstraction. It’s a bit of extra work, but It saves me the headache of working on a big project, and something stops working, because I changed that abstraction for a different project.

2_audio

3_text – everything text, could be saved files from a [coll], .json from [dict] or [pattrstorage] etc.

4_code – is used for javascripts

5_img – images

6_video

7_externals – I always keep a copy of the used externals, in case I want to migrate the project to some other computer

8_vst – Same idea as externals

9_installers – I keep a copy of the used version of Max, and installers for whatever else is used in the project, in case this project migrates to a different computer and the installers for some reason do not exist, or I need them in a place without internet access.

FILE NAMING

I usually name files and folders using underscores (file_name) instead of spaces (file name) because it makes it easier to reference that file in Max. One avoids some irritating moments using quotation marks in the filepath “file name with spaces”,  no need for the [tosymbol] [fromsymbol] when parsing in different objects etc. I believe it is much easier just writing file_name_without_space. This is consequent (more or less) throughout the operating system, in the case I need to reference files from outside my project folder.  

Max + JS: messages and spaces

Max + JS: messages w. spaces

MORE ABOUT PROJECTS

If you want to know more about Max projects then check out Cycling74’s video or search for ‘Max Projects’ inside max

Max + JS: projects tutorial

Max + JS: projects tutorial

GOOGLE DRIVE FOR PATCH-SHARING

I use google drive for sharing my patches with people whom I collaborate with. This is great, especially if you remember to name your abstractions with your initials so an abstraction you create won’t conflict with a patch another person has made, because both of you have made a patch called ‘sampler.maxpat’.

Drive is easy, works well, sync’s to your other computers and the only thing you have to remember, is to include your Max-patches folder on google drive in Max’ search-path

Max > Options > File Preferences

Max + JS: file preferences

Max + JS: file preferences

Press the ‘+’ icon and add the path to your Google Drive folder to your Max search path, restart Max. Max should now be able to find your abstractions, which you have placed within your Google Drive folder and it’s sub-folders.

Max + JS: file preferences 2

Max + JS: file preferences user path

Google Drive even offer a (somewhat) version history, which can be a help if you are a bit too quick cleaning up.  Goto Google Drive > My Drive > press the info button > Activity

Max + JS: google drive file versioning

Max + JS: google drive file versioning

I havn’t found a good way of doing real versioning / branching similar to GitHub, which mean several users can’t work within the same Max-patch at the same time using this solution with Google Drive, but it sufficient for my needs. Let me know if you have some good ideas.

NB! I havn’t tried, but I believe the same procedure should be possible using other services like e.g. Drop Box or the like.

SETUP FUNCTION

I don’t like to use [loadmess] or [loadbang] because I don’t know exactly in which order objects within my patch load, or at which time messages are output. Using [loadbang] and [loadmess] also make it more intricate to return the patch to its default state, without closing and opening it again.

This functionality is important for me if I design patches for installation work, where a patch should be reset between each user who have an experience, for which the Max-patch is (part of) the engine behind.

I like having only one place where everything which is needed for resetting the patch is included. This could mean; loading files to buffers / sfplay~, resetting a synth or volume controllers, midi controls etc.

One approach could be using 1 loadbang, which triggers an ordered series of events

Max + JS: patching setup

Max + JS: patching the setup function

But I find that I have to change this order (meaning re-patching sends) if I implement a new feature, which is very time consuming.

JAVASCRIPT

My approach is using a simple javascript as a setup function. It is much faster to cut/paste text than re-patching/oranizing [send]-objects.

One can use javascript for a whole lot of things; this purpose is really simple, so just keep reading even if you have never used text-based programming before!

  • in the max-project press: ‘+’, choose ‘Javascript File’ and save it to your 4_code folder
Max + JS: create js

Max + JS: create js and place it in your 4_code folder

  • Create a [js your-Initials.your-Project.setup.js]
Max + JS: the js object

Max + JS: the js object

  • Doubleclick on the [js] object to open the editor
Max + JS: javascript building editor

Max + JS: javascript building editor

COMMENTS

First notice you can write comments to your self – similar to if you write comments in a Max-patcher by using the [comment] object. In JavaScript comments are written using // for single line comments or between /* and */ if writing multiple lines.

INLETS / OUTLETS

inlets = 1;

outlets = 1;

Just mean your [js] objects has inlets and outlets. This is useful for sending messages to the [js] object, make it process the input, and give you some other output. It’s similar to using it as some encapsulated Max code.

Max + JS: js inlets outlets

Max + JS: js inlets outlets, give functionality of encapsulated patchers or abstractions

FUNCTION

In the above mentioned case, the function:

function msg_int(v) {

v = v + 10;

outlet(0, v);

}

Just mean that every time the [js] object receives an integer, that integer is called ‘v’, and then the [js] object process v, by giving v a new value. The new value is the old value of ‘v’ + 10.

Then the new value is output from the first (and in this case only) outlet of the [js] object.

FUNCTION SETUP

We want to use the javascript object to create a setup function, instead of a simple addition (of 10) to every incoming integer. This is where it get’s fancy!

Max + JS: js setup function

Max + JS: js setup function

The [js] object executes from top to bottom, so if you want a different order of ‘setup’ loop, then just cut and paste.

One has to be aware that the [js] object in this case just tells other object to do something, and doesn’t know if it actually happens or when it happens. So if you have a patch where you e.g. have to first load some sound files, then do something else, then a bit more of patching is needed.

AUTOWATCH

I have set autowatch = 1 in the .js file.

This is because I like to develop JavaScript using an external editor, e.g. Sublime Text 3

Max + JS: sublime text 3

Max + JS: sublime text 3

Autowatch = 1; make the [js] object inside Max look for changes, and update it self, whenever changes are made to the lm.go.setup.js file. This mean that I don’t have to reload the file inside Max, if I make an edit using an external editor such as Sublime Text 3.

The JavaScript editor in Max is very simple, and using an external editor will optimize your workflow / speed very considerably with functions such as ‘auto complete’. If you want to know more about Sublime Text then check this intro video

THE END

A short summary:

  • Creating and using projects
    • Remember to disable ‘Keep Project Folder Organized’
    • Create your own project hirachi
    • Consider stop using spaces for naming
  • You can use a file-sharing service for having your abstractions and externals in sync throughout your workspaces.
  • Google Drive keeps an activity log
  • It is cool to have a setup function in one place, so it is easy for your to send ‘loadfiles’ messages, ‘reset to this state’ etc.
  • JavaScript can be helpful as a setup function, instead of having to re-patch send objects.
  • It can be helpful to use an external editor because of better visual design and autocomplete functions. I use Sublime Text 3

Hope this gave some ideas on how you can improve your workflow in Max – it has for sure helped me out quite a bit ! Let me know if you come up with some cool workflow tips – it is always interesting to learn some new tricks.

/ Lasse

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

This site uses Akismet to reduce spam. Learn how your comment data is processed.