Processing - MagicalTrailShader ambisonic energy visualizer via p5 osc

This script visualizes ambisonic energy as the so-called "Magical Trail Shader", processed with the IEM EnergyVisualizer onto p5.js canvas via OSC messages.

Description

This script is based off on Jason Labbe's "Magical Trail Shader" P5.js OpenProcessing sketch. In this version, the animation is not excited by the mouse pointer, but by the ambisonic soundfield energy sampled on the 426 points on the IEM EnergyVisualizer's grid. These values are fed to the script via the P5.js OSC node.

Installation

1. Install the Processing IDE

2. Install P5.js mode in the Processing IDE:

   

3. Install Node.js

4. Install git

5. Add the Large File Support (LFS) and longpaths to the git environment:

   git lfs install
   git config --system core.longpaths true
   git config --global core.protectNTFS false

6. Clone the p5js-osc repository and install it:

   git clone https://github.com/genekogan/p5js-osc
   cd p5js-osc/
   npm install

7. Download the MagicalTrailShader_p5osc.js script and the accompanying packages from this repository

8. Install the VST host of your choice

9. Install the IEM Plug-in Suite

Getting started

1. Open the OSC node from the p5js-osc installation directory:

   node .\bridge.js

   This will ensure the OSC connectivity between the P5.js script and the other system apps. Whenever an app connects to the OSC port, the console window will write the "connection" message.

   

2. Open the FrozenBush_p5osc.js script via the Processing IDE and run it -- it should open a browser window

3. Open the VST host, set up an ambisonic track and add EnergyVisualizer VST plugin. Set up EnergyVisualizer OSC to send messages to the listening port in the Processing script (the default port number for this script is 12001)

   

4. Play the audio and observe the animation! 🙂

Support

All questions, comments and insights please address to me via e-mail: bartlomiej.mroz@pg.edu.pl

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Additional info

For the detailed usage of the p5js-osc script, I recommend checknig out my other tutorial on this: https://discourse.processing.org/t/using-osc-messages-in-processing-in-p5-js-mode/43871/2

I recommend checking out Daniel Rudrich's script for real-time visualizations of EnergyVisualizer's data via OSC in Processing: https://github.com/DanielRudrich/EnergyVisualizerOscDemo

Another interesting example of using EnergyVisualizer with OSC to trigger visual effects is this TouchDesigner demo: https://spatialmedialab.org/touchdesigner-x-iem-template/