ixfx is a framework for sketching and prototyping interactivity. It is designed for the beginning programmer, and is optimised for readability and safety over performance.
Please see the documentation for how to get up and running.
There are many 'front-end' frameworks, but these are typically meant for regular GUIs or document-based apps. They usually have idiosyncratic ways of structuring code, custom syntax, and elaborate build processes. Great though if you're doing that kind of thing often.
There are also several 'creative coding' sandboxes. These are better suited than front-end frameworks for experimentation in interactivity, but again tend to be their own little ecosystem removed from the web platform. They favour Canvas-based visuals, and seem largely ignorant of the wider web platform or modern coding practices.
In both cases one spends a lot of time learning the particular framework and its way of doing things rather than the web platform itself. Learning Javascript as a language also gets lost in this. Having to ask "how do I do x in React?" or "how do I do x in P5.js?" is a sign the framework has eaten you.
Some principles are:
- No build process required
- No sandbox lock-in: follow web platform conventions so that patterns learned can be applied elsewhere
- Good type definitions and documentation for improved editor experience (in VS Code at least)
- Plain, immutable data over rich objects
- Favour functional approaches over OOP
ixfx offers:
- Flow: state machine, time-based delay/intervals, debounce, throttling
- Modulation: ADSR envelope, oscillators, easing functions
- Data: generators, frequency-tracking, stack and queue collections, colour functions
- Geometry: primitives for Cartesian & polar coordinates, points, lines, arcs, circles and grid layouts.
If you want to contribute to ixfx or build it yourself, please see BUILDING.md.
Bundles
- d3-interpolate, d3-color by Mike Bostock
- Easing functions by Andrey Sitnik and Ivan Solovev
- Bezier.js
- Underdash by Surma