50: Colors

November 4, 2014 posted by: joreg

helo nerds,

this is the second in a series of blogposts about our forthcoming nextbigthing that we still call vvvv50 (50). If you haven’t already done so please first read the last issue with the title:

Now here is the first real treat. We’re starting with a simple one: Colors, or how we like to call them: Operations.

First here is a bit you may not have been aware of: When in vvvv45 (45) you create subpatches this is actually only for your own sanity. vvvv itself does not see those but only deals with all your nodes as if they were in one big patch. So in 45 every cascaded system of patches can actually be seen as only one very big patch. And even more so actually everything together can be seen as one big function/operation that is executed every frame. Quite shocking, innit? In 50 this is very different in that the visual structure has actual meaning to it. Good news: You can keep your assumptions, only now they will really work out.

Defining Operations

As an example let’s have a look at two patches in 45 which are called “PointIsWithinCircle” and “PointIsWithinRectangle”:

Two 45 patches defining one operation each.

So here each of the two operations is defined and saved in a separate .v4p file. In 50 they look basically exactly the same only that they can also be defined together in one patch like so:

One 50 patch defining two operations.

And you really can collect any number of such helper-operations in one patch by just selecting a group of nodes and giving them a name. Like this multiple operations can be saved in one .vl file. Now this is obviously cool on the one hand but you may also immediately think of scenarios where this has more implications (think: project structure, versioning,…). But let’s not ruin the party with such thoughts already. So anyway you just learned that in 50 a patch can be a container for defining more than one operation. Easy.

Having a closer look at the 50 screenshot you see something you haven’t seen before. People call those things “Colors” and while they are basically evil, when used in the right way they can actually be quite helpful. Here we use them to visually distinguish between different operations in one patch. You may argue you’d not need colors for this because the operations are all placed next to each other anyway. Indeed, but note that this is really just the most simple case. Think of multiple operations in one patch exchanging data (via links) between each other…we’ll come to that in a later blogpost.

For people familiar with c# here is a transcription of the patch that you see:

static bool PointIsWithinCircle(Vector2d point, Vector2d center, float radius)
  return output;

static bool PointIsWithinRectangle(Vector2d point, Vector2d center, Vector2d size) { //implementation return output; }

So you also see how 50 clearly translates the signature of such operations to a visual representation with the colored header and footer of the operation resembling the function-header and line of return that are embracing the implementation.

Here is another example of an operation returning multiple results. Again nothing special you’re already used to that from 45 only here the colors encompassing the output pins speak a clearer picture.

50 operation with multiple outputs.

Using Operations

You know from 45 that any operation you defined in a patch can be placed as a node inside another patch. Same in 50. Doubleclick a patch to bring up the nodebrowser and select the operation you want to use as a node.

50 nodes with ugly font-rendering.

So all-in-all no big deal right? Only that inch better and finally, colors. Have a suggestion where we would allow users to choose their own colors? Get a life…

…but then also come back for the next article in this series revealing more awesome from the future of programming.

Liked what you read? Insert coin: /downloads|vvvv.


Comments are no longer accepted for this post.

04.11.2014 - 12:52
color: resistance is futile
04.11.2014 - 16:11
i used to love black & white, 16mm, celluloid, providing a huge projection screen for all sorts of emotions. e.g. https://vimeo.com/37825442 anyway. colors seem to be the future. this is so ah!
05.11.2014 - 00:52
yellow man! misleading coincidence… whats meant here is just a vector with 2 dimensions, not really a particular data type.
05.11.2014 - 16:21
this is looking so so good
05.11.2014 - 20:41

hehe colors …has someone seen the movie : the artist ;)

Very nice

05.11.2014 - 21:32


Would be nice to draw the selection in a polyline manner instead of rectangular selection only. Like drawing an area around a set of nodes which would put them in a group visually … or not just coloring the links and pins of the operations but also the used nodes. Oh well, sorry, asking for too much!

Thanks, looking forward.

06.11.2014 - 16:26


blame Noah Webster:

maybe we could agree on coolor?

07.11.2014 - 15:02
when can we have a test drive ? node festival is 6 months away. seems ages…
07.11.2014 - 15:05
and a (rough) roadmap would be nice
08.11.2014 - 03:17
PointIsWithinCircle.v4p seems buggy :D
04.11.2014 - 16:33
04.11.2014 - 16:54

will it be possible to have some kind of config file where we can define our color charts, based on our habits ?

Looks like GUI problem remains the same if you don’t give us any tools to make patch cleaner.

Indeed, it is possible to have really clean and tidy patches but it takes so much time… because we can mess up things in two dimension in vvvv and this CTRL+L shortcut is for big hands only.

Can’t wait to try this new beta though. Good luck guys.

04.11.2014 - 18:25
@lecloneur, ‘fcourse.. ;)
04.11.2014 - 21:57

Oooh hello - I seem to see some anti-aliased lines in the 50 screen.

That would be a very welcome change :)

04.11.2014 - 22:34
static bool PointIsWithinCircle(Vector2d point, Vector2d center, float radius)

Mixing floats and doubles again?

Seems history repeats itself ;)

04.11.2014 - 23:51
heh, where do you see doubles? :)
05.11.2014 - 00:07
if Vector2d comes from OpenTK, it’s doubles ;)
05.11.2014 - 00:30
Color or Colour?



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.