Using Vuo Image Generator compositions in VDMX

How to load Vuo Image Generator compositions and how to manipulate Vuo’s inputs (published ports) from within VDMX


Hi! I’m Jean Marie from Team Vuo. Vuo compositions can be used in other applications. In this tutorial we’ll cover how to use a specific type of Vuo composition, one that conforms to Image Generator protocol, as input to VDMX.

OK, let’s get started. Here I’m using VDMX’s simple mixer template, and I’ve already moved the crossfader all the way to the left, so we are looking at the left screen. I’m going to drag my Vuo composition into a media bin.
It takes moment to compile the first time, but after that it will be available right away.

Here you can see that I can select the Vuo composition, alter the inputs within VDMX, and see the changes in VDMX’s output. In VDMX with an image generator composition, unlike video clips, you can change parameters on the fly, to get much more variety and depth in your visuals.

So, what is a Vuo Image Generator composition?

A protocol in Vuo means that the composition has certain inputs and outputs that allow it to talk to the outside world in a predictable way.
These protocols make it possible for VDMX to run the Vuo compositions you use. A composition that conforms to the Image Generator protocol uses Vuo to create an output image, which is displayed within VDMX. If you want to know more about how to create an Image Generator, I recommend our Vuo tutorials on protocols.

For VDMX to make sense of an Image Generator composition, the composition must know the output image size. This means that the “Width” and “Height” input ports must connect to the Vuo node that creates the output image for VDMX. Other input ports can be created that will be understood within VDMX.

How are specific inputs displayed in VDMX?

The composition, Wander Text, which I just I placed in the media bin, displays a wandering, rippled text banner. In addition to the inputs for width, height, and time, there are published inputs for the color of the text banner, a Boolean true/false to switch the banner background, inputs for the text itself, and the font. In VDMX you can see sliders to change the text [banner] color, a text where I can change the text that’s displayed in the banner, a Boolean where I can change the background, and since I used the name “FontMenu” when I labeled my input port, VDMX will pop up a font picker, where I can go ahead and pick a font.

Here’s another image generator composition, Video Rotate and Drop, that uses an image as a published input port. When I select it I have the choice of what image to use. I can also use other VDMX inputs, such as the FaceTime camera.

In another composition, Clouds in Space, I’ve set up a 3D scene, and here I’m using a Vuo camera that you can control directly. In VDMX, I have a 2D point to control the X and Y position so I can rotate around my 3D object. I have a separate control for radius. I’ve also created separate input ports for the amount of noise so I can deform my object, the speed at which things happen, whether or not I want my object to expand. And I can even control the object type.

I’d like to take a look at this image generator in a little bit more detail. First I want to take a look at how we control the camera. In this detail you can see a VDMX 2D point-picker. The range goes from 0, 0 to the maximum height and width of the composition. In order to control the Vuo camera movement, using the VDMX 2D point-picker, in my Vuo composition I need to scale the input from pixels to degrees and create the coordinates for input to my 3D camera.

Sometimes you may want to control an item that VDMX doesn’t recognize, such as a menu item. To do so in my composition I first added a “Get Item from List” node.

Then I connect it up to the input port, which specifies the type of object, in this case called “Distribution.” It automatically specifies the Vuo type I need, so then I can pick a choice for each of the items in the list. I’ve already created and changed the details for my published port object type to pick from 1 to 4 and that becomes the input to the “Which” port which selects which of these items gets fed into the [Make]“Random Points Object” node.

So in summary, a Vuo Image Generator [composition] can be dragged into a VDMX media bin, and so you can change the compositions parameters within VDMX using the composition’s published ports.

In addition to Vuo resources, the VDMX Wiki is a great source of information about all things VDMX.

You’ll find all the compositions I used in today’s tutorial in Vuo’s composition gallery. There are several others with the tag VDMX, so you can explore other compositions within VDMX.

Happy mixing!