# Calling other components and modifiers

## **Example: Polygons at Anchors**

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

const output = \[\]; input.allAnchors().forEach((anchor, index) => { const polygon = Polygon({ sides: index + 3, }) .transform({ position: anchor.position, }) .copyStyle(input); output.push(polygon); }); return output;

![](https://cuttle-content.imgix.net/learn/calling-other-components-and-modifiers/17a1ace46cc62082d98ffa6a950d8855bba990677b5b680df7606699f7db80a2.png?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)

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.

const output = \[\]; input.allAnchors().forEach((anchor, index) => { const text = Text({ text: index, font: "https://assets.cuttle.xyz/fonts/EMS/EMSReadability.svg", align: "center", }) .transform({ scale: 0.5, position: anchor.position, }) .copyStyle(input); output.push(text); }); return output;

![](https://cuttle-content.imgix.net/learn/calling-other-components-and-modifiers/02be510cb2c03b6191b3665a76cb036bc2187ebfd63052e476c08b1e1fbf593d.png?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)

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.

![](https://cuttle-content.imgix.net/learn/calling-other-components-and-modifiers/dc819d8a4b87023d18557cde54ec9da9e64113849b9ee125015ee1486cc6c3f5.png?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)

## **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](https://youtu.be/AMMNO375vR0) 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\];

![](https://cuttle-content.imgix.net/learn/calling-other-components-and-modifiers/9b6761ccfa478b5e416ddd5b1beebe0dd8742cffac709d6a134236409a8a4aee.png?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)