The O'Reilly/Rhino Book and Using JavaScript in Max

Author’s note: If you are annoyed by the clunky nature of scope in JS and you know what a closure is then this article is not for you!

A lot of us live in Max because we are not at home in text based languages. We love laying things out spatially (and using patch cords for connections) so we can visualize how it all works. Also, learning a text based language seems like a lot of hard work. Maybe we just want to get on with life and gigs!

Even though I learned PASCAL at college, I was always annoyed by it. Why do I have to declare a variable? That just seems like a waste of time. Working on Max is a breeze compared with trudging through syntax errors in a text editor.

As I progressed in my use of Max, I found myself running into patching situations which were really difficult. Trying to do anything procedural in Max is tricky. That game engine I tried to do was a buggy nightmare. The MIDI based melody harmoniser was a pile of spaghetti. When I tried to make a Max patcher for a show which had a large text element to it - creating sentences on the fly with dynamic content, I really struggled. These kind of procedural problems are much more easily and powerfully solved in text based languages.

Cue the JS object. I looked at some of the example code coming out of engineering, and it didn’t seem too bad, so I just dived in. I was told to buy one book: O’Reilly’s Javascript - The Definitive Guide.

Here’s a picture of one of my copies of it.

You can see on this one I have got the “bathtub rings” off to a pretty solid start. It’s not anywhere as bad as the copy I had which fell apart. My problem is that I have the memory of a goldfish when it comes to syntax - as soon as something compiles ok and works, I forget how I did it.

Ok, so why is this a great book?

I’ll admit that I actually use less than half of this book. There is so much in there for people writing JS for web pages which is not at all applicable for the use of JS in Max. So I only really use it to understand the way the language works, and as a language reference. Also some of the examples are pretty useful. You can start reading it from the front to get an introduction into the Javascript language.

You could also get started with JS in Max by bookmarking one of the JS reference sites, like MDN's JavaScript Reference.

But if you’re like me you still enjoy flicking through an actual book. It’s not the cheapest book in the world, but pre-owned versions can sometimes be found. I know for a fact that this book has saved me countless hours of wandering around in the dark, and that is what makes it worthwhile. I can get solid answers and clear examples of the things I am looking for - I trust it!

So, now that we have a good language reference, let’s started with JS in Max.

Open up a patcher and create a JS object, then open the help file for it and hit the “open” message.

Save the file jshelptest.js into a new folder with a new name. Then create a new patcher in the same folder as the JS file you created and make a new js object which contains your js filename as an argument.

Now you can start playing around with the patcher - look at how messages and objects you put into your patcher interact with the code inside the JS object.

Now you can start to make modifications to the code inside your file and test the results in your patcher. You’re off and running! Stick some functions from the code examples in the Definitive Guide into your patcher and see how you can make them work for you.

One other very important information stack you will need is the Javascript in Max documentation.

These pages tell you how we have added Max specific objects and functions to the Javascript language in Max. There is a whole world of interactivity with the Max patcher and Max objects available from JS; it is an extremely powerful tool for enhancing your Max programming. For example, Javascript is the most effective way to program the Max for Live API, and it’s also the best way to deal with the volume of information you can get from the maxurl object.

If you want some more example code - and the chance to do some graphical output - you can check out the awesome Javascript code in the famous Mgraphics Patch-a-day series in the forum.

In no time at all you could be making your own JSUI externs for customising the look of your work. Believe me - it’s worth the effort!

Happy Patching!