Calling other components and modifiers

Example: Polygons at Anchors

Here is a modifier which will put a Polygon at each anchor of its input.

Notice we are able to call the built-in Polygon component as a function. We can also pass in parameters to this function — here we’re passing in sides: index + 3.

Example: Text at Anchors

Here’s a similar example that places Text at each anchor point.

Notice the font parameter needs to be the URL of a font. The easiest way to get the URL for any Cuttle built-in font is to make a Text instance, find the font you want in the font picker, then click the “…” menu to the right and choose “Edit Expression” to see the font as a string.

Naming

You can call any built-in or project component as a function from your code. In order for the naming to be compatible with JavaScript, any character that is not alphanumeric or $ or _ is removed from the name. In particular this removes spaces from the name, so if you wanted to call the component named “Archimedean Spiral” you would call it as ArchimedeanSpiral(...).

Calling other modifiers

You can also call any built-in or project modifier as a function from your code. The first argument is an object containing any parameters (like calling a component). The second argument is the input Graphic for the modifier.

When you apply a modifier this way, the modifier will never mutate its input, it will only return the result of the modifier.

Here is a modifier which achieves the Drop Shadow effect we showed in a Cuttle tutorial video.

// You could make displacement a parameter of this modifier. const displacement = Vec(0.05, 0.05); // We make a Group that we'll pass in to BooleanDifference. const group = Group([ input.clone().transform({ position: displacement, }), input, ]); // Apply BooleanDifference modifier. The first argument is // parameters, which is empty. The second argument is the input to // the modifier. const shadow = BooleanDifference({}, group); // Assign stroke and fill styles. shadow.assignStyle( Fill(Color(1, 0, 0, 1)), // red fill undefined ); input.assignStyle( undefined, Stroke(Color(0, 0, 1, 1)) // blue hairline stroke ); return [input, shadow];