[sharing is...] MaxMSP/Jitter and P5*js

yaniki's icon

MaxMSP/Jitter and P5*js - a simple solution for interfacing "patches" created in MaxMSP/Jitter and "sketches" written in P5*js (http://p5js.org).

This is a side effect of my current work on some projects with WRO Art Center, dæd bɑɪtz, and others. It's an simple interface allowing communication between the MaxMSP and P5*js sketches loaded into Max [jweb] object, but can be very useful... for small number of people.

This "solution" is very basic, but may be easily adapted to individual needs, so I decided to share it with you.

Btw: Using the P5*js together with Max is opening some new horizons (I explore this issue for some time). I will try to elaborate on this in the near future.

maxmspandp5js_700x413px.jpeg
jpeg
mheton's icon

thx for sharing

Steve C's icon

Thank you for sharing this! Huge p5.js fan!

yaniki's icon

Dear Friends!

I have updated (and simplified) the instructions a bit.

Generally, to communicate P5js sketches loaded into Max [jweb] object with the parent patcher we have to avoid namespaces conflict between Max and P5js APIs. Fortunately, there is a very simple solution for this: just run your P5js sketch in so called "instance mode" (not default "global mode").

Example project and details: https://www.paweljanicki.jp/projects_maxandp5js_en.html

yaniki's icon

I have slightly updated example project by adding a mechanism to enable/disable background (opaque/transparent switching). So now it is possible to use P5js sketch loaded into MaxMSP [jweb] object as a transparent "layer". This should make a little bit easier to create your own GUI elements in P5js - you no longer need to adjust the background color of the p5js sketch to the background color of the patch in MaxMSP.

Project's URL is still the same: https://www.paweljanicki.jp/projects_maxandp5js_en.html

yaniki's icon

Dear Friends

I have updated MaxAndP5js a bit. I added a second example, showing how to launch (from a jweb object in MaxMSP) a p5js sketch using Vida library for simple motion detection.

Snickers's icon

Bless you @Yaniki!

yaniki's icon

Dear Friends

I made some updates to the project: on the p5js side I refreshed the syntax of the example sketches (no more var!) and compatibility with new versions of Max is improved (8.2!).

Oh, and there is a new example: Euclidean/Bjorklund's rhythm generator (easy to adapt to any algorithm for generating rhythmical patterns). Bjorklund's algorithm is implemented on p5js side (JavaScript) and you may find Max-native, more robust, versions on the forum (e.g. https://cycling74.com/forums/using-euclideanbjorklund-algorithm-for-rhythm-generation-purely-in-max), but you can, with very little effort, integrate your preferable - Max-native or not, Euclidean or not - rhythm generator with the a handy GUI solution for visualising rhythmical patterns used in this example.

yaniki's icon

Dear Friends

I updated my pet-project MaxAndP5js - a simple solution for interfacing "patches" created in MaxMSP/Jitter and "sketches" written in p5js (https://p5js.org).

This time I added another example and corrected the descriptions of the existing ones. So, we now have the following examples:

01_messaging_and_dictionaries - basic mechanisms, messaging, sharing dictionaries between Max and p5js;

02_camera_and_motion_detection - simple "camera and motion detection based instrument". Motion detection is made "inside" jweb (and p5js sketch loaded into it) using Vida library (https://www.tetoki.eu/vida) for p5js;

03_euclidean_rhythm_generator - Euclidean/Bjorklund's rhythm generator (easy to adapt to any algorithm for generating rhythmical patterns). Bjorklund's algorithm is implemented on p5js side (JavaScript) and you may find Max-native, more robust, versions on the forum (e.g. https://cycling74.com/forums/using-euclideanbjorklund-algorithm-for-rhythm-generation-purely-in-max), but you can, with very little effort, integrate your preferable - Max-native or not, Euclidean or not - rhythm generator with the a handy GUI solution for visualising rhythmical patterns used in this example;

04_generative_text_with_rita - a text generator based on RiTa library (https://rednoise.org/rita) for p5js. Generating sentences based on Markov strings, access to the RiTa lexicon (random words, rhymes). It's only a small fraction of RiTa features exposed in this example, but it is relatively easy to bind more RiTa mechanisms to your patch.

Shane's icon

Thanks so much for sharing this! I have been playing with the RiTa example, and it works great in the patcher, but I'm not sure how to make it work in a standalone app. I think I know where the problem lies: in the use of "thispatcher" to call the p5js/index.html and the text2dict patch, but I don't know how to rework it for standalone. (I'm sure this is not difficult, but I'm new to Max and can't figure it out.) Any help would be much appreciated!

yaniki's icon

Hello Friends

A small update: a new example, a speech-to-text mechanism in external browser combined with Node for Max based messaging for receiving data in Max and controlling parameters. Link (the same as always):