2.4. Modify the composition

You can modify your composition while it is running. This is called live coding. You can change data, rearrange cables, and even add nodes while a composition is running.

  1. In the Node Library, search for the Twirl Image node, and drag it onto the canvas.

  2. Put your mouse cursor on top of the cable that is going from Make Text Image to Render Image to Window, and click on it. It will change color to show you have selected it. Press the , or use the Editor’s menu Edit > Cut or Edit > Delete to delete the cable.

  3. Draw a cable to connect up the output port of the Make Text Image node to the Image port on the Twirl Image node.

  4. Draw a cable from the output port of the Twirl Image node to the Image port on the Render Image to Window node.

  5. Notice that nothing has happened yet in your composition. This is because Vuo uses events to drive changes in the composition. Draw a cable from the Requested Frame output port on the Render Image to Window node to the refresh port (the triangle on the top left of the Twirl Image node).

  6. Since Vuo is event-driven, you’ll need an event to push the image into the new Twirl Image node. Right click Fire on Start’s Started trigger port. You’ll see a menu that includes the option, Fire Event. (Don’t see the Fire Event option? Make sure your composition is still running.) Click on this option to fire an event to carry the image through the cable to the Twirl Image node.

  7. Now you can see that your text is distorted.

  8. Double-click on the Angle input port of Twirl Image. By moving the slider you can see the twirl distortion increase or decrease. This is because the Requested Frame node’s output port is sending a stream of events to the Twirl Image node and these events carry the changes to the Render Image to Window node.

  9. Click on the Show Events button in the Vuo Editor toolbar and you’ll see a representation of the events flowing out of the Render Image to Window to the Twirl Image node.