Layer (vuo.layer)
Nodes for working with 2D objects called layers that can be stacked to create composite images.
A layer is a rectangle that contains one or more images, texts, or shapes. For example, each of the Make Image Layer
nodes inputs an image and outputs a layer whose rectangle is filled with that image. The Make Oval Layer node outputs a layer whose rectangle has a transparent background and contains an oval that extends to the edges of the rectangle.
Layers can be combined as if they were stacked on top of one another to create a composite image. For example, the Render Layers to Window node inputs a list of layers, ordered from background to foreground, and composites them to create the single image displayed in the window.
If you want several layers to move together, you can group them with the Combine Layers
nodes. Each of these nodes inputs a list of layers and outputs a “parent” layer that contains all of the input “child” layers. Instead of moving the child layers individually, you can move the parent layer, and all of the child layers move with it.
Placement
Most nodes that create a layer determine the layer’s placement with an anchor and a position. The position is a point in the composite image. The anchor is the part of the layer that should be located at that point. For example, if the anchor is the bottom left corner of the layer, the layer will be placed so that its bottom left corner is at the given position. If the anchor is the center of the layer, the layer will be centered at the given position.
The diagram below shows the placement of a layer created by Make Text Layer, with a red dot showing the position.
Size and scaling
Most of the nodes that create layers input a size, which determines how big the layer is relative to the composite image. For example:
- The Make Rectangle Layer node has Width and Height input ports.
- The Make Image Layer (Scaled) node has a Size input port, to specify the width or height of the layer. (The layer’s other dimension is determined by the aspect ratio of the input image.)
- The Make Text Layer node has a Font input port. The layer’s width and height are calculated based on the font size and the size of the window or image in which the layer is being rendered.
The layers outputted by these nodes are called scaled layers because their size scales with the size of the composite image.
A few nodes, including Make Image Layer (Real Size), create a different kind of layer. Real Size layers are always rendered at the same size no matter how large or small the composite image. The purpose is to keep the image sharp, rather than allowing it to become blurred by resizing. A Real Size layer can be translated but can’t be rotated or scaled.
Real Size layers and Retina screens
Each image has a Scale Factor (see the Image node set documentation for more information). The Scale Factor is used when rendering a Real Size layer with the Preserve Physical Size
port set to true.
For example, when Preserve Physical Size
is false:
|
Non-Retina (1x) screen |
Retina (2x) screen |
Image with Scale Factor 1x |
Each image pixel is rendered as 1 screen pixel |
Each image pixel is rendered as 1 screen pixel |
Image with Scale Factor 2x |
Each image pixel is rendered as 1 screen pixel |
Each image pixel is rendered as 1 screen pixel |
And when Preserve Physical Size
is true:
|
Non-Retina (1x) screen |
Retina (2x) screen |
Image with Scale Factor 1x |
Each image pixel is rendered as 1 screen pixel |
Each image pixel is rendered as 4 screen pixels (2x2) |
Image with Scale Factor 2x |
Each group of 4 image pixels (2x2) is rendered as 1 screen pixel |
Each image pixel is rendered as 1 screen pixel |
Coordinates
In Vuo Coordinates, (0,0) is the center of the composite image. The composite image has a width of 2, with X-coordinate -1 on the left edge and 1 on the right edge. The composite image’s height is determined by its aspect ratio, with the Y-coordinate increasing from bottom to top.
Example compositions:
Nodes:
- Align Layer to Window (vuo.layer.align.window2): Aligns the layer with an edge or corner of a window.
- Arrange Layers in Column (vuo.layer.arrange.column): Moves layers so that they are arranged in a vertical column.
- Arrange Layers in Grid (vuo.layer.arrange.grid): Moves layers so that they are evenly arranged in a grid.
- Arrange Layers in Row (vuo.layer.arrange.row): Moves layers so that they are arranged in a horizontal row.
- Change Layer Blending (vuo.layer.blendMode): Applies a different image compositing style to the layer.
- Combine Layers (Center) (vuo.layer.combine.center): Groups multiple layers together and applies a transformation to the group.
- Combine Layers (Group) (vuo.layer.combine.group): Groups multiple layers together.
- Combine Layers (Transform) (vuo.layer.combine): Groups multiple layers together and applies a transformation to the group.
- Copy Layer (TRS) (vuo.layer.copy.trs): Creates multiple layers consisting of transformed copies of an original.
- Copy Layer (Transform) (vuo.layer.copy): Creates multiple layers consisting of transformed copies of an original.
- Get Child Layers (vuo.layer.get.child): Outputs a list of a layer’s child layers.
- Get Edge Blend Values (vuo.layer.get.edgeBlend): Splits an Edge Blend into its individual components.
- Get Layer Bounds (vuo.layer.bounds): Outputs the center and size of a layer.
- Get Layer Values (vuo.layer.get): Gives information about a layer.
- Get Rendered Layer Bounds (vuo.layer.bounds.rendered2): Outputs the center and size of a layer as it is actually rendered.
- Is Point within Layer (vuo.layer.within2): Outputs true if the point is within the given layer.
- Make Edge Blend (vuo.layer.make.edgeBlend): Creates an Edge Blend that can be used to tell Make Quad Layer how to crop, fade, and apply gamma to an edge.
- Make Image Layer (Real Size) (vuo.layer.make.realSize2): Creates a layer that can be combined with other layers to create a composite image.
- Make Image Layer (Scaled) (vuo.layer.make.scaled): Creates a layer that can be combined with other layers to create a composite image.
- Make Image Layer (Stretched) (vuo.layer.make.stretched2): Creates a layer that can be combined with other layers to create a composite image.
- Make Image Layer with Shadow (Real Size) (vuo.layer.make.realSize.shadow): Creates a layer that can be combined with other layers to create a composite image.
- Make Image Layer with Shadow (Scaled) (vuo.layer.make.shadow): Creates a layer that can be combined with other layers to create a composite image.
- Make Linear Gradient Layer (vuo.layer.make.gradient.linear2): Creates a gradient that transitions smoothly between the given colors along a straight line.
- Make Oval Layer (vuo.layer.make.oval2): Creates a solid-color oval layer that can be combined with other layers to create a composite image.
- Make Quad Layer (vuo.layer.make.quad): Stretches an image by specifying the positions of its four corners.
- Make Radial Gradient Layer (vuo.layer.make.gradient.radial2): Creates a circular gradient that transitions smoothly between the given colors.
- Make Rectangle Layer (vuo.layer.make.rect): Creates a solid-color layer that can be combined with other layers to create a composite image.
- Make Text Layer (vuo.layer.make.text2): Creates a text layer that can be combined with other layers to create a composite image.
- Receive Mouse Drags on Layer (vuo.layer.drag2): Fires events when the mouse tries to drag a layer.
- Render Layers to Image (vuo.layer.render.image2): Creates a composite image.
- Render Layers to Window (vuo.layer.render.window2): Displays a window containing a composite image.
- Tile Layer (vuo.layer.tile): Creates copies of a layer tiled in a grid.
- Transform Layer (TRS) (vuo.layer.transform.trs): Applies a transformation to a layer.
- Transform Layer (Transform) (vuo.layer.transform): Applies a transformation to a layer.