» VL: Reactive Programming
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

VL: Reactive Programming

Here is something really great. The new Reactive category gives you tools to handle asynchronous events, background calculations and even enables you to build your own mainloop that runs on a different CPU core. But let's start with a pragmatic explanation of what it is:

André Staltz said

Reactive programming is programming with asynchronous data streams

In a way, this isn't anything new. Event buses or your typical click events are really an asynchronous event stream on which you can observe and do some side effects. Reactive is that idea on steroids. You are able to create data streams of anything, not just from click and hover events. Streams are cheap and ubiquitous, anything can be a stream: variables, user inputs, properties, caches, data structures, etc. For example, imagine your Twitter feed would be a data stream in the same fashion that click events are. You can listen to that stream and react accordingly.

On top of that, you are given an amazing toolbox of functions to combine, create and filter any of those streams.

Since a while VVVV and VL use these so called Observables to handle external events (i.e. mouse, keyboard etc.) and asynchronous data. This was mostly under the hood and the actual operations for observables are hidden in the VL.DevLib. The reason is that out of the box the operations do not go well together with the frame based Update concept of VL because they are intended to be called only once or when something has changed. But as of now we have wrapper nodes for the most common observable operations that do exactly that, listen for change and only rebuild the observables when necessary.

Processing events

The go to node for handling events is definitely ForEach Region (was Region (Stateful) in earlier versions) in the category Reactive. This region allows you to place any node inside and can also remember any data between two events. There is also one with version Keep that can filter out events using a boolean output. This region is very similar to the ForEach region for spreads, only that its input and output is event values in time instead of slices of a spread.

Refresh web data every 30 seconds in the background and pass the result on to the mainloop.

You can switch or merge event sources:

Switching or merging midi events.

There are also filtering options with OfType or Where:

Only get TouchDown events from a combined event stream

Other nodes include Skip, Delay, Delay (Selector), Scan, Switch, ...

Receiving events

If you want to leave the observable world and pass event values to the mainloop use one of the 3 nodes HoldLatest, Sampler or S+H which all behave a little bit different. Depends on what you need:

Three ways to get event values to the mainloop.

Creating events

It's also pretty easy to generate event sources of your own:

Different ways to create observable event sources.

As a general advice, only send values of type Record as event data because they are thread safe. If you send values of any Class type be sure that you know exactly what you are doing.


Yep, totally possible and has useful applications. But i am just gonna let this idea sink in for now...

Further reading

The above just scratches the surface of whats possible with the reactive framework. If you want to know more browse some of the following links:

The pragmatic Rx expert from the quote above:
2 minute introduction to Rx

Visual explanation of the observable operations:
Operator Reference with marble diagrams

Videos from the creator team. Note that IEnumerable is called Sequence in VL and Spread is also a Sequence:
Erik Meijer: Rx in 15 Minutes
Erik Meijer and Wes Dyer - Reactive Framework (Rx) Under the Hood 1
Erik Meijer and Wes Dyer - Reactive Framework (Rx) Under the Hood 2

For coders:
Introduction to Rx

tonfilm, Thursday, Apr 13th 2017 Digg | Tweet | Delicious 12 comments  
u7angel 13/04/2017 - 09:19

mostly understood but what does this sentence mean ?

tonfilm said
The goto node for handling events is definitely ForEach Region in the category Reactive.

tonfilm 13/04/2017 - 12:25

@u7angel that means that the Reactive ForEach region can solve most tasks when it comes to event processing. ForEach, Reactive and Region (was Region (Stateful) in earlier versions) are choices you have to make in the node browser in order to create it:

u7angel 13/04/2017 - 12:27

aha...haha. i thought you were talking about the "goto node" since there is goto in c#.

tonfilm 13/04/2017 - 12:46

oh, i see. that should probably be two words! :) fixed...

sebl 13/04/2017 - 16:53

heyho, what about some helppatches or girlpowers that explain the most common scenarios like you did here?

the handling of new regions are hard to find out, especially when the inputs are labeled Arg0, Arg1, Arg2 ...

Or did i miss them? (i'm not so familiar with lib/packs, yet)

sebl 13/04/2017 - 17:09

and another question:
why do i have different nodes than on your screenshots.
for example, my OfType and Merge are no patches themselves and so not editable. but you have this little arrow, so it seems to be a patch.

joreg 13/04/2017 - 17:17

@sebl: the arrow-icon is a setting. you can try Quad>Settings>Reset to defaults. also try to simply middleclick on any of those nodes and you should still be able to jump to their patch.

sebl 13/04/2017 - 17:18

and maybe this is a small issue:


i thought the enum should update accordingly to upstream?

sebl 13/04/2017 - 17:21

i know that setting, but i's not a patch here. OfTypReactive.Observable for example is not editable.

tonfilm 13/04/2017 - 17:29

@sebl was splitting the reactive nodes out into its own file but forgot to add that new file to the CoreLib package so you were missing all the wrapper nodes in the category Reactive (not Reactive.Observable). new build coming up!

tonfilm 13/04/2017 - 18:20

@sebl try now again...

sebl 13/04/2017 - 22:29

great, here they are!

  • 1

anonymous user login


~5d ago

joreg: Workshop on 22 02: Unlocking Shader Artistry: A Journey through ‘The Book of Shaders’ with FUSE. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-12-book-of-shaders/

~16d ago

joreg: Talk and Workshop on February 15 & 16 in Frankfurt: https://visualprogramming.net/blog/vvvv-at-node-code-frankfurt/

~18d ago

woei: @Joanie_AntiVJ: think so, looks doable

~18d ago

xd_nitro: Anyone remember who increased projector brightness by removing some components that product the color?

~19d ago

Joanie_AntiVJ: This looks super interesting (vectors over network) would anyone here know how to implement this in beta? https://github.com/madmappersoftware/Ponk

~26d ago

joreg: Workshop on 01 02: Data Sensing and Logging with Arduino Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-09-data-sensing-and-logging-with-arduino-and-vvvv/

~1mth ago

domj: I've added myself to vvvv specialists available for hire See at the bottom, lmk if you want to collab or in need of tutoring! ❤️

~1mth ago

joreg: Workshop on 25.01: Create Sequencers and Precise Clock Based Tools. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-08-create-sequencers-and-precise-clock-based-tools-in-vvvv-gamma/