To display Processing Sketch or P5.js into Jitter (jit.matrix)
Hello,
I am looking for the way how to import a Processing Sketch(or P5js / or both) into Jitter's jit.matrix that I can display the code on jit.window. I've been researching a lot regarding this topic, but it was hard to find a way.
What I am trying to do in large is
1. Creating a visual art-related code by using Processing or its web-based cousin P5js.
2. Displaying the sketch by using Max's jit.matrix to get pixel information; for example, color values.
If you think neither (processing and P5js) might be an appropriate tool working with jitter. I would really appreciate if you could recommend something that I should work with. Since I feel more comfortable with using Processing for creative visual coding and somehow I have to use Max due to sound making purposes, I am trying to figure out a way that I can connect Max and Visual art-related programming language.
Thank you so much.
Look into using Syphon (for macOS) or Spout (for Windows), either of which will help you share frames from your sketch to Max.
For Processing sketches (in Java mode) use Syphon/Spout (as Scott suggested). For P5js there is no efficient method to transfer frames into Jitter (however, ironically, it's really easy to run P5js sketches inside Max using jweb).
Of course we are waiting for Max 8 now, so maybe jweb will receive some new features or the new object handling node.js will be able to share graphics data with Jitter in more efficient way.
For now you can also try some tricks: to grab portion of the screen with jweb running jour P5js sketch or - on macOS - run your sketch inside CefWithSyphon (WWW browser with Syphon build-in, https://github.com/vibber/CefWithSyphon) or any other browser configured to work with Syphoner (http://www.sigmasix.ch/syphoner/).
Scott, I really appreciate your reply. I believe Syphon is definitely a good option I can consider. Only drawback is that it doesn't allow me to open multiple processing sketches at the same time and import them into the corresponding jit.matrix. This is because I am considering to use jit.glue to attach more than one processing sketch and display in a single jit.window. Please correct me if I am wrong. Thank you.
Yaniki, Thank you so much for the information. I've tried jweb either. Since jweb doesn't have an outlet that I can connect with jit.matrix, I've been hesitating using jweb. I wonder if you have any idea how to bring jweb into jit.matrix? Thank you.
Unfortunately there is no robust way to create jit.matrix from jweb content. This is why I mentioned for Max 8 - maybe some new features will change this situation.
So far you may check my simple example showing how to establish communication between Max and P5js sketch loaded inside jweb: https://cycling74.com/forums/sharing-is-maxmspjitter-and-p5js (no matrices, just messaging).
you can display as many syphon streams as your CPU and GPU can handle. you will not use jit.matrix / jit.glue but instead jit.gl objects. here is a basic example:
Hello Rob, This looks great! I'll try it and let you know if I have any question. I appreciate it.
This got me pretty excited..... https://www.paweljanicki.jp/projects_maxandp5js_en.html
@SEANZHAOW: Recently I corrected a few bugs in the MaxAndP5js "miniframework", and also added a code illustrating how to use Max dictionaries from within P5js. I have to clean this version before publish, but it should be available this week.
In theory, if once [jweb] will receive features that enable export it's rendered content to matrix (as it is possible with [jsui]) or texture it will be possible to use P5js in deeper integration with Max (e.g. easy use of graphics generated by P5js in Jitter).
@YANIKI I am super interested! Is the cleaned-up version already available on your website? if not, I would appreciate if you could let me know when it is available. Thank you.
Sorry for the lag. It's nearly ready ;-) I'm still checking how it works on Max 7 and 8. In a few days it will be published.
https://discourse.processing.org/t/integrating-p5js-maxmsp/6334/3
and
https://www.paweljanicki.jp/projects_maxandp5js_en.html
links to the same mini framework. I'm glad that many of you are interested in this simple solution. I'm now a bit busy with other projects, but I regularly correct various minor issues and I'm going to another substantial update in autumn.
Thank you @YANIKI this is awesome. I downloaded it!
I have a quick question. Do you think it is still not possible to create "jit.matrix" from "jweb"? I am wondering if there's a way to display a "jweb screen" into "jit.pwindow".
There is no direct way to do it.
You can, however, perform various workarounds. For example you can use [jit.desktop] to capture portion of the screen to matrix, or transfer image data as a texture from WWW browser capable to handle Syphon or Spout protocols.
Thank you YANIKI!