Code components

Introduction

Code Components are very similar to custom modifiers:

• They’re defined with JavaScript code.
• They always return geometry.
• They can optionally take parameters.

The only difference is that Code Components do not take input.

Creating Code Components

In the left sidebar, click the chevron next to plus Button and select “New Code Component”.

The default Code Component has an example that shows different ways of generating geometry.

A note about default Stroke

When you’re writing a Code Component, often you only care about the geometry of the shape you’re making and not the color. But other times you’re using the Code Component to create shapes with specific colors. Here’s how that works.

If you return geometry that does not have any .stroke or .fill styles on it, then it will render with the default style which is a black hairline stroke. For example, here is a simple Code Component that returns a line:

Notice that .stroke and .fill are undefined. Thus it is rendered with the default black hairline stroke. And, when you create an instance of this Code Component, it will automatically get the default Stroke modifier pre-checked:

On the other hand, if any of the shapes you return have a style, then Cuttle will not apply the default style, so you will need to apply a style to all your shapes or else they will be invisible.