DEV Community

Wong Lok
Wong Lok

Posted on

Contemplating on idea of Flow Based Programming for WebGL / Canvas 2D

Why do I choose Flow Based Programming to Explore.

  1. Flow Based Programming is awesome because I love the part that we can modularise code with specific input output in a visual and mouse clickable way....
  2. The Natural Cables with IO feels like Vuejs Props and Events.
  3. Hmmm let's mimic props and events to a flow based paradigm.
  4. Here we gooooooo lol That's why I made my side Project Effect Node.

Sometimes, just Code as tool isn't enough....

  1. Writing Visual Effect is related a lot to Buttons, Sliders and Color Pickers.
  2. Waiting for reload to update a color tweaking is slow and ineffective.
  3. Sometimes we also need to use a Range Slider to adjust Effect Speed and Amount.
  4. Sometimes we also need to dynamically provide Timeline based fade in fade out sequence data into code.


The way I think about organising the creation, flow and consumption of animation data..... :)

There's a pull, there's push thinking....

I think there would be three types of modules

  1. Source of truth Module, like UI Sliders, Timeline, Color Picker
  2. RequestAnimationFrame Event Emitter
  3. Operational Module that handle animation setup and render.

I love thinking about different paradigms of programming.
Hope you like my work. woop woop. <3

Top comments (0)