How to send a video from another app to Vuo for effects processing, then send the video back to the other app, using Syphon as the link.
Notes
Update: If you’re trying to recreate this composition in Vuo 0.9.0 or later, the Discard Data from Event node no longer exists. Instead, 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 Receive Syphon Video node’s Received Image port to the Count node’s Increment port. This makes a thin (event-only) cable instead of the default thick (data+event) cable.
Transcript
2015 October update: VDMX now natively supports playing and controlling Vuo compositions, so you don’t need to use Syphon for VDMX!
1 Hey, I’m Travis with Team Vuo. In this tutorial we’re going to walk through how to build a Vuo composition that receives video from VDMX, processes the video, then sends it back into VDMX.
2 To start off, let’s work on outputting video from VDMX. When we first open VDMX, we have more options than we need for today’s tutorial, so the first thing I’m going to do is go up to “templates” and select “simple mixer.” Cool. If you’ve never used VDMX, it’s divided down the middle with controls for a left channel on the left side, and controls for a right channel on the right side. This window here is my display, it shows me what’s being created.
3 On the left, VDMX is producing a video of color bars, on the right it’s producing a video of a checkerboard. In the center is a fader bar that allows us to fade between videos. Move the bar all the way to the left to see the left channel, and we can fade all the way to the right to get the right channel.
4 We want to take the left channel, the color bars, and output it to Vuo to implement some effects, then receive the new modified video back through the right channel. Let’s start by outputting the left channel.
5 VDMX is an array of small windows, and we’re going to find the window that says “Workspace Inspector.” Then we’re going to select “plugins,” go down to the bottom-left and click the plus-sign to add a new plugin, then we’ll scroll down and select “Syphon output.” The Syphon plugin is the medium for data between VDMX and Vuo. You’ll notice this new window popped up that says “Syphon Output.” We want to output the left channel, so we’re going to select the checkbox that says “Left.” Now, our left channel, the color bars, is being outputted via Syphon. Let’s work in linear fashion, so the next thing we’ll do is open up Vuo, and receive the video via Syphon.
6 We’ll open up Vuo, type in “syphon,” and drag “Receive Image via Syphon” onto the canvas. Notice that the node is called receive “image” instead of “video.” This helps specify that the node is firing an event for every individual image within Syphon’s video stream. This node will automatically retrieve images via Syphon and input them into the Vuo composition. The next thing we want to do is add an effect to the flow of images, so I’m going to type in “ripple,” and drag Ripple Image onto the canvas. Next we’ll take the received image, and input it into Ripple Image. Now that our image is flowing through an effect we want to send it back to VDMX, via Syphon.
7 So we’ll go back to the node library and drag Send Image via Syphon onto the canvas. This node will output an image from a Vuo composition, using Syphon. We’ll take our rippled image, and input it into Send Image via Syphon. Now our composition is complete, so I’ll go ahead and run it. If I hover over the received image port, we can see that we are actively receiving events, and that 640x480 pixel images are flowing through the composition. Excellent. We’ll keep our Vuo composition running, set it to the side, and work on having our rippled image show up in the right channel of VDMX. Remember the Left channel is what is being sent to Vuo, so I’ll move the crossfader all the way to the right, this way it will be clear when we start receiving images back from Vuo.
8 All we have to do is select a clip up here, I’ll select the gradient clip, and go down to the source tab, and select “Syphon,” and it will give us the choice of “Vuo Composition Loader.” And there we have it. Now our Right channel is receiving the stream of images that are being originated by VDMX, sent to Vuo where they’re being rippled, then back into VDMX, here. Awesome. And we can crossfade back and forth to see exactly what our ripple effect is doing. While our color bars are progressing across the screen, our ripple is stagnant.
9 So let’s work on animating the image; let’s make it move. If go back to our Vuo composition, and look at our Ripple Image node, we see multiple inputs for controlling our ripple effect. We can adjust the angle of our ripple. We can adjust the amplitude. The wavelength. And the phase.
10 To animate our image, let’s send a flow of values through one of our input ports. The easiest way to create a flow of values is to put the Count node on the canvas, so we’ll drop that here. Let’s have our count control the phase of our ripple effect. If we look at the spectrum of values that can be received by our phase input, we see that a full phase occurs between 0 and 1, so let’s set up our Count node to increment upward by a value of .01. This will make micro adjustments to our image and allow us to animate it smoothly. We’ll link our count output to our phase input.
11 Next, we need to control when the count node is going execute. The best way to control the count node is to sync it with the the flow of images that is coming out of VDMX, which we’re receiving via Syphon, about 30 times per second. But we need an event, without any data, to send to the Count node’s “increment” port, since we just want to increment using the value we’ve already chosen: 0.01. The “Discard Data from Event” node allow us to do just that
12 We’ll link our flow of received images to Discard Data from Event, and we’ll take our flow of events and link it to the increment input port. You’ll notice that Discard Data from Event was automatically converted to a type converter. And that our right channel in VDMX is now being animated. Every time we receive an image from VDMX, it’s sent to Ripple Image, and at the same time, the phase is being increased by .01. This small change is happening about 30 times per second and smoothly animating our image.
14 Awesome. We hope this will help you get started using Vuo with VDMX. Thanks for checking out this tutorial. If you have an idea for another tutorial you’d like to see, please email us. If you’d like to learn more about Vuo development or our plans for Vuo, you can check out vuo.org. And we hope that you’ll consider becoming a part of the Vuo community, and supporting Vuo by purchasing a copy of our Beta. Thanks so much for checking out Vuo, and we look forward to seeing what you create.
