Examining a composition that counts.
Notes
Update: If you’re trying to recreate this composition in Vuo 1.2.4 or later, hold down the Shift key (Vuo 1.2.6+) or Option key (Vuo 1.2.4 and 1.2.5) while connecting the cable from the Fire Periodically node’s Fired port to the Count node’s Increment port. This makes a thin (event-only) cable instead of the default thick (data+event) cable.
Transcript
-
Let’s take a look at another simple composition and learn a little more about how the parts and pieces of Vuo work. This is a composition that counts. When I press Run, it produces this: a blank window with numbers counting in the center. Let’s slowly walk through what’s happening, and as we go through it, we’ll define a few more elements in the Vuo editor.
-
We know that information in Vuo flows from the left of a node to the right of a node, from input to output, and that all information flows in one direction, downstream from output ports to input ports. So in looking at this composition, we can see that everything originates here, at the “Fired” port of “Fire Periodically.”
-
This node is quite similar to the “Fire on Start” node, except that it fires an event at a steady rate, and we get to set that rate here at the “Seconds” port. It’s currently firing an event out of the “Fired” port every one second.
-
Every one second, an event will travel down the cable to the “Increment” port of the “Count” node. We’ll take a look at our documentation for “Count” and we see that it keeps track of a count that can be incremented or decremented. We can count up or down. It’s important to note that this node has the ability to keep track. It has memory. Meaning that our composition is currently counting and I can temporarily disconnect our cable of events, stopping our count, then I can reconnect our cable and it will pick up right where it left off.
-
A node that has memory is called a stateful node and this is revealed by the thick border along the bottom. Notice that “Make Text Layer” doesn’t have a border, and is therefore stateless, and stateless nodes don’t have memory. We’re always going to get the get the exact same result from “Make Text Layer” unless we manually adjust the input ports, or feed new information in with a cable, which is happening here.
-
Looking back at the “Count” node, we also see a triangular symbol after each input port. This is called a port action symbol. Whenever you see one of these, it means that this port will affect the node in a way that’s special or different.
-
In the case of the “Count” node, sending an event through any port would affect the output differently. The “Increment” port would cause the count to increase, the “Decrement” port would cause the count to decrease, and the “Set Count” port would cause the count to be reset to zero. [Actually, it would be set to the port’s value, which is zero here.]
-
Compare this to the “Make Text Layer” node. No matter which port you send an event into, “Make Text Layer” will produce the exact same layer. The only way to get something different is to input additional data, which we’re about to get to.
-
So the “Count” node is currently receiving an event every one second to its “Increment” port and in turn is outputting an event every one second that is carrying the latest number as its data.
-
Before our count enters the “Text” port of “Make Text Layers” in enters a Type Converter, which reveals that our count is being outputted as a real number, which computers read differently than readable text, and that Vuo is automatically converting it to text. There’s nothing special you need to do to create one, if I disconnect the cable it will disappear, and when I connect the cable, Vuo will automatically create it.
-
Vuo processes many different types of data, and sometimes you will need to get an extra node involved. If you find yourself trying to progress between two types of data, and can’t find what you’re looking for, try typing “convert” into the Node Library, and here you’ll see of significant list of nodes to help you do so.
-
Now, our number, in this font, at this position on the window is being rendered as a text layer and being sent outward here. That layer is flowing down to “Render Layers to Window,” which is rendering our singular layer onto our window. Great. To learn more about Vuo by building this composition, check out our next tutorial.
