Live coding and editor tools for examining a composition.
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
-
OK. We’ve built this composition. When we press “Run,” it creates this window and counts upon it. Now, let’s learn some more about Vuo by walking through a little bit of live coding. Live coding means modifying your composition while it’s running. This can be handy, for example, if want to see what you’re building while you’re building it, or if you’re creating live visuals at a show and want to mix it up.
-
The first thing we’ll look at is “Show Events” mode, which we can initiate by clicking the button here. Now we can see our composition pulsing every one second. Let’s slow it down a little bit. I’ll adjust “Fire Periodically” to fire an event every 2 seconds.
-
We’ve talked about how events can flow in a composition, and now, we can actually see what’s happening. Every time “Fire Periodically”'s trigger port expands, an event is being fired outward. And every time a node becomes lit up with color, those nodes are executing their function. So every 2 seconds a singular event is flowing from “Fire Periodically” and through all of these nodes, to produce the count you see here.
-
The next thing we’ll look at is Port Popovers. Anytime a composition is running we can click on a port, and get all the current information from that port. For example, we can click on the output port of “Count” and see that the data type is a real number, when the last event passed through, and the current value. We can click on the “Layer” output port and see that our data is now converted to a layer, the current value, and everything about the font and the position of our text.
-
If you decide that there is information that you’re really like to keep track of, you can simply click on a popover, and create an independent windows to view as you’d like. You’ve probably noticed that the “Requested Frame” output port of “Render Layers to Window” seems to be pulsing faster than the rest.
-
Let’s take a look. If we look at the “Last Event” line, we can see that that it’s outputting approximately 60 events every second. If we look at our documentation we can read that this port fires an event every time my laptop display is ready to display a new frame, which is happening about 60 times per second. To make smooth animations, you’ll typically want to use the events from “Requested Frame” to drive your composition. Also, this port outputs the time in seconds as its data, which you can use to make animations that change over time.
-
Since we’re aware of how our events are flowing, I’ll go ahead and hide Events mode. The next thing I’d like to do is insert a background image. To do this, I’m going to follow the same progression that we did for our count. We’ll start with an event, then we’ll create what we want, then we’ll turn it into a layer and insert it into our composition.
-
Since my background isn’t going to change, like our count is changing every two seconds, I’ll only want to use one event to create it, instead of processing the same background over and over again every 2 seconds.
-
When building compositions, it’s good practice to be as efficient as possible by only processing what you need to. By having complete control of events, you have complete control of what you process. So instead of using “Fire Periodically,” I’ll put “Fire on Start” onto the canvas. Now that we have our event, I’m going to choose an image for our background. I’ll take an image from my desktop of some hands counting and I’ll drag and drop it into our composition.
-
When you drop an image onto the canvas, Vuo automatically creates the appropriate node to retrieve it. Now I’ll take our singular event and connect it to the refresh port of “Fetch Image.” When “Fetch Image” receives the event it will retrieve this image.
-
Since we want to turn this image into a layer that we can stack our counting layer on top of, I’ll go to the Node Library and type "make layer. " I’m going to choose “Make Scaled Layer” because this node will give us the ability to resize the layer if need be.
-
Now we’ll take our image plus our event and link it to the image input port of “Make Scaled Layer.” Next we’ll take our new layer, and since we want this to be our background layer, I’m going to lay it down first by putting it in the first position. Then I’ll take the layer of our count and stack it in front by putting it in the second position.
-
Now, our background layer is ready to go, we just need send an event through it. Since our composition is already running, I’ll just go ahead and right click our trigger port and fire an event, and there’s our background layer.
-
All right, to conclude, let’s just have a little fun and I’ll walk you through some easy live coding choices for this composition. I’ll speed up our count, I’ll count backwards by fives, I’ll increase our text size, I’ll change the color to baby blue, I’ll bring the location of our text downward, and let’s do something with our “Requested Frame” port. Remember, you have an event coming out here about sixty times per second. The value is increasing about once every second. We can use this stream of events and stream of values to make smooth animations. So let’s feed this output into the “Rotation” port of our layer. Here we see that it starts to rotate very slowly, so I’ll go to the Node Library and find a “Multiply” node. Put it on the canvas, and I’ll bring our value into it, and our multiplier value by 100. I’ll send it back to the rotation. Awesome. All right, that’s enough for now.
-
Thanks so much for checking out our Quick Start videos. To keep learning, your most valuable resources are Vuo’s growing number of built-in example compositions, video tutorials, and the manual. Thanks for choosing Vuo. And happy creating.
