Vector
Vector data is comprised of points and lines. It's often used for graphical elements such as logos and icons. Vectors graphics have their pros and their cons. Pro: Small file size, Scales easily Cons: Not great for photorealism, Can be slower when really complex.
If you've used other design software you’re probably well acquainted with working with vector shapes but please take the time to learn about EXO more advanced Vector features so you can take full advantage of the tool.
Components
Point
Points are a single point in 2D space. They have an X & Y component. By themselves they are not visible.
Span
Spans join 2 points together. A span can only exist between two points. They can be either a straight line or a curve. Curves have control handles that are used to shape the curve.
Segment
When multiple spans are joined together they form a segment
Path
Paths consist of one or more segments that are joined to create a closed shape which can then be filled with a color.
Graphic
Graphics are vectors that have been nested within a parent vector.
Compound Vectors
You may be wondering why have all these different component types, well the answer is to allow for compound vectors. Most drawing programs only allow for points to be connected to 2 spans. EXO allows points to connect to many different spans. This allows you to draw complex shapes with lines that branch apart just like you would if you were using a pen and paper. Now if we look at an example of a compound vector you can see how one shape can have multiple Segments and Paths.
Masks
Vector Masks are a way of storing a selection of components. A mask can only store one component type at a time but it is possible to convert between the different types. Masks work based on indices. Each component in a Vector has a unique index starting from 0 and counting up. Masks store these indices. You can name masks and store them within a vector for future use.
Variables
Variables allow you to attach data to each component. EXO can use this data to create some very powerful effects. Variables have a name and type and they are attached to component type. A variable can be one of the following:
| Integer |
| Decimal |
| Point |
| Normal |
| Color |
| Material Fill |
| Transform |
EXO has a couple special variables that are used when drawing:
| Variable Type | Name | Component | Description |
|---|---|---|---|
| Color | color | Path | Fills the path with this color |
| Decimal | thickness | Point | Controls the thickness of the line |
| Decimal | offset | Point | Controls the offset of the line from the original path |
Materials
Materials tell EXO how to draw a vector on the canvas. Materials have 3 parts: Path Fill, Stroke Fill and Stroke.
Path Fill & Stroke Fill
Path Fill and Stroke fill are similar though there are a couple differences. Path Fill is used to fill in a closed path. The Stroke Fill is used to fill in the strokes. Fills have 4 different types:
Color
A solid color. Colors can be selected as RGBA, HSVA or HSLA. In 8 bit scenes color values range between 0 – 255. 16 bit scenes have color values between 0 – 65535. Colors are stored internally as a decimal value between 0 – 1.
Gradient
Multiple colors that are blended between. Gradients can be interpreted in a couple different ways:
| Type | Description | Note |
|---|---|---|
| Linear |
|
|
| Radial |
|
|
| Conical |
|
|
| Diamond |
|
|
| Square Root |
|
|
| Along Stroke |
|
Only Stroke Fills |
| Across Stroke |
|
Only Stroke Fills |
Angle
The angle in degrees to rotate the gradient around its center point.
Overshoot
What happens when rendering beyond the bounds of the gradient.
| Clamp |
|
Show the last color of the gradient |
| Reflect |
|
Go in the reverse direction of the gradient |
| Repeat |
|
Keep cycling through the gradient colors |
Blend Mode
How to interpret the transition between colors in a gradient. The differences are subtle.
| Linear |
|
Use a linear interpolation |
| Bezier |
|
Use a smooth Bezier interpolation |
Steps
How many steps are used to blend between the colors in a gradient. A low number will mean visible banding.
Dither
Tries to prevent banding by adding variations to the transition between colors. This is a work in progress. It will get better.
Pattern
Patterns use a repeating image to fill a shape.
Scale Mode
The scale mode of a pattern controls how a pattern is mapped on the canvas.
| Object |
|
Stretch the pattern to fill the shape |
| Texture |
|
Use the dimensions of the pattern |
| Along Stroke |
|
Stretch a single pattern along the length of the stroke |
| Across Stroke |
|
Stretch across the width of the stroke, tile along the length |
Wrap Mode
When a pattern cannot fill an entire shape it will repeat itself. This is commonly known as tiling. EXO supports two different ways of tiling.
| Repeat |
|
When the edge of the pattern is reached, go back to the beginning |
| Reflect |
|
When the edge of the pattern is reached, reverse |
Transform
The transform controls how a pattern is positioned, rotated and scaled within a shape. By default this is based on the bounding box of the shape. It is also possible to customize the transform of a particular vector using the pattern tool.
Opacity
Adjusts the transparency of the entire pattern.
Add Background
If the raster being used for the pattern is partly transparent you can fill the background with a solid color.
Remap Colors
Remap colors uses a gradient to change the colors of the pattern. The existing pattern is treated as greyscale. These greyscale values are then compared to the gradient you supply and the colors are sampled.
Stroke
A path by itself cannot be seen. To draw a path it needs some thickness. This thickness is represented by the stroke. To create a stroke a line is traced around the source stroke and then filled in using the Stroke Fill. There are numerous parameters that can be tweaked to control how the outline around the source path is drawn.
Thickness
Remap colors uses a gradient to change the colors of the pattern. The existing pattern is treated as greyscale. These greyscale values are then compared to the gradient you supply and the colors are sampled.
Line Style
Line Style controls if the stroke is drawn as a single, solid line or as a dashed line.
| Solid |
|
Drawn as one continuous line |
| Absolute |
|
Drawn as a dashed line. The dash length and spacing are absolute pixel count. |
| Relative |
|
Drawn as a dashed line. The dash length and spacing are relative to the thickness of the stroke. |
Cap Style
Determines how an open path is drawn at the ends. The cap style will also affect how dashed lines are drawn. Use round caps with a dashed line to create a dotted line.
| Butt |
|
The stroke stops flush with the path. |
| Square |
|
The stroke extends beyond the end of the path for the length of the thickness of the stroke. |
| Round |
|
The stroke makes a semi-circle at the end of the path. |
Inner Join
When two lines connect, if the angle is less than 180° that is considered an inner join.
| Miter |
|
Create a sharp join with no transition. |
| Bevel |
|
Add a transition line that's angled halfway between the two connecting lines. |
| Round |
|
Blend the two lines together with a smooth arc. The radius of the arc is the same at the thickness of the stroke. |
Outer Join
When two lines connect, if the angle is greater than 180° that is considered an outer join.
| Miter |
|
Create a sharp join with no transition. |
| Bevel |
|
Add a transition line that's angled halfway between the two connecting lines. |
| Round |
|
Blend the two lines together with a smooth arc. The radius of the arc is the same at the thickness of the stroke. |
Miter Limit
When two lines connect and they form a miter join, if the angle is very sharp the stroke will extend very far beyond the original path. The miter limit will constrain how far the miter can extend beyond the source path.
Offset
|
|
|
| 0% | 50% | -100% |
Typically the stroke is draw using the same thickness for both sides of the original path. The offset allows you to shift the stroke to one side or the other. You can even extend it beyond the source path. Large offset values may have trouble rendering properly.
Next: Nodes And Graph