DEV Community

Wong Lok
Wong Lok

Posted on

2

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.

EffectNode

https://github.com/EffectNode/EffectNode-GUI

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay