/conjurer

Primary LanguageTypeScript

Conjurer

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.

Overview

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.

Concepts

  • 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"

Developing

We manage dependencies with yarn.

# install dependencies
yarn

# run the app with hot reloading on save
yarn dev

Tips

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

Scripts

yarn generateCanopy generates canopy geometry data and stores it in src/data/canopyGeometry.json

Todos

Captured in the "Road to Minimum Viable Magical Product" issue.

Performance notes

  • In general, be wary of memory leaks. They can be caused by nextjs hot reloading.