Conjurer is a web app that allows one to design audiovisual experiences for the Canopy of Luminous Conjury, a large LED art piece by The Servants of the Secret Fire.
You can think of Conjurer as an in-browser Digital Audio Visual Workstation, similar to the concept of a Digital Audio Workstation (DAW). Whereas a DAW is used to arrange and produce audio compositions, Conjurer aims to provide the ability to arrange audio and visuals into an "experience" which can be saved and played at a later time.
- Pattern
- A fragment shader that generates a texture (an image) based purely on parameters (uniforms)
- This texture can either be rendered directly to the canopy or passed to an effect
- Effect
- A fragment shader that accepts a texture and applies an effect based purely on parameters, outputting a new texture
- Just like a pattern, this texture can either be rendered directly to the canopy or passed to an effect
- Note: Identical to patterns, except that effects accept a texture as an input
- Parameter
- This is a value that tweaks what is being generated by a pattern/effect
- "Color", "Fuzziness", "Radius" for example
- Parameter variations
- Changes over time applied to a pattern/effect parameter
- "Change the color from blue to green over 5 seconds"
We manage dependencies with yarn
.
# install dependencies
yarn
# run the app with hot reloading on save
yarn dev
- In this repo, patterns/effects at their core are just fragment shaders. They may seem scary at first, but with a proper introduction like in The Book of Shaders, you too could wield their considerable power!
- We use Chakra for our UI in this repo. Check out the available components here as well as the default theme
- We use MobX for state management. It's not Redux!
- We use ThreeJS and React Three Fiber to render the shaders/3D canopy.
- We use
react-icons
- just search for what you want and import the icon from the correct place. - We use
recharts
to do some simple graphs.
yarn generateCanopy
generates canopy geometry data and stores it in src/data/canopyGeometry.json
Captured in the "Road to Minimum Viable Magical Product" issue.
- In general, be wary of memory leaks. They can be caused by nextjs hot reloading.