Shapes
Shapes are the backbone for creating generative visuals and animations. They are really easy to use and can be manipulated in many different ways, shapes (haha) and forms. In this article we’re taking a deep dive into shapes and how they can be used.
What are shapes
Under the hood, shapes are mathematical formulas written by the code wizards in the Resolume dungeon. Your computer understands how to interpret these formulas as shapes and output them to your screen.
This is comparable to using vector graphics in Illustrator. The advantage of shapes is that they are lightweight and scalable. You can blow shapes up to big sizes without losing quality and you can have hundreds of them on your screen at the same time (if your GPU allows it).
By default all shapes are rendered white. But by using the Shape Render node you can give them a color.
In this patch we transform from a simple Chevron to a complex shape.
Using shapes
Shape nodes like rectangle, octagon and line can be used to create basic shapes. All shapes have some way of scaling and/or distorting the shape.
Multiple shapes can be combined by using the Union node. Shapes can also be subtracted, excluded or displaced by each other.
The Edge node will create an outline of a shape.
Shapes can be moved around by using the Move or Transform node (Move is a cheaper operation).
Creating an outline of a Trapezoid and combining it with a small circle. Smoothing is used to create a more organic shape.
Rendering shapes
A shape can be rendered to a texture using the Shape Render node. This is also where color can be applied to the shape.
Antialiasing can be used to render the shape with smoother edges. Anything from a little bit of smoothing to blurring beyond recognition is possible.
Rendering with 0, 100 and 250 levels of anitaliasing.
The Shape Render node also functions as a camera that can zoom, move and rotate. This can be done by creating a Camera 2D node and sending it into the camera inlet on the Shape Render.
This is especially powerful on complex shapes like the one in the image below.
The same shape rendered four times with times 1, 2, 3 and 4 zoom. The complex shape is generated by using the Distance Line node on multiple different shapes and using the Union node to combine them.
Restrictions
The computational "weight" of a shape really depends on its complexity. Instantiating a circle a hundred times will not cause any issues, but instantiating a hundred different polygons with each 50 points will make your GPU sweat.
The Mesh2D workflow can help you when you need to render a lot of textures to the screen. Once you are running into these kinds of issues it might be smart to start learning about them.
Taking a star shape, rendering it to texture and creating 900 meshes out of it.