Turning my WebGL webapp into a npm library

Intro

My app is called effectnode.com It's a flow based creative coding platform for developers and designers to work together :)

To share the technology with the whole world, i would like to turn it into a front end only library so that all developers can play with what I made.

Install

npm i enos --save

Demo

Live Demo with Effect Node Build with WebPack

Live Demo wihtout Effect Node

Live Demo with Effect Node

How does it work?

To organise code, we uses modules, just like the idea of es6.

With creative coding, we often needs designer input like coloring, sizing, animation seed, effect amount and timeline and so.

Each module can host its own value sliders, color picker and timeline.

The reason I adopt flow based coding is that it can pass animation data in a visual way and also provide a rapid way to compose effect or mix and match value in desing wise.

Example

There are two modules in the demo picture above.

1. Main Loop Module
2. Dom Updater

The mainloop module runs a requestAnimationFrame loop and emit render events to a message bus (a vuejs instance)

The Dom Updater modules receive the render event from the message bus and then animate the CSS background linear-gradient of the root DOM of the project.