Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Wong Lok
Wong Lok

Posted on

     

Turning my WebGL webapp into a npm library

Intro

My app is calledeffectnode.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.

Effect Node

Install

npm i enos--save
Enter fullscreen modeExit fullscreen mode

Demo

Live Demo with Effect Node Build with WebPack

Live Demo wihtout Effect Node

Live Demo with Effect Node

EffectNode Library

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.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I like WebGL, Canvas 2D and Three.js.
  • Location
    Hong Kong
  • Education
    Self-learn WebGL Developer
  • Work
    Front end Developer (dream to be an inventor) at EffectNode
  • Joined

More fromWong Lok

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp