Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A javascript VFX patch that uses reflective geometrics & audio input characteristics to create a musical mandala effect in-browser & in real-time.

maxedonia/mandalica

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 

Repository files navigation

mandalica

Audio-Reactive Mandala Visualizer

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. mandala_git_gif1 You can find a full video demonstration here

Features

Dynamic Audio-Reactive Visuals

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.

Symmetry & Mirroring

The cyclic path is replicated and mirrored around the canvas center with adjustable symmetry, resulting in kaleidoscopic visuals.

Customizable Parameters

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.

mandala_git_gif2

MIDI Integration

Fully MIDI-enabled for live performance and control:

Parameter Mapping:

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)

Additional Keyboard Shortcuts

S: Toggle slider visibility.

Installation

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.

Option 1: Using Node.js and http-server

  1. Install Node.js:
    If you haven’t already, install Node.js from nodejs.org.

  2. Install http-server Globally:
    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
  1. Open the index.html file in your browser in your open port address

    http://127.0.0.1:8000

(Ensure your browser supports the Web Audio API and, for full functionality, the Web MIDI API.)

Option 2: Using Python's Built-In HTTP Server

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.)

Usage

Activate the Microphone:

Click anywhere on the canvas to start the microphone input.

Adjust the Visuals:

Use the on-screen sliders to modify parameters such as fade, color sweep, draw speed, base radius, impact, and symmetry.

Control via MIDI:

Connect your MIDI controller to use the mapped controls for both the sliders and toggle functions. mandala_git_gif3

You can find a full video demonstration here

vid demo image

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.