Composr is a flexible platform for creating realtime sound reactive visualizations. Composr is meant to work completely in the browser, rendering over WebGL using THREE.js.
See it live at https://www.composr.xyz/
To run the dev local server, on the command line, run:
$ npm install
$ npm run devThen point your browser to http://localhost:8080
There are three main components to the project:
Contains classes for Geometry, Materials (Shaders) and Geometry Deformers. These are contained in the appropriate folders. When creating a new type, it should inherit from ComposeObject (or more specifically, from one of the abstract types in js/scene). Look for their documentation to learn more about their logic and life cycle.
Objects should be registered, so that the system can know about their constructor using ComposeObject.registerObject
VisController is the main controller for visualization. It contains the THREE.js scene, and updates all the scene components every frame.
ComposeLayer contains a layer logic, and data about Deformers and ComposeMesh (that contains material and geometry).
UI is rendered using React.js. All components used in this project are under /app/components, or imported from React Material. ComposeObjects also contain custom UI for their components. Every implementation of ComposeObject can contain a renderUI function that can be overridden and should return a JSX object.
This component will be rendered using a generic react component that looks for that function under app/components/common/composeElement.js
UI components that display data of objects are connected to the redux store, and update accordingly.
The state for the visualization is saved consistently in a Redux store instance. Any object that inherits from ComposeObject will automatically add itself to the scene part of the store, under the type returned by ComposeObject.type
In addition, real-time data (from the microphone) is passed through the dataSource reducer.
Most store functions are accessed trough this storeAPI. You can retrieve and update store data through this interface.
See CONTRIBUTING.md for details.