DEV Community: Wong Lok

Make Cables and Boxes in Code Directly.

Wong Lok — Sun, 17 Jan 2021 22:17:57 +0000

https://gist.github.com/wonglok/cdb7cf080f6263872b4042eeaae6f1ca

Assisted Graphics Engineering ToolSet

Wong Lok — Fri, 30 Aug 2019 03:27:07 +0000

The Assisted Graphics Engineering Toolset (A.G.E.) is actually my old concept called ShaderNode. It’s basically a node based remixer for GLSL in a function tree…

But in A.G.E, it has multiple output.

There are a few reasons I build shader node / AGE system

GLSL is hard to Guess the Output with just code.
GLSL is new to a lot of Web / JS Developers. a Modular System may help things out.
At the early stage of GLSL market, it is quite hard to debug because all you got is a Blank Screen when there’s a small bug. But fortunately, thanks to Three.JS’s error debug line system. It’s easier now to debug. But there’s always space for improvement for everything in life.
Normal Setup don’t have live update for GLSL per keystroke. You may rely on third party plugin of chrome or use fire fox debugger.
Setup GLSL execution isn’t as easy as a simple web page visit.
Execution Isolation for debugging and for basic profiling, when we disconnect the module, it wont be executed or even included into execution environment.
DataType for Arguments / IO of Module. Avoids typing mistake of argument type.

A. G. E.
Github

I would love to have a call for dialogue for your way of composing GLSL. Please let me know...

How do you write glsl? do you use any software to assist the development process of glsl?
What’s your creative process for developing GLSL?
What do you think I should try to code / explore the possibility of development experience.

I made a visual code organiser for THREE.JS

Wong Lok — Sat, 01 Jun 2019 14:25:07 +0000

here's the github project
https://github.com/EffectNode/en-node-graph-gui

The editor engine is open sourced and the backend only stores data but is in private source due to security reasons.

Vuejs is so awesome...

it can help me make a SVG graph easily without other UI library.
it can help me to build the execution envrionment code for the iframe easily so that i can put the user logic within iframe to make things safer.

Three.js is awesome...

It can help me use a scene graph to compose a tree structures of items.
It can help me focus on coding the graphics not the structure setup..

My little software is awesome... XD lol hahahahahaha

https://igraph.effectnode.com/

It can help me reduce effort for setting up stuff like resize handler, how should things be structured and organised.
It can help me organise content with the same strcutrue of scene graph.
It can help me input human values such as timeline timing easily.
It can help me to make life easier by storing code online so that i can share them easily.

Thank you so much for reading my post.... :D

My Effect Node got nominated by Webbys Top5 WebSite Tech Achievement YAY!

Wong Lok — Fri, 05 Apr 2019 01:04:42 +0000

OH MY EffectNode.com

I was so surprised that I could even win the Webby Nomination.

Link To Webby Vote

Please feel free to try the library npm -i enos; it's fully open sourced on github and also front end only.

Enjoy! :)
woop woop! :D

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

(Gist) Similar to a Geometry Shader with GPGPU and Three.js

Wong Lok — Mon, 11 Feb 2019 21:11:20 +0000

https://gist.github.com/wonglok/66760f51d56bb1acf833dcbb4f987e78

https://github.com/KindnessAPI/KindnessAPI/blob/master/gl/vertexer/index.js

Turning my WebGL webapp into a npm library

Wong Lok — Thu, 31 Jan 2019 21:38:17 +0000

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.

Main Loop Module
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.

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

Wong Lok — Sun, 27 Jan 2019 08:20:52 +0000

Why do I choose Flow Based Programming to Explore.

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....
The Natural Cables with IO feels like Vuejs Props and Events.
Hmmm let's mimic props and events to a flow based paradigm.
Here we gooooooo lol That's why I made my side Project Effect Node.

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

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

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

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

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