Mandalica is a p5.js script that generates an ever-evolving, audio-reactive mandala. The script leverages microphone input, FFT analysis, and MIDI integration to create a visual experience where details and style can be dynamically controlled.
You can find a full video demonstration here
Uses microphone input and FFT analysis to generate a cyclic drawing path that changes in real time based on audio data. Audio parameters modulate stroke thickness, brightness, and deviation from a base circular path to create intricate patterns.
The cyclic path is replicated and mirrored around the canvas center with adjustable symmetry, resulting in kaleidoscopic visuals.
Six on-screen sliders allow you to adjust patch output.
Fade: Controls the fade overlay.
Color Sweep: Adjusts a cyclic color offset that modulates the RGB values.
Draw Speed: Alters the speed at which the cyclic path is drawn.
Base Radius: Sets the size of the base circle.
Deviation: Determines how much the audio input modulates the path’s radius.
Symmetry: Changes the number of symmetric copies drawn.
Fully MIDI-enabled for live performance and control:
Fade: CC1
Color Sweep: CC2
Draw Speed: CC3
Base Radius: CC4
Impact: CC5
Symmetry: CC6
Additional MIDI triggers (and corresponding keyboard shortcuts) allow for:
Toggle Fade: (via F or MIDI CC1 value < 3)
Reset Mandala: (via R or MIDI CC7 value > 64)
Randomize Sliders: (via Z or MIDI CC8 value > 64)
S: Toggle slider visibility.
Clone the repository:
git clone https://github.com/maxedonia/mandalica.git
cd your-repo-name
Running the Mandalica Patch Locally:
This project needs to be served over HTTP rather than just opening the HTML file directly in your browser. Below are two methods to serve your project using Git Bash, python or similar terminal.
-
Install Node.js:
If you haven’t already, install Node.js from nodejs.org. -
Install
http-serverGlobally:
Open Git Bash and run:npm install -g http-server
Start the Server:
Run the following command to start a web server on port 8000:
http-server -p 8000
-
Open the index.html file in your browser in your open port address
(Ensure your browser supports the Web Audio API and, for full functionality, the Web MIDI API.)
If you have Python installed, you can serve your project as follows:
For Python 3: Navigate to Your Project Directory:
cd /path/to/your/project
Start the Server in Python 3:
python -m http.server 8000
Start the Server in Python 2:
python -m SimpleHTTPServer 8000
Access Port: Open your web browser and go to:
http://127.0.0.1:8000
(Ensure your browser supports the Web Audio API and, for full functionality, the Web MIDI API.)
Click anywhere on the canvas to start the microphone input.
Use the on-screen sliders to modify parameters such as fade, color sweep, draw speed, base radius, impact, and symmetry.
Connect your MIDI controller to use the mapped controls for both the sliders and toggle functions.
You can find a full video demonstration here
Note: This patch was originally mapped for functionality with the Teenage Engineering OP-XY, but remains simple enough to employ on a wide variety of MIDI controllers.
License
This project is open source and available under the MIT License.