VL: Reactive Programming

April 12, 2017 posted by: tonfilm

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:

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


Comments are no longer accepted for this post.

13.04.2017 - 09:19

mostly understood but what does this sentence mean ?

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:

13.04.2017 - 18:20
@sebl try now again…
13.04.2017 - 22:29
great, here they are!
13.04.2017 - 12:27
aha…haha. i thought you were talking about the “goto node” since there is goto in c#.
13.04.2017 - 12:46
oh, i see. that should probably be two words! :) fixed…
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)

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.
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.
13.04.2017 - 17:18

and maybe this is a small issue: bugorfeature

i thought the enum should update accordingly to upstream?

13.04.2017 - 17:21
@joreg: i know that setting, but i’s not a patch here. OfType for example is not editable.
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!



vvvv - Dießl & Gregor GbR
Oranienstrasse 10
10997 Berlin/Germany
VAT: DE275566955


Follow us


Sign up for our Newsletter

Your subscription could not be saved. Please try again.
Your subscription has been successful.