Layer (vuo.layer)
These nodes are for working with 2D objects called layers that can be combined to create composite 2D 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 together 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.
Nodes that create layers input a position, which determines where the layer is placed in the composite image.
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 Color Layer
node has input ports Width and Height. The Make Image Layer (Scaled)
node has input port Width, and the layer’s height is determined by the aspect ratio of the input image. The layers outputted by these nodes are called scaled layers because their size scales with the size of the composite image.
A few nodes 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 Make Image Layer (Real Size)
and Make Text Layer
nodes both output Real Size layers. The purpose is to keep the image or text sharp, rather than allowing it to become blurred by resizing. A Real Size layer can be translated but can’t be rotated or scaled.
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.
Anchors and positions
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.
Real Size layers and Retina screens
Each image has a Scale Factor. If the image’s filename has a scale suffix (such as the @2x
in image@2x.png
), it is used as the image’s Scale Factor. Otherwise the Scale Factor is 1x. 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 |
Names
Several layer nodes, such as the Is Point within Layer
node and the Receive Mouse Drags on Layer
node use a layer’s name to detect what layer to act on. The Layer Name
entered must exactly match the name in the original layer’s Layer Name
port. A name with a trailing space, for example, will not match a name without a trailing space.
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:
- Align Layers To Window: Renders two layers and aligns them to the edge of the window.
- Change Grid Spacing: Arranges layers in a grid, with the spacing between layers controlled by mouse movements.
- Change Layer Blend Mode: Cycles through the different available GL Blend modes, and applies them each to the foreground layer.
- Compare Layer Gradients: Displays a linear gradient and a radial gradient. When the mouse moves upward, the start and end point of the linear gradient get farther apart, and the radius of the radial gradient gets larger.
- Demo Projection Mapping Calibration: Demonstrates one way to line up a quad layer with a physical surface for projection mapping: by using the input editors to adjust the corner points.
- Display Images On Layers: Displays two images using layers.
- Draw Rainbow Trail: Uses image feedback to draw a moving layer that leaves trails.
- Draw Shapes: Draws several shapes, with their sharpness and other parameters controlled by mouse movements.
- Is Mouse Within Layer: Changes a layer's color when you hover the mouse over it.
- Render Text Layer: This composition creates a text layer and renders it.
- Rotate Gears: Displays interactive gears using layers.
- Show Arranged Layers: Creates several layers with different shapes, and arranges them in rows and columns.
- Show Arranged Text Layers: Arranges text layers in columns, demonstrating horizontal alignment of layers within a column and of text within a layer.
- Show Text Anchor: Demonstrates the 9 text anchor options.
- Stretch Oval With Bounds: This composition shows the layer bounds of an oval layer as it gets stretched and compacted.
Nodes:
- Align Layer to Window (vuo.layer.align.window): 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.
- Get Rendered Layer Bounds (vuo.layer.bounds.rendered): Outputs the center and size of a layer.
- Combine Layers (Transform) (vuo.layer.combine): Groups multiple layers together and applies a transformation to the group.
- Combine Layers (Center) (vuo.layer.combine.center): Groups multiple layers together and applies a transformation to the group.
- Copy Layer (Transform) (vuo.layer.copy): Creates multiple layers consisting of transformed copies of an original.
- Copy Layer (TRS) (vuo.layer.copy.trs): Creates multiple layers consisting of transformed copies of an original.
- Receive Mouse Drags on Layer (vuo.layer.drag): Fires events when the mouse tries to drag a layer.
- Get Layer Values (vuo.layer.get): Gives information about a layer.
- 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.
- Make Image Layer (Scaled) (vuo.layer.make): Creates a layer that can be combined with other layers to create a composite image.
- Make Color Layer (vuo.layer.make.color): Creates a solid-color layer that can be combined with other layers to create a composite image.
- 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 Linear Gradient Layer (vuo.layer.make.gradient.linear): Creates a gradient that transitions smoothly between the given colors along a straight line.
- Make Radial Gradient Layer (vuo.layer.make.gradient.radial): Creates a circular gradient that transitions smoothly between the given colors.
- Make Oval Layer (vuo.layer.make.oval): 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 Image Layer (Real Size) (vuo.layer.make.realSize): 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 Rounded Rectangle Layer (vuo.layer.make.roundedRectangle): Creates a solid-color rounded rectangle 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 Image Layer (Stretched) (vuo.layer.make.stretched): Creates a layer that can be combined with other layers to create a composite image.
- Make Text Layer (vuo.layer.make.text): Creates a layer that can be combined with other layers to create a composite image.
- Is Layer Populated (vuo.layer.populated): Outputs true if the layer is non-empty or has any non-empty child layers.
- Render Layers to Image (vuo.layer.render.image): Creates a composite image.
- Render Layers to Window (vuo.layer.render.window): Displays a window containing a composite image.
- Tile Layer (vuo.layer.tile): Creates copies of a layer tiled in a grid.
- Transform Layer (vuo.layer.transform): Applies a transformation to a layer.
- Is Point within Layer (vuo.layer.within): Outputs true if the point is within the given layer.