Articles

JavaScript: A Brief Resource Guide for Max Users

As flexible and useful as Max is, there are still times when you'll want to extend its functionality. For many of you, JavaScript is and remains your first and go-to programming language. Here's a basic listing of the JavaScript-based resources available to you as a Max user.

Let's start with the basics.

The Max js and jsui objects run JavaScript version 1.6 inside of Max (The JavaScript language used by the js and jsui objects does not include web browser-specific functions and properties, however). You can use JavaScript to extend Max in the following ways:

  • To program procedural operations that may be difficult or impossible to implement using Max objects by themselves (these may include operations that require recursion or respond to messages with an unknown number of arguments.

  • To create objects that respond to customizable messages and rely on their own internal data structures.

  • To schedule timed events in response to messages.

  • To manage global variables for use among multiple js objects or between js objects and the Max patcher.

  • To interface to Max’s scripting architecture.

  • To access the file system of your computer to look for files by name and types

Here's a brief rundown of the JavaScript resources available to you as a Max user.

Starting At The Beginning

JavaScript in Max covers information about the functions added to the JavaScript language that are specific to the js and jsui object implementations and provides an overview of the js object extensions to Javascript.

There are two tutorials that will help you with the basics of using JavaScript in Max. They introduce the basics of instantiating and controlling a function chain of Jitter objects within js JavaScript code.

Max JS Tutorial 1: Basic JavaScript
Max JS Tutorial 2: JavaScript Scripting

Getting Visual

The jsui Object describes properties and methods that are specific to the jsui object itself. The jsui object exposes the MGraphics and sketch drawing routines for visual output.

The MGraphics QuickStart Guide runs down the required initialization and routines you'll need to use the MGraphics system within the jsui object . To see MGraphics in action, Darwin Grosse's 2011 November Patch-a-Day sequence of tutorials is a great source of examples and enlightenment.

The JSPainter Guide describes the use of JSPainter, which lets you override any UI object's painting method with one you can created in JavaScript, It uses the MGraphics API (with a few additions of its own).

Live If You Want It

If you're interested in using JavaScript in the context of Max for Live, the LiveAPI object gives you a way to communicate with Live API functions from JavaScript.

The Live API (JavaScript) Object provides an overview of the object's basic properties

The Live API Overview provides the basic information about the Live API.

Of course, you'll want to keep a copy of The Live Object Model documentation close at hand, too.

Working With Jitter

There are a number of extensions to the js object that let us to perform Jitter functions directly from the JavaScript language when working with Jitter. You can use JavaScript to extend Jitter in the following ways:

  • To instantiate Jitter objects directly within JavaScript and create function chains of Jitter processes with procedural code.

  • To create Jitter matrices with JavaScript and access and set the values and parameters of Jitter matrices from JavaScript functions.

  • To use Jitter library operations - jit.op operators and jit.bfg basis functions, for example - to do fast matrix operations on Jitter matrices in JavaScript to create low-level Jitter processing systems.

  • To receive callbacks from Jitter objects by listening to them and calling functions based on the results.

This Jitter tutorial will help you with the basics of using JavaScript with Jitter.

Tutorial 45: Introduction to using Jitter within JavaScript

Node for Max

One of the really exciting new features in Max 8 release is its support for the Node.js JavaScript engine within the Max application. Node.js for Max isn't just a communications bridge between Max and the Node.js JavaScript engine. It strives to integrate them.

Want to see a couple of examples of the cool things you can do using Node for Max?

Shiva Kannan used the Node for Max module to write a Slack app that can convert a channel's real time messages to music using Max.

Chris Konopka's xeno-canto lets you create a bird sound sample with birds from around the globe using Node for Max.

Getting Started

The very best place to start getting into Node for Max is to sit down for a few minutes with Cassie Tarakajian:

Recipes for Success

Andrew Benson's astounding trio of Node for Max Recipes provide examples of using Node for Max in real-world situations, and run you step-by-step through inspiring activities that will open this world for you.

Node Recipe 00: Socket Drawings provides an example of sending and receiving realtime SocketIO data in Max, extracting dictionary data from JSON to a Jitter matrix, and combining server, client, and web interfaces.

Node Recipe 01: Installation Calendar demonstrates using ReactJS to generate a dynamic web front-end for Max, setting up an Express.js API for Max, and manipulating data stored in a file.

Node Recipe 02: The Crowd uses an agent simulation library to generate complex behavior and demonstrates how to pass dictionaries between Max and Node.

More Examples and Sources for Inspiration

The basic Node for Max examples follow the conventions of the JavaScript and Node.js communities — they use Github repositories for the examples. This allows us to be quicker to respond to change requests and to support the updates to the language and the libraries.

Note: Darwin Grosse and Florian Demmer have collected a number of questions about getting started with the examples we've provided, and have provided a great Q&A-format introduction to the available content.

There are actually three repositories, each with a different purpose.

The Node for Max Core Examples repository is the location of the most basic examples, and is authored and maintained by Cycling ‘74. This is the starting place for people that are new to either Node.js or Node for Max, and provides examples of good beginners’ patches and use of the API.

The Node for Max Examples repository tries to show complete (but limited in scope) projects using N4M. It extends the use of Node.js to do some ‘real world’ functions, including the creation of a simple web server, interacting with a third-party API, uploading files to your patch and using a music theory library for building chords. These examples make extensive use of npm libraries, which is a staple in the world of Node programming.

The Node for Max Community Repository contains links to projects, templates, hints and examples from the entire community. This is a constantly growing collection of work, and can be a great place to check out how people are approaching N4M, or what is already available!The list of projects is pretty interesting, ranging from YouTube video streaming to skeleton tracking using the PoseNet library, and you will bet to see other N4M developers in full-tilt action.

In addition, Christopher Konopka has created a GitHub repository full of amazing examples which provides a rich supplement to the repositories listed above. You won't regret the time you spend there.

There's More (And How To Find It)

I hope you find this listing of the basic JavaScript resources to be useful to you. If you've got any suggestions for further resources, feel free to add your suggestions in the comments.

Of course, using JavaScript with Max and Node for Max is an ongoing enterprise. The good news for Max 8 users is that they can use natural language search facilities in the Max application itself to look for answers or available resources, and to search Cycling '74 resources and Max Forum discussions from a single point: the Max search window. Although using Max 8's search isn't exactly a "secret Max trick," it is a real time-saver for the modern seasoned Max user.

by Gregory Taylor on November 10, 2020

Creative Commons License
loadmess's icon

Two URL's that I believe are worth sharing with the community:
This forum post contains lots of material for beginners and advanced users:
https://cycling74.com/forums/little-bible-of-js-syntax-in-maxmsp

and this URL for beginners:
http://hems.io/max.js/#/
* Perhaps you need to click somewhere in the box where information is shown, then use the cursor to navigate the website.