Reactive

Reactive is a flexible React wrapper for creative coding libraries, enabling easy setup and interoperability between a diverse array of packages.

Currently, Reactive includes frames for the following libraries:

Visual
- Canvas (WebGL)
- Canvas (2D)
- SVG
- p5.js (Processing)
- Framer Motion
- twgl.js
- Regl
- SnapSVG
- Hydra

Audio
- Web Audio
- Elementary Audio

Installation

npm install reactive-frames

Usage

- Enclose everything within the main frame, .
- Each library is a Frame component which can be passed any number of appropriate Children components.
Here is a hierarchy of allowed components:
``

// a generic component for creating/updating props

// The p5.js library, in its own canvas
// a canvasGL instance that can adapt to window size
// A WebGL draw call using twgl.js
// A WebGL draw occupying the whole canvas
// A WebGL framebuffer
// A WebGL texture
// p5.js with a WebGL canvas you create

// a canvas2D instance that can adapt to window size
// p5.js with a 2D canvas you create

// a regl.js instance in its own canvas
// a Hydra instance in its own canvas
// a Snap.svg instance

// an audio Context (initialize with a button)
// Elementary audio


`

Each component must be provided a name, and then can call a setup and a draw function. Setup is executed on page load, while draw` is executed every frame.