Skip to content

An animated particles visualizer that reacts to audio and controllable through MIDI input

Notifications You must be signed in to change notification settings

adarkforce/3d-midi-audio-particles-threejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Particles Music Visualizer with MIDI controls in Three.js

Screenshot

Demo

DEMO

Instructions

  • Audio
    • Audio Input: Select your audio input.
  • Midi
    • MIDI Input: Select your MIDI interface.
  • MIDI Mapping
    • Storage
      • Mapping Name: Choose a name for your current MIDI mapping preset to Save/Load.
      • Load Mapping: Load a MIDI mapping preset from storage with name corresponding to Mapping Name.
      • Save Mapping: Save the current MIDI mapping preset to storage with name corresponding to Mapping Name.
      • Erase Mapping: Erase a MIDI mapping preset from storage with name corresponding to Mapping Name.
    • Saved Mappings: A list with all the currently saved MIDI mappings. Click on one to load it.
    • New Mapping:
      • Property: The property of the particles to automate with the new mapping.
      • Max Value: The maximum value that the current mapping will reach.
      • Min Value: The minimum value that the current mapping will reach.
      • Current Control: The last listened midi control id received. Only Control Change Events are supported for now (Means knobs and faders usually).
      • Start / End Mapping: Toggle button to start midi mapping. When pressed start listening to midi messages, and when pressed a second time saves the midi mapping, with the associated particles parameter.
    • Loaded Mappings: Shows the list of mappings that have been loaded/created by the user. Clicking on a mapping removes it.
  • Controls: Manually control the particles parameters.

Running locally

# Install dependencies (only the first time)
npm install

# Run the local server at localhost:8080
npm run dev

# Build for production in the dist/ directory
npm run build